How to Make a Fixed Background Image Using CSS

Posted by
November 6, 2008

This is just a simple bit of CSS but I thought I would probably need it again in the future. Adding a fixed background image to a website is something I do very rarely but every now and then there is cause for it. The code I have shown below demonstrates how to add a fixed background image to the body tag of a website using CSS but you can also use the same strategy to add a fixed background image to a DIV or other element using CSS.

Check it out:

<style type="text/css">
    body {
        background-image: url(image.jpg);
        background-repeat: no-repeat;
        background-position: top left;
        background-attachment: fixed;
     }
</style>

No related posts.

CSS, Uncategorized, Web Development, , , ,

If you enjoyed this post, please consider to leave a comment or subscribe to the feed and get future articles delivered to your feed reader.

Comments
Comment by createweb on December 4, 2009 @ 8:37 am

Thanks Man for this its what I need for my site

Comment by Ryan Stemkoski on December 4, 2009 @ 8:41 am

@createweb Glad to hear it was helpful.

Comment by kennedy on April 13, 2010 @ 12:41 am

Thanks man that was helpfull

Comment by prince on January 5, 2011 @ 2:28 am

thanks really helpfull—–good!

Comment by shannon on January 10, 2011 @ 11:32 pm

Thank you!!! :)

Comment by gamesms on January 29, 2011 @ 1:30 am

Thank you :) very useful!

Comment by Dan L on April 23, 2011 @ 10:05 am

Really helpful – Thanks a lot.

Comment by jason d on August 9, 2011 @ 3:03 pm

good chat, really helped ta

Comment by toby g on August 9, 2011 @ 3:11 pm

hey im really cool and ride motorbikes hehe

Comment by michael on January 5, 2012 @ 3:17 pm

thanks this was helpful.

Leave a comment

(required)

(required)