Background Image will not display in Internet Explorer, works in Firefox

Discussion in 'CSS' started by Paybacks, Jan 17, 2010.

0
  1. #1
    Hello,

    I am having issues getting my website background image (header) to display in Internet Explorer. The image appears perfectly fine in Mozilla Firefox and I am unsure what the problem is.

    Website URL:
    http://www.wow-origins.com

    I am referring to the top of the page where the face can be seen in Firefox but not IE.

    Any help would be appreciated
     

    Attached Files:

    Paybacks, Jan 17, 2010 IP
  2. s_ruben

    s_ruben Active Member

    Messages:
    735
    Likes Received:
    26
    Best Answers:
    1
    Trophy Points:
    78
    #2
    Replace in style.css

    
#backgroundImg {
width: 1460px;
background: url(http://www.wow-origins.com/assets/images/face.jpg)top left no-repeat;
margin: 0 auto;}
    Code (markup):
    to

    
#backgroundImg {
width: 1460px;
background: url(http://www.wow-origins.com/assets/images/face.jpg) top left no-repeat;
margin: 0 auto;}
    Code (markup):
    Or just add a space between "url(http://www.wow-origins.com/assets/images/face.jpg)" and "top"!!!
     
    s_ruben, Jan 18, 2010 IP
  3. Paybacks

    Paybacks Peon

    Messages:
    2
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #3
    Worked perfectly, thank you!
     
    Paybacks, Jan 18, 2010 IP
  4. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,999
    Best Answers:
    253
    Trophy Points:
    515
    #4
    Hmm. Is it just me, or have we seen that mistake a lot this past week or two?
     
    deathshadow, Jan 18, 2010 IP
  5. pfoglesong

    pfoglesong Peon

    Messages:
    2
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #5
    I already had the space included between the close parenthesis and the "top" and the background displays properly in FF but not in IE. From my CSS:

    background: #3E4095 url("../../images/background_pixel.gif") top repeat-x;

    The background_pixel.gif if a fade effect which is why I also have a background color, so that if someone scrolls further than the length of the background pixel, then the background is already the same color that the graphic ends in.

    Any suggestions?
     
    pfoglesong, Nov 8, 2010 IP
  6. pfoglesong

    pfoglesong Peon

    Messages:
    2
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #6
    Never mind... I figured it out. In my case I had to change the !DOCTYPE declaration to:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html xmlns:eek:g="http://opengraphprotocol.org/schema/">

    Once the declaration was changed from *ahem* HTML 1 to 4 everything worked fine.
     
    pfoglesong, Nov 8, 2010 IP
  7. radiant_luv

    radiant_luv Peon

    Messages:
    1,327
    Likes Received:
    34
    Best Answers:
    1
    Trophy Points:
    0
    #7
    In another forum I always see, members are requested to check on doctype (if used or not or correct) before they post any IE related issues. A sticky note may be.
     
    radiant_luv, Nov 8, 2010 IP