What could cause conflicts with two background images in CSS2? I’m working on IE7 and IE8 stylesheets for a client site. We have two images: a white background that changes size with the content and an overlapping translucent image that also changes with the page, through PHP. I’ve tried adding a second element and styling that, psuedo elements, and filters. I can’t even get one background to show. I’m wondering what problems can typically arise. The site was created with WordPress 3.1.3.
If you could post up a URL to your site, that would help troubleshoot your problem.
Generally, you should simplify and make sure you can get the background image to show on one element before trying to add it to another. If it doesn’t work with one, it probably won’t work with two. I would suspect a problem with the paths you are using to point to the images; is the background image available if you navigate directly to it? Secondly, make sure your CSS selectors are working. Try adding a background color or border to the CSS to make sure you are selecting the element properly.
Once you can get one background to show it should be trivial to get the second one to appear.
I’m looking into your suggestions. I’m sure they’re all things I’ve looked at, but I’ve tried so many things, I may have done these things in a different order, or with different syntax. I could get just the white background to display before, but changed something and now I can’t even get that. And I can’t figure out what I changed that caused it. This is my first foray into building supplemental IE stylesheets and had no idea what I was getting myself into. I’ll check the image paths and try to affect change another way with the selectors and report back. Thanks for the ideas.
It’s not really clear what you are attempting and as mentioned above we’d need a url or at least some code.
If you are trying to place 2 background on a single element then that won’t work in IE7/8 as that is css3 and only supported in the most modern browsers.
There are many reasons why an image may not show.
- Incorrect path to image or typos
- Conflicts in the css where you may have over-ridden the background image by using the shorthand background:#fff which will remove the image.
- Applying the image to an element that has no content and thus has no height or width.
- Applying an image to a parent that contains only floats that haven’t been contained.
Or something else I haven’t thought of 
Thanks for all your suggestions. Some I hadn’t thought of; going to make a list of them for future reference. It turns out there were a lot of changes made to the php files associated with the CSS and I hadn’t been informed. Yea, that could cause some problems. ID names and such were all wrong. And the initial stylesheet was written for CSS3 more than I was aware of. I’m only slightly familiar with CSS3 selectors. One of our senior programmers rewrote the main sheet and now IE7 and IE8 look fine. Thanks again. Lessons learned.