How to put a background-image into right sidebar with 'categories'

Maciej
July 18, 2013 at 2:54 pm #7791

Howdy

Any help, how to change this (marked with red circle)

and instead of black (or whatever other colour) put there image ?
Anonymous
July 19, 2013 at 4:11 pm #39384
Add this to Custom CSS,
```
.sidebar h3 {

background: url("http://example.com/image.png");

}
```
Replace URL with correct path of your image.
Maciej
July 20, 2013 at 8:08 am #39385

Unlucky its not working 🙁

i have tried to resolve it by changing graphene’s style.css

Quote:

.sidebar h3 {

background: url(images/jelly.jpg)

left bottom repeat-x #3C9CD2;

background: -moz-linear-gradient(#3C9CD2, #1F6EB6);

background: -webkit-linear-gradient(#3C9CD2, #1F6EB6);

background: -o-linear-gradient(#3C9CD2, #1F6EB6);

-ms-filter: “progid:DXImageTransform.Microsoft.gradient(startColorStr=’#3C9CD2′, EndColorStr=’#1F6EB6′)”;

background: linear-gradient(#3C9CD2, #1F6EB6);

border-bottom: 1px solid #195392;

-moz-border-radius: 5px 5px 0 0;

-webkit-border-radius: 5px 5px 0 0;

border-radius: 5px 5px 0 0;

color: #fff;

*display: inline;

font: 18px/20px “Pontano Sans”, arial, sans-serif;

margin: -15px 0 5px -12px;

padding: 7px 12px;

text-shadow: 0 -1px 0 #333;

width: 100%;

zoom: 1;

}

but still no effect (that link looks like now cuz i’m workin on ‘localhost’ xampp, before i change it it was : background: url(images/bg-sidebar-h3.png) left bottom repeat-x #3C9CD2; )

so clearly i have changed just link to this image, and put ‘jelly.jpg’ into folder where bg-sidebar-h3.png was

Admin

Syahir Hakim
July 20, 2013 at 1:54 pm #39386

Don’t edit the theme’s files, even the style.css file. Instead, copy and paste the code Prasanna gave you either to the theme’s Custom CSS option or to your own child theme’s style.css file.

Maciej
July 21, 2013 at 8:19 am #39387

its not a solution

Of course im using child theme, but code which Prasanna gave me dont work. So i wanted to check if the original graphene code edit will handle it

but still no effect
Anonymous
July 21, 2013 at 11:18 am #39388
Try
```
.sidebar h3 {

background: url("http://example.com/image.png") !important;

}
```
Maciej
July 22, 2013 at 1:20 pm #39389

that works

thanks 🙂

Maciej
July 24, 2013 at 9:17 am #39390

Ok, one more thing

I have 2 categories, and all i want is to put different background for each of them. How to do it ?

now it looks like : http://www.soople.pl

The same bg for ‘newsy’ and ‘artykuly’. I want different bg for each of them 😉
Anonymous
July 24, 2013 at 12:25 pm #39391
Each widget (div) has an unique ID. For, artykuÅ‚y it’s text-8. So, you can change its h3 background like this,
```
#text-8 h3 {

background: url("http://example.com/image.png") !important;

}
```
Use firebug Firefox extension to find widget IDs. There are handful of tutorials about using firebug in the net.
Maciej
July 24, 2013 at 6:13 pm #39392

Cheers mate. Yep i’m currently using firebug 🙂