Full Page Background Image Through CSS3 {Snippet}

Full Page Background Image Through CSS3 is a thing I have been acquired a lot of times for. People want to put some image in the background of their sites, and want it to become perfectly fit at the back of everything. The easiest method to do it is one below.

html { background: url(images/bg.jpg) no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover;  background-size: cover; }

Here the red part is the path to background image. You have to add above lines at the end of you css file. (In case of WordPress Goto Appearance>> Edit>> Stylesheet.css and put at the end of it the above code)


Works great in:

  • Chrome 9+
  • IE 9+
  • Safari 3+
  • Opera 10+ (Didn’t checked below that)
  • Firefox Mozilla 3.6+ (May also work in all above versions)

Any questions?

  • You are welcomed to ask any questions in relation to this snippet.
  • There is Js, Jquery method too. But if this is helpful why go for extra stuff.


By Freakify Editorial

The post was written by the Freakify Editorial Team. used to be managed by Awais, Maedah and their team before its acquisition.

14 replies on “Full Page Background Image Through CSS3 {Snippet}”

hey bro thanks very much i have a question and it goes like can i add this to already background themes i use genesis framework and also i have a background image please check it or better still explian more about how it works the advantage over my own background

If you will add it in the end of your style sheet, it will have most priority. So, it will show up not the old one.
It is like, if you want to show clouds in the background and you start thinking how much big the background image should be, it resolves that issue.

Well, nice post Ahmad bhai! I searched the method of placing fix background through CSS, never got one few months back. I request to post an article to place some fix banner with CSS on sides of the website/blog. Good luck!

Yes, I was saying like some advertisement banner which is just fixed on any side of the blog’s layout, when page rolls down, banner remains there, just like chatting snippet in facebook, it remains fix on right side. I was saying, post the coding and tutorial on this topic.

Comments are closed.