1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

css background image not showing in IE

Discussion in 'CSS' started by rumblepup, Jul 28, 2006.

  1. antechindia

    antechindia Peon

    Messages:
    14
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #21
    when u gave there background url BACKGROUND: url(images/layout/main_bg.jpg)White repeat-x center top; this then no need color there so use only one thing there background image or color and gave proper path of image where it is stored.
     
    antechindia, May 27, 2011 IP
  2. Izaias Scaramal

    Izaias Scaramal Peon

    Messages:
    1
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #22
    You helped me so much,
    My name is Cleyson. My nickname in forum Izaias Scaramal.
    I'm studing development in every language for web..
    Also i am studing English... I'm from Brazil..
     
    Izaias Scaramal, May 30, 2011 IP
  3. hingoro

    hingoro Peon

    Messages:
    1
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #23
    .excur-bg{
    background:url(../images/excur-box.png) no-repeat center top;
    width:304px;
    height:259px;
    padding:0 3px 10px 3px;
    display:inline-block;
    }
     
    hingoro, Nov 28, 2011 IP
  4. oavs

    oavs Peon

    Messages:
    2
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #24
    IE is soooo pathetic.

    After reading all the posts and tried every one of the solutions (which some reason differ for IE) none of them worked for me.

    In Chrome it works fine but in IE I can not see any background images at all.

    See site here in both Chrome and IE9 url isn't allowed sorrry

    here is the bg image Css.Footer bg image (did not make any diffrence in the sequence of writing)
    {width: 940px; height: 125px; bottom: 0px; right: 0px; top: 0px; left: 0px; padding: 0px; margin: 0px; background-repeat: no-repeat; background-image: url(http://blueribbon.com.au/ljrws/wp-content/uploads/2012/02/LJR_footer.jpg);}

    left h. column bg image
    {background-image:url('bottom: 0px; right: 0px; top: 0px; left: 0px; padding: 0px; margin: 0px; background-repeat: no-repeat; background-image: url(http://blueribbon.com.au/ljrws/wp-content/uploads/2012/02/LJR_02.jpg);}

    I'll be delighted to hear your theories.
     
    oavs, Feb 20, 2012 IP
  5. wiicker95

    wiicker95 Well-Known Member

    Messages:
    438
    Likes Received:
    37
    Best Answers:
    10
    Trophy Points:
    100
    #25
    IE is as pathetic as your CSS code....

    " bottom: 0px; right: 0px; top: 0px; left: 0px; " ------ FAIL

    Put this instead :

    background: url(http://blueribbon.com.au/ljrws/wp-content/uploads/2012/02/LJR_footer.jpg) no-repeat;
    width: 940px;
    height: 125px;
    position: relative; /*or absolute, dunno what you need*/
    top: /*value*/;
    left: /*value*/;

    And make a new thread next time!!!
     
    wiicker95, Feb 21, 2012 IP
  6. oavs

    oavs Peon

    Messages:
    2
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #26
    Sorry still not showing
     
    oavs, Feb 21, 2012 IP
  7. kcherrix

    kcherrix Greenhorn

    Messages:
    9
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    21
    #27
    I have the following code in my style.css:

    body {
    font: 100% Verdana, Arial, Helvetica, sans-serif;
    background: url(../images/bg_image.png) fixed top left no-repeat,
    url(../images/tiled_bg_stars.png) repeat;
    margin: 0;
    padding: 0;
    text-align: center;
    color: #000000;
    }


    However, the backgrounds are not showing up at all in any version of IE. You can see the effect here: www.nasa.gov/wallops/. I am editing a sub page and the backgrounds work in FF and Chrome, but not IE. I have tried .jpg's and .gif's. What am I missing?
     
    kcherrix, Mar 21, 2013 IP
  8. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #28
    Interesting to bump when I suspect your problem is different -- are you SURE your paths are correct and they are in fact one directory up from where the CSS is? This is part of why I consider 'up-tree' linking (../) to mean there's usually something horiffically wrong with how the sites directory structure is laid out...

    But given the train wreck of inaccessible garbage (and therein violating the ADA rules for a gov't website) NASA's website has been this is hardly a shocker. The typical laundry list of inaccessible fixed width, inaccessible fixed metric (px) fonts, complete gibberish inaccessible markup, and code that has it's head wedged so far up 1997's backside it would take an orthodontist to pull it out.

    Take the page you linked to... Browser Sniffing? FOR WHAT?!? HTML 3.2 masquerading behind 4 tranny? Tables for layout, paragraphs around non-paragraph elements, endless scripting for nothing, complete gibberish use of numbered heading tags, tags like FONT and CENTER as well as attributes like TARGET and BORDER that all have ZERO business being used on ANY website written after 1997 -- and that's before talking about the presence of multiple DOCTYPE, HEAD and BODY (there should be only one of each) usually an indication of failing to grasp how include works, or just too many cooks ruining the stew.

    Good luck with that. Sad when a site like NASA is such a disaster it's time to throw the ENTIRE pile of idiotic half assed garbage in the trash, and start over from scratch.

    Though admittedly, given their funding under Odumba, this is hardly a shocker -- still, nice to see another ILLEGAL .gov
     
    deathshadow, Mar 21, 2013 IP
  9. kcherrix

    kcherrix Greenhorn

    Messages:
    9
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    21
    #29
    Aside from the fact the the main NASA sites, including the center site I provided the link to, are built within a portal (or container) designed by a contractor, I still have an IE issue. In other words, the portal provides the layout and the site curators just plug in the specific data without any real coding. This is supposed to provide continuity across hundred of organizational sites within NASA, such as mine. NASA DOES have standard guidelines and layouts for those that choose not to use the portal, such as myself.

    All the sub-sites, like mine, are hand coded. I am not relying on the portal since we are in the midst of a new contractor and therefore a new layout (and hopefully new LEGAL rules) for our sites in the future.

    With that said, anything about the "backside" of the NASA site code for the link I provided is irrelevant. I was just showing the end result. So, with my above code being written by me, what am I missing to fix the missing background in IE?

    My site structure is:
    root: /html/
    /scripts/
    /images/
    /docs/
    etc......
     
    kcherrix, Mar 21, 2013 IP
  10. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #30
    Try "/images" instead of "../images" -- if the images are indeed off the root that way, it should link to it.

    Really though images that are called from the CSS should be in a subdirectory of where that CSS is located, so you are pointing down-tree instead of up-tree... in which case that would be "images/" instead of "../images/"

    Though is the problem JUST IE specific? If so you've got something else going on there -- but with that train wreck of broken code, god only knows what it might be. It might be a haslayout issue (try throwing zoom:1; at it), it might be a badly encoded image, it might be an image format IE mangles (like alpha png), it might be there's some silly script trying to FIX alpha.png messing things up.

    Could also be you're using IE8/earlier, since this:
    background: url(../images/bg_image.png) fixed top left no-repeat,
    url(../images/tiled_bg_stars.png) repeat;

    is multiple backgrounds, and IE8/earlier don't support that. (and to be frank IE9 makes a right mess of it).

    Generally I don't even try to use multiple backgrounds since they're a train wreck in the best of times, and usually end up being alpha transparent png which IMHO have no business being used on websites in the first place. (due not just to support, but render time and file sizes)

    Part of why saying "IE" isn't really helpful, as the question then becomes "Which IE?" -- if you are testing IE8 or lower, "Well there's your problem" - it can't do that.

    ... and multiple backgrounds as condensed properties with different positioning? Good luck with that in any browser.
     
    deathshadow, Mar 21, 2013 IP
  11. kcherrix

    kcherrix Greenhorn

    Messages:
    9
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    21
    #31
    So you are saying my little bit of code is a train wreck? Because, as I said, my code looks nothing like the code on the page I gave link to.
    It works fine in FF and fine in chrome. It also works in all browsers on the dozens of NASA portal sites. The only issue is with IE8 and below. Since I can't see what scripts are created by the portal, I can't see how the portal coded other NASA sites to do this.
    If the code is so bad, what do I need to do to the code the fix it?
     
    kcherrix, Mar 21, 2013 IP
  12. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #32
    So it is that then -- you are trying to use multiple background images. Multiple background images are CSS3... IE8 doesn't know what CSS3 is.

    You either need to add another container to add that second background to, or you need to not be using multiple background images. This:
    background: url(../images/bg_image.png) fixed top left no-repeat,
     url(../images/tiled_bg_stars.png) repeat;
    Code (markup):
    Will not work in IE8 or lower -- EVER. As a rule of thumb multiple background images on ONE element is a horrifically bad idea ANYWAYS given the performance issues ALONE. (though not seeing the ACTUAL page you're working on, making the link you did post a bit of a whiskey tango foxtrot did that have to do with anything then...) You MIGHT be able to fake it for IE7 and 8 using generated content to 'create' a second element from the CSS, but that could be somewhat fragile, and without seeing the code/page you are ACTUALLY working on (as opposed to some useless snippet and what you are now saying is a completely unrelated link) that's guessing wildly.

    Since if nothing else, CSS without the markup it's applied to is meaningless.
     
    deathshadow, Mar 21, 2013 IP
  13. kcherrix

    kcherrix Greenhorn

    Messages:
    9
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    21
    #33
    I only pointed to the NASA link to give and idea of what I'm trying to do. I am using the exact same two images from that link. They got it to work in IE, I cannot get it to work. Lets see if this site, which was hand coded and not built int the portal works any better for you. Again, it's the exact same 2 images and it also works in ie. sites.wff.nasa.gov/code840/
     
    kcherrix, Mar 21, 2013 IP
  14. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #34
    Do you mean on body? Because they're only calling one:
    http://sites.wff.nasa.gov/code840/images/tiled_bg_stars.jpg

    Not multiples. I do not see that other image used anywhere on that page here... even in FF/Opera/Chrome.

    -- edit --

    body  {
    	font: 100% Verdana, Arial, Helvetica, sans-serif;
    	background: url(images/tiled_bg_stars.jpg) no-repeat fixed;
    	margin: 0; 
    	padding: 0;
    	text-align: center; 
    	color: #000000;
    }
    Code (markup):
    That's all they're declaring there. That other file doesn't even seem to EXIST. Page only seems to have one stylesheet -- pretty clear what's going on.
    http://sites.wff.nasa.gov/code840/code840.css

    Even if it is painful to see CSS3 being thrown at 1997 style HTML 3.2
     
    deathshadow, Mar 21, 2013 IP
  15. kcherrix

    kcherrix Greenhorn

    Messages:
    9
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    21
    #35
    They must be calling is someplace else because there is a blue starfield cloud over the bg_stars image. Thank you for your help anyway.
     
    kcherrix, Mar 22, 2013 IP
  16. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #36
    Upper left corner, it is a massively useless 2300x2000 (type of image that has no business being part of a theme/template on a website), and it's not like it's being aligned center.
     
    deathshadow, Mar 22, 2013 IP
  17. kcherrix

    kcherrix Greenhorn

    Messages:
    9
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    21
    #37
    That is the second image, the blue startfield gas cloud. It's layed over a repeating starfiled. I am useing IE7 not 8. I think I can fix it by creatng a script that runs if IE and only passes the tiled starfield.
     
    kcherrix, Mar 25, 2013 IP
  18. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #38
    It's not layered over anything here -- not that it needs to be since it's freaking 2300x2000 with no alpha transparency. The stars are built into it... unless we're looking at two different images!
     
    deathshadow, Mar 25, 2013 IP