By dojorob76 on

I am trying to add a background image to my custom Omega Subtheme CSS, and simply can not get it to work.
#zone-content {
background: url(../images/house960.png) center top;
}

Works for colors just fine, (i.e., #zone-content {
background-color: #ccc;
}
but no matter what path I use (or what folders I point to - I have the image stored in the subtheme's images folder and in default/files and neither works), or whether I use "background-image" or just "background" (as above), or whether I use (' ')'s or not, nothing works.
Since I am basically a newbie, I assume that I just missing some kind of very basic step or element, but I am at a complete loss. Please Help!
Thank you in advance.

⋅ Categories: Drupal 7.x

Comments

robbdavis’s picture

robbdavis commented

I seem to be having the same problem adding a background image to the body in my omega sub theme. As above, I can get the background-color to change but the background image css is being over-ridden somewhere.

mlheisterman’s picture

mlheisterman commented

Just to run down some basics that could be the culprit:
First, make sure that you are placing the style in global.css.
Second, try adding a style to the zone in the UI like "bg-image" and then styling that in your global.css stylesheet.
Third, a region could not be transparent and could be hiding your image.
Fourth, make sure that the zone has a region that has something in it.
Fifth, you can also add the clearfix style to the zone to make sure that the zone is expanding to below the regions...the regions are floated which can make the zone not have height...which makes the bg not show.

Hope any of those help. If it does not, post a SS of the zone settings. One more thing, best practices are to style .zone-content instead of #zone-content...and that could be another potential problem.

notslad’s picture

notslad commented

UPDATE: This has been resolved. I had some nested comments immediately above my "body { ... }" stanza that broke the syntax.

I'm having the same problem with the element.. I ran through most of the basics mlheisterman mentioned..

1) modify global.css: yes
2) try adding style to a #zone: yes - and it worked
3) overlapping region not transparent: not sure how to test this
4) the zone/region must have content: the element has content
5) add clearfix style to the zone: I'm not sure, but I don't think this applies to the element

katy5289’s picture

katy5289 commented

Hello,

I also had trouble adding background images in global.css in my omege subtheme.

The path to my css file:
sites/all/themes/mytheme/css/global.css

My images folder is here: sites/all/themes/mytheme/css/img

and the path to the img folder in global.css is:

.region-branding { background: url("img/header-bg.jpg") no-repeat 0 0 transparent; }

I hope this helps.

Katy
www.seascapeweb.ca