In the past background images used in center of page or repeat but full screen or responsive was not possible at that time. But now this is possible to use full screen background picture in the websites with responsive feature. Most of people would achieve this effect by implementation of jQuery and with some other third party plugins. But I will explain this effect in this responsive css tutorial. Let's learn how to create one without any scripts using pure CSS only. You can use any code editor for this such as Adobe Dreamweaver, Notepad++ etc.
Step1:
create a new styles.css document and enter/paste the following code:
[code type=codetype]
html {
min-height: 100%;
background-size: cover;
background-image: url(fs-res-background.jpg);
background-repeat: no-repeat;
background-position: right bottom;
}
body{
min-height:100%;
}
[/code]
Use your own picture name with path instead of "fs-res-backround.jpg" picture. I will suggest you to use high resolution image in background like 1650 x 1050. Visitors will be able to enjoy on big screen resolution with the high quality background image.
Now create index.html file and paste or enter the following code before the </head> tag.
Step2:
[code type=codetype]
<link rel="stylesheet" href="styles.css" />
[/code]
Make sure you save your all files index.html, styles.css and your background image in the same folder on your web server, if not then you will need to use paths in the code.
Your html code should be like this
[code type=codetype]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Full Screen Responsive Background CSS Tutorial | TutorialsPalace.om</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<h1>Full Screen Responsive Background CSS Tutorial</h1>
</body>
</html>
[/code]
In the <body> tag you can write your other HTML for sample testing. And this is how my responsive full screen background looks like with some text added. Click to see the DEMO of responsive full screen background web page and you can also download the styles.CSS file from this tutorial. If you have any questions simply let me now it works for you, drop me a comment.
No comments:
Post a Comment