How To? - Fill Site Builder Widget with background image
Design and Skin Customization
You have two pieces of CSS code there, the first one does nothing because its not targeting anything, translated to english it reads "make the margin zero and have no padding".
Which would be fine, if you actually supplied a target.
--
The second one has a target, it targets 'html' which is the wrapper for the entire page including the head and the body, everything.
The code you are then offering is "give it a background image found at images/yourimage.jpg, center it in the page and dont repeat it."
so as long as that image is actually there, I would expect that it may appear. Any more specific CSS than yours will over-ride it. Thats what CSS is Cascading Style Sheets.
Works like this: if you have ten layers all nested, and in css you say, paint the bottom layer green. Then you say, paint the second bottom layer red the person viewing those layers will see red. Unless the second bottom layer is smaller than the bottom layer.
If you want to target a specific widget, you need a better targeter than 'html'.
Widgets will have a targeter on them something like id="jrWidget_item_id_4" for each individual widget. you can target that with CSS like this
background: url('images/yourimage.jpg') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
Then the code you're passing in is JUST targeting THAT widget. so you need to use firebug or similar to view the id= on the widget your interested in.
)
