CODEWITHSUNDEEP
css
justanotherhobbyist
justanotherhobbyist

Reputation: 2192

Fixed background with CSS?

I would like to fix my background to 100% height of body and leave it there even when rest of the page scrolls.

How do I achieve this? Right now all I have is background:url(bg.png);. The height of the image is 1200px and width 20px, if that matters.

Upvotes: 1

Views: 316

Answers (3)

JGood
JGood

Reputation: 522

Some browsers still have trouble supporting the stretching of background images so here's a workaround.

CSS3 Example and Support

Since it's already 1200px, you can use background-attachment:fixed; on the background to make it follow when they scroll. Example at w3schools. You can make the image look like it is meant to flow into a solid color at the bottom with a nice gradient, etc.

Upvotes: 0

Ryan
Ryan

Reputation: 3171

in css, use this:

background-attachment: fixed;

Upvotes: 4

ckaufman
ckaufman

Reputation: 1497

Depending on what you want the background image to do there are a couple of options. There is a great article on ALA about full screen BG images that accounts for scaling:

http://www.alistapart.com/articles/supersize-that-background-please/

If you are just looking to position the image in the browser you would do:

background:url(bg.png) no-repeat top left;
background-attachment:fixed;

Or however you want to position it respectively (top right, etc.)

Upvotes: 3

Related Questions