How do you create a background that does not repeat?

[Stolenwords13]

Hi everyone, I'm redoing my blog layout that I didn't even finish yet. So I'm going to put my other coding topic on hold until I come up with a new design.

I was surfing around and came upon this site:

http://www.bartelme.at/

How do you make the background like they did? The top part doesn't repeat as you scroll down the page.

Thanks :)

[rmedek]

body {background: url(picture.gif) no-repeat top left;

[Stolenwords13]

I put this together fast to see if I can get it to work.

http://talesforums.com/test/Untitled-1.htm

http://talesforums.com/test/css.css

http://talesforums.com/test/Untitled-3.jpg

I can't get it to work for some reason. Any ideas what is wrong?

[Graft-Creative]

yep, you need to have it to set to repeat horizontally, but not vertically, thus:


/* CSS Document */
body
{
background-image: http://talesforums.com/test/Untitled-3.jpg;
background-repeat: x;
background-position: top left;
}


x = horizontal

Gary

[Stolenwords13]

Hmm..I changed it to an "x" like you said, but I still can't see the image for some reason.

http://talesforums.com/test/Untitled-1.htm

[Badman3k]

Yeah it's meant to be:

background-repeat: repeat-x;

that will make it repeat horizontally, but not vertically :thumbsup:

[rmedek]

CSS:

body {
background-image: url(whatever.jpg);
background-repeat: repeat-x;
background-position: top left;
}

or:

body {
background: url(whatever.jpg) repeat-x top left;
}

http://www.w3schools.com/css/css_reference.asp#background

[Stolenwords13]

It works now, thanks guys :)