SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Member
    Join Date
    Oct 2011
    Location
    Ohio, USA
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Problems with multiple backgrounds in CSS2 / tried many things

    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.

  2. #2
    SitePoint Enthusiast
    Join Date
    Feb 2012
    Location
    Sacramento, CA, USA
    Posts
    53
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  3. #3
    SitePoint Member
    Join Date
    Oct 2011
    Location
    Ohio, USA
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,496
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    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.

    1) Incorrect path to image or typos
    2) Conflicts in the css where you may have over-ridden the background image by using the shorthand background:#fff which will remove the image.
    3) Applying the image to an element that has no content and thus has no height or width.
    4) Applying an image to a parent that contains only floats that haven't been contained.

    Or something else I haven't thought of

  5. #5
    SitePoint Member
    Join Date
    Oct 2011
    Location
    Ohio, USA
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •