How To? - Fill Site Builder Widget with background image

Hi all,

I found some CSS code that should allow me to fill a widget with a background image, but I am not sure how to properly adapt it for use. My goal is to be able to drop an image as a background (edge to edge inside the widget) in a Site Builder => HTML Editor widget, secondarily, I would like to control its opacity to make it a soft image behind text.

I tried this code a couple different ways, and couldn't get it to work at all. And guidance is appreciated..


updated by @xephius: 06/20/17 06:40:42AM

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

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.

Thanks!

I think I understand! This is really well explained, thanks. I am going to re-read this tomorrow morning with fresh eyes and give it a try. I will investigate firebug as well and report back.

Clear skies,
John