Dreevoo.com | Online Learning and Knowledge Sharing
 
Home | Programs | Programming languages | HTML | Responsive full screen background using only CSS
Guest
Click to view your profile
Topics
Programs
Languages
Recipes
Home
Shortcuts
 
 

Responsive full screen background using only CSS

Responsive full screen backgrounds have been lately trending all over the web. Let's learn how to create one without any scripts using pure CSS only.

 
  Author: mat | Version: | 13th August 2013 |  
 
 
1.
 

Using your favorite web code editor such as Notepad++ or Adobe Dreamweaver, create a new styles.css document and enter/paste the following code:

html {
min-height: 100%;
background-size: cover;
background-image: url(background.jpg);
background-repeat: no-repeat;
background-position: right bottom;
}

body{
min-height:100%;
}

Where background.jpg is an image of the background you want to use. I suggest you to use the image with a size of 1650x1050 so people with big screen resolutions will be able to enjoy the high quality background image.

Also recommended if you are a css beginner:

 
 
2.
 

In the index.html document enter the following code before the </head> tag:

<link rel="stylesheet" href="styles.css" />

Make sure you save the index.html, styles.css and your background image in the same folder on your web server, otherwise you will need to change paths in the code.

Also recommended:

 
 
3.
 

And this is how my responsive full screen background looks like with some text added.

Click to see or download my responsive full screen background web page and you can also download the styles.css file from this tuts.

 
 
 
   
  Please login to post a comment
   
 
 
online learning made for people
Dreevoo.com | CONTRIBUTE | FORUM | INFO