Hi,

I'm looking for a way to change the background color (the dark gray part) to a background image, is it possible? Can it be done in the CSS file, or a better method? My html/css knowledge is limited, anyone can point me to the right direction would be really appreciated.

Thanks.

Comments

jeremycaldwell’s picture

jeremycaldwell CreditAttribution: jeremycaldwell commented
Status: Active » Fixed

Sure you can change out the background color for another color or an image through CSS only. You'll need to create a local.css file in your theme's directory and add code similar to this.

html,
body {
  background: #fff;
}

That is how to load a different background color for the html element of the site. And here is how to load a background image for it.

html,
body {
  background: url(images/something.png) repeat-x;
}

Hope that helps!

ssace’s picture

ssace CreditAttribution: ssace commented

I tried this in my zen (sub theme) .css file. Background image doesn't show up.

I need some help on why this is. I tried different variations & cleared cache. Still doesn't show.

background: url(images/militaryback.pgn);
background-image: url(images/militaryback.pgn);

EDIT: Sorry, I just noticed I posted this in a different theme discussion. I would think the method would be the same though.

ssace’s picture

ssace CreditAttribution: ssace commented

Fixed. My problem was due to .pgn image format. Once I changed to .gif, it worked. Not sure why .pgn file does not show up.

bchezem’s picture

bchezem CreditAttribution: bchezem commented

could be as simple as a typo.... try something.png. something.pgn is not a valid image format.

Status: Fixed » Closed (fixed)

Automatically closed -- issue fixed for 2 weeks with no activity.

billy_comic’s picture

billy_comic CreditAttribution: billy_comic commented

I am having a problem inserting a background image. do I have to ad the html, above it or can it just be the {css}? It just goes white when I put it in.

my code.

body
{
margin: 0px;
font-family: helvetica, arial, sans-serif;
font-size: small;
background: url(./images/back.png);
}
can you help me?

nevets’s picture

nevets CreditAttribution: nevets commented

If you use firefox you can use the net tab to see if the image loaded and if not the path it is trying to use.