Have you ever been wondering how to put a background image in a single text sidebar widget of your wordpress ?
.. or specific background color in a single wordpress sidebar widget?

Look no further, I will reveal to you how to do that. Here it is.

​

1. firstly, each sidebar widget has an unique ID. In my theme, the upper sidebar widget have ID number of 2 and is named #text-2, the next sidebar widget could have ID text-3 and so on.

How to check what is the ID of a specific sidebar text widget?
Easy, open one of your posts and look at the page code and look for each widget. To make it easier, go to your wordpress widget menu and type a text in each of your text widgets: fx. widget 1, widget 2 and so on.

.. Next look at the page code and find the text you just typed in and find the ID number for each of your text widgets.

OK, now you have your sidebar widgets ID

Let's say your upper sidebar widget has ID 2 (that's what I have on my blog), say you want to put a background image in this widget only.

Here is what you do:

1. Put this code in your style.css file (look in menu appearance and editor). Add the below code to your style.css file. If your theme has custom css file, then add the code there.

/* sidebar widget background image. no-repeat or choose repeat */
#text-2 {
background-image: url('http://www.YourSite.com/photo/image.jpg');
background-repeat: no-repeat;
}

2. if you want to make the image repeat exchange no-repeat with repeat

3. That's all there is to it

​

​

How to create a Sidebar widget
background color

1. Identify the ID of the sidebar widget you want to add a background color to.

2. then add this code to your style.css file (or custom css file if you have that)

/* sidebar widget background color */
#text-2 { background: #e579f2; }

3. That's all there is to it

NOTE: text inside /* .......  */ is a comment that is not shown, it's only for your own information.