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

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;
}
 

Phreaddee

Super Moderator
Staff member
that all looks fine, however possibly a missing or illformed doctype may be the issue...
 

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.
 

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.
 

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.

CSS
Code:
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?
 

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.
 
Top