Widget – add a background image?

[glen hearnden]

Hi Bill,

Is there a way to add a background image to any specified widget area, perhaps using custom CSS? (would seem simplest option, but may not be that simple…).
For example to add a faint map image to background of the contact widget area in a sidebar?
It would be nice to know if there is a standard bit of CSS to do this for any chosen widget background…

Thanks in advance.

[Bill Robbins]

Hi Glen,

Great question. Most elements in HTML can have a background added to them via CSS. A common usage of that is with the body tag so you end up with a background that spans the entire site. The CSS for that looks like this:

body {
	background-image: url(https://yoursite.com/image.png);
}

To provide hooks for styling certain elements, WordPress and our themes add classes and IDs to many of the elements so they can be styled uniquely from the others. Take widgets for example. They generally will have a class of “widget” added to all of them. To add a background to all widgets, you would use CSS like this:

.widget {
	background-image: url(https://yoursite.com/image.png);
}

The period before “widget” indicates that this is a class we are styling. Classes are intended to be used repeatedly on the same page. IDs on the other hand are intended to be unique. There should only be one of a specific ID on any given page. That way you can target that ID only. So the background of a contact widget might be like this:

#organizedthemes_contact-2 {
	background-image: url(https://yoursite.com/image.png);
}

I say might be because every instance of a widget has a different ID. That happens to be the one from the Forward theme demo’s home page. You can find the ID of the widget you’re working with this way:

1. View the page that has your widget in it.
2. Right click on the page background and select View Source or access the source of the page from your web browser’s menus.
3. Look through the source code of the page until you see your widget. The code will roughly start with the content at the top of the page and work its way down from there. The opening line of the widget will look something like this:

   
   <div id="organizedthemes_contact-2" class="widget organizedthemes-contact clearfix">
   

4. Here organizedthemes_contact-2 is the ID to use. With ID’s we use a pound sign instead of a period.

You’ll also need the URL to your background image. You can get that by clicking on any file in your WordPress media library. The URL to the image will be listed there.

I hope that gets you pointed in the right direction. If you have any questions, let me know.

Take care,
Bill

[glen hearnden]

Fantastic advice as always – thanks very much Bill.

[Bill Robbins]

Glad that helped out Glen 🙂

[Author]

Posts