See also overflow in the display settings to make the background or/and the content of the widget overflow on the external sides.
Style
None / Plain / Gradient / Image
Define the style of the background.
- None : default background. Keep the css settings of the current Joomla template.
- Plain : the background is filled with one unique color.
- Gradient : the background is filled with a gradient between two colors.
- Image : the background is filled with an image.
Plain background
Color : the background is filled with the color setting.
Hover color : the color of the background will change if you move your mouse over the background. Leave the hover color empty if you want to keep the default color. When you define a hover color for the header of a panel, the color will change when the mouse goes hover any place in the panel.
Opacity : in percentage. You can choose a semi-transparent color, of full colored. From 0% (full transparent) to 100% (full color).
Tip : when you add a hover color, choose a color very close to the normal color to avoid excessive effect.
Gradient background
Direction : of the gradient fill between the two colors.
Color - End color : the background is filled starting from the color with a progressive change to the end color..
Hover color - End hover color : the colors of the background will change if you move your mouse over the background. Leave the hover colors empty if you want to keep the default colors. When you define hover colors for the header of a panel, the color will change when the mouse goes hover any place in the panel.
Opacity : in percentage. You can choose a semi-transparent color, of full colored. From 0% (full transparent) to 100% (full color).
Tip : choosing two very close colors in a vertical gradient can give a little depth and relief in a discreet way.
Image background
Image : you can choose an image that will be displayed as background. You can drag-drop an image from a website or from your desktop in the media manager, then resize or crop it.
Image hover : you can define another image, that will be displayed when you move the mouse over the background.
Image fit : set in what size the image will be displayed to fill the background.
- Image size : the image keep its real size. You can display it once, or choose to repeat it.
- contain : the image keeps its proportion and adapts its size to fill entirely one side of the container (for example all width). The image is entirely visible. You can display it once, or choose to repeat it if the image is smaller tha the container..
- cover : the image keep its proportion and adapts its size to fill entirely the container (for example all width). The image can be rendered cropped in this setting.
- stretch : the image adapts both its width and height to fill exactly the container.
Repeat :
- Yes : if needed, the image is repeated both vertically and horizontally.
- No : the image will always display only once.
- Vertical : if needed, the image is repeated vertically
- Horizontal : if needed, the image is repeated horizontally
See also : to get responsive image with content hover, use the image widget. The image is responsive, and you can define any html content on the image as caption : either always visible, or displayed when the mouse goes over.
Operations
These background settings are rendered as css styles inside the widget in a <style> tag. It overrides the default css settings of the template, except if your template uses the !important rule.