Add a Background Image with CSS
Intro
Images can really make your site stand out and give it personality. The background of your site can really set the tone for the look and feel of your entire site. I am going to show you how to add a background image to your site, and things to consider when adding a background image to your site.
The HTML
First, we need to set up our html. In the example, I have set up a simple container div, with a header, content area, and footer. I only set the height to 400px with CSS for demonstration purposes. I made them different colors so you would see how they interact with each other.
<!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>Untitled Document</title>
<link href="border.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="container">
<div id="header"></div>
<div id="content"></div>
<div id="footer"></div>
</div>
</body>
</html>I am going to display all of the CSS and explain what each piece does to control the background image:
The CSS
@charset "UTF-8";
/* CSS Document */
body {
background: #693 url(green.jpg) no-repeat center top;
}
#container {
background: #fff;
box-shadow: 0px 0px 2px 2px rgba(40, 200, 40, .8);
-webkit-box-shadow: 0px 0px 2px 2px rgba(40, 200, 40, .8);
-moz-box-shadow: 0px 0px 2px 2px rgba(40, 200, 40, .8);
margin:auto;
width:960px;
height:auto;
}
#header {
height:125px;
background:#000;
border-bottom: 2px dotted #693;
}
#footer {
height:75px;
background:#000;
border-top: 2px dotted #693;
}
#content {
height:450px;
}The Result:
The body of your site is always present, and your content goes in that section. This is where you style your background image and background colors. You do not place the # in front of the body, because it is not a div. To style your background, you select a base color, which I chose to be #693. It is a greenish color. Then, you will need to pull in your image. You should have your image within a directory of your website. You will have to list that directory, divided by "/" each time, until you reach the image you want, and call it by name.
Alignment
No-repeat tells the image not to repeat at all. This makes sure that the image only appears once in the background, otherwise it will tile itself infinitely vertically and horizontally. If you specify repeat-x, it will repeat horizontally, and if you specify repeat-y, it will repeat vertically. Then, you specify where you want the background image positioned. The first value should be left, center, or right for horizontal placement. The second value should be top, middle, or bottom for vertical placement.
If you notice under the container div, the background is specified as white. If you don't specify a background color, the browser won't display one and the background image will show through. The same goes for the header and footer divs as well.
Helpful Tips
There are a couple of things to remember when using background images. The first one is that your background image needs to be large enough to go from edge to edge in the browser. If not, then your background color or white(the default) will show. Also, there is not a way to have your image scale proportionally with the browser size with html or CSS. You will need to use jQuery for that. The last tip is that you can use the repeat property when adding background images to tile patterns for seamless backgrounds. You can use a thin gradient and have it repeat seamlessly across your site. Knowing your limitations will help you to keep your site looking top-notch.
Recommended Reading
Tutorials
Templates
1 Comments
0 Comments
0 Comments
Comments
SAIUN
ccs
June 2, 2012
haon
สวยน่าใช้
July 17, 2012
aon
live
July 17, 2012
aon_cs52211@hot...
0874354343
July 17, 2012
Leave a Comment
Before you comment please keep in mind that comments are moderated and rel="nofollow" is in use. So, please do not use a spammy keyword or a domain as your name, or it will be deleted.