Learn how to create a HTML background using color, or images. With HTML and CSS.
In previous articles, we talked about proper page sizing as well as divisions. Using these two concepts, we are going to start creating an entire professional page layout. The first part of this will be setting our background and creating the page container that our page will sit in. This is where the magic starts to happen folks.
The Setup
We will have a index.html file in our root directory with a subdirectory called images, that will hold all our images. There will also be a master css stylesheet named site.css
Setting the background
There are several different ways to fill in a background, from a simple color, to techniques like gradients, patterns, and repeated images. I will be using a repeated image to fill in the background, and create a nice effect. We can accomplish this entirely through our css file.
The CSS
Background Pattern
body
{
background-image:url(‘images/bg.jpg’);
}
The HTML
<html>
<head>
<title>Professional Layout</title>
<Link Rel=Stylesheet HREF=”site.css” Type=”text/css”>
</head>
<body>
</body>
</html>
Now if you open your website you will see the image is automatically repeated to fill the entire screen. The advantage of this is when someone loads your website they only have to load one very small image and repeat it instead of loading a huge image that takes some time.
Creating the Page Container
Now we will create what we call a wrapper using a div. This wrapper will set the page width and then the rest of the website will sit within this wrapper. Doing this we can size inner elements as a percentage of this page container. Therefore if we had a banner we could set its size to 100% and it would take up our entire page. This allows for us to not have to worry about pixel sizings.
The Updated CSSbody { background-image:url(‘images/bg.jpg’); } #pagecontainer { width: 960px; height: auto; background: #FFFFFF; margin-left: auto; margin-right: auto; border-style: solid; border-width: 2px; } The Updated HTML<html> <head> <title>Professional Layout</title> <Link Rel=Stylesheet HREF=”site.css” Type=”text/css”> </head> <body> <div id=”pagecontainer”> <p> Some filler text here, so that we are able to see how our wrapper height extends to the height of our content. </p> </div> </body> </html> |
As you can see we’ve declared a new div called pagecontainer andset the width to our desired page size. With the height set to autothe height will automatically increase, as we add content within the
page. The background has been set to white with a 2px black border The border helps outline the page. All we add in the HTML is our division. I’ve also included some filler text, because the wrapper will be invisible until some content is added to it. This is because the wrappers height is set to auto and extends to match its content.
|
This starts us with a good base to build a website on. We have our background and the wrapper that we will fill in with content to construct our website.
[...] Setting up the page and background [...]