"No-repeat" makes my image disappear. :(

Discussion in 'Web Design' started by Rubella, Nov 5, 2011.

to remove all ads.
  1. Rubella

    Rubella New Member

    Hey, guys.

    I'm trying to have a background image, but it disappears if I put it to "no-repeat".

    I can't show you because I have nowhere to upload it for free. :(

    Here's my code though:

    .container {
    width: 960px;
    margin: 0 auto;
    background-image: url(web/images/body-img.gif);
    background-color: #FFF;
    background-position: top;
    background-repeat: no-repeat;
  2. Phreaddee

    Phreaddee Super Moderator Staff Member

    that all looks fine, however possibly a missing or illformed doctype may be the issue...
  3. Rubella

    Rubella New Member

    Well, it shows fine when I allow it to repeat (but that's not the effect I want because I'm putting text over it). It's only when I mess with the X repeat, Y repeat, or make it no-repeat that it disappears! It's very odd.
  4. ronaldroe

    ronaldroe Super Moderator Staff Member

    You're going to have to find a free server to post it on so we can help you troubleshoot. I've seen some people just post everything on Dropbox and it seems to work.
  5. DHDdirect

    DHDdirect New Member

    You can also try Jsfiddle.net
  6. PixelPusher

    PixelPusher Super Moderator Staff Member

    Yeah please provide a url to the site in question. As for free image hosting, checkout Photobucket. I use them free image hosting. Takes about two mins to setup. Your css...could be shorter, cleaner.

    div.container {
    width: 960px;
    margin: 0 auto;
    background:#fff url(web/images/body-img.gif) left top no-repeat;
    In your background-position property you only specified the x value. The y value was left undefined. I think it defaults to left, but im not 100% sure. Anyway these values inform the browser were to begin repeating the image.

    What browser where you using when you witnessed this problem?
  7. n1c0_ds

    n1c0_ds New Member

    Take a look at the background-position. Perhaps the background is under another element or outside the page. I'd also look at the doctype.

Share This Page