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)
Support
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.
[ad1]
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
Very Nice today i requested for this on pakistani probloggers group thanx mate dude now let me try :)
I hope it works well at you side.
This is cool info from where you can show your different look in front of others to make your site/blog more attractive.
Thanks for liking it.
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.
Thanks for the CSS snippet. :) A great background image can sometimes add a lot of interest to a website’s design.
wow..its amazing i have used it it looks just awesome.!!!!1
i was looking for it from a long time..thanskjss
Welcome.
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!
Can you be more elaborate about your request?
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.
Will write on it.