Home PHP JavaScript CSS WordPress APIs .htaccess Other How-To Useful Scripts What I Recommend
Posted on by Aleksandar Gichevski ()
In my experience I have seen many people that have difficulties to add their desired background on full screen on their website. Some of them create part of background add it at top and then blend it below to another color so it gets the effect of having background but as you scroll background is disappearing. I will show you below how with CSS3 you can put a background on full screen on your website and even you scroll down the background will remain the same.

Finding Background

For your website you need prepared background that you want to place it. For our ‘demo’ here because I love summer I found beach wallpaper and uploaded to my server.

img1

Creating CCS code

Thanks to new CSS3 background-size property now we are able to set it purely with CSS code. We make the image centered and in fixed position and then just with background-size property we adjust the size to cover every angle.

The created CSS code we need to add into HTML document so we create also one simple HTML file with following code.





Full Screen Background Image with CSS
We add the CSS code into our HTML code and the full code example looks like this:


html{ 
  background: url(http://agichevski.com/wp-content/uploads/2013/03/img12.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}



Full Screen Background Image with CSS

img2

This CSS3 cover works in following browsers: - Chrome Whatever+ - Firefox 3.6+ - Internet Explorer 9+ - Safari 3+ - Opera 10+

Other Posts You Might Like

Get a fast, free website audit


Enter your URL below to get full in-depth SEO report and tips.

Useful Scripts

Most Popular Posts

Recent Posts

June 14th, 2014
Website Optimization Using Gzip Compression

June 10th, 2014
Google Search AutoComplete API

May 14th, 2014
What is a Tag Cloud and How to Calculate it by Formula

March 27th, 2014
Error writing file /tmp (errcode 28) Solved!

February 15th, 2014
Fixed CSS & HTML Navigation Bar

February 9th, 2014
Benchmark Your Server (CPU, File IO, MySQL) with SysBench

February 8th, 2014
JavaScript Array Basics

January 29th, 2014
JVZoo IPN API in PHP

January 25th, 2014
Payoneer Debit Card for Freelancers to receive money online

January 24th, 2014
How HTML Color Codes are generated?

Read Latest Posts directly on Facebook

Archive