Tela-Web

Extendable backgrounds using CSS

February 21st, 2007 Ray

Level : Beginner

When designing your web pages you might like to use backgrounds like the one illustrated below that extends till the end of the contents in the page. To achieve such an objective is very simple as you will come to learn soon enough.

You might want to create an image like the one above to use as your background.

For now you may save this image instead.

Here are the steps to follow when using dreamweaver to create your site.

Click on New Site under the option Site on the menubar.

Choose a name for the site and a folder to work in.

Take a new html page and also a new CSS page.

Name them demo.htm and style.css respectively.

To create the above background we must slice the image along the dotted lines shown below

I have used ImageReady to slice the image

When slicing ensure that the gradients at the end of the side lines are included in top.jpg and bottom.jpg.

Save these 2 slice as top.jpg and bottom.jpg.

For the mid section take a slice which is not more than 2 pixels high and name it mid.jpg. This piece will be repeated to make ur background extendable

Now you have the images required to make your extendable background

You can now work on the pages in dreamweaver.

But first you need to link the html page with the css.

Open demo.htm

Click on the button with an image of chain links under Properties on the bottom right, under CSS Styles as shown.

In the pop-up select the stylesheet you had earlier saved, named style.CSS as shown.

Click OK.

Now you have successfully linked your HTML and CSS documents.

When creating backgrounds which are composed of two or more seperate backgrounds like the one used here, nested <div> is used. There can be a primary-container <div> within which there will be the other sub <div>s for the other backgrounds to be included.The middle background is repeated along y. When using nested <div>s it’s best to set the attribute width in the outermost <div> which is container in this case so that it would then be inherited by the nested <div>s

Imagine the containers/<div>s to be boxes with transparent bottoms. Each placed one inside the other. Take the backgrounds to be transparent as well.The repeated background is placed in the outermost box(the primary-container) The next box contains the head of the background image. The innermost box(<ul>) will contain the lower piece of the background. When put together it will result in a single piece.

-----------------------------------------------------
************** HTML code **************
<div>
  <div>
    <ul>
		<li>
		  <h2>TITLE</h2>
		</li>
		<li>Item 1</li>
		<li>Item 2</li>
		<li>Item 3</li>
		<li>Item 4 </li>
		<li>Item 5 </li>
		<li>Item 6 </li>
	</ul>
  </div><!-- contents -->
</div><!-- container -->
------------------------------------------------------
************** CSS code **************
html,body, ul{
	margin: 0;
	padding:0;
}

div#container {
	background:url(images/mid.jpg) repeat-y left;
	width: 181px;
}
	
div#contents {
	background:url(images/top.jpg) no-repeat top left;
	color: #CC6699;
	font-style: italic;
}

div#contents ul {
	background:url(images/bottom.jpg) no-repeat bottom;
	margin:0;
	padding:40px 30px;
}
div#contents ul li{
	list-style-type: none;
	text-align: center;
}
div#contents ul li h2{
	margin-top:0;
	text-align: center;
}

——————————————————-

NOTE 1:Some HTML tags such as <ul> and <h1>..<h5> will have margin and padding which must be reset to 0px initially to get the desired placing of images. Thereafter required changes may be made.

NOTE 2 :You could encounter a problem when this background is specified for the list items as well, <ul> or <li>. Setting background to “none” could leave blanks in between the middle of the background. Removing the background field altogether in the sub div of the <ul> would solve it.

NOTE 3: Internet Explorer might display the background incorrectly as you scroll down. This can be corrected by specifying the width of the background. For further reading you may check out the link below.

http://www.designdetector.com/bugs/missing-backgrounds-bug.html

This method may also be used for sidebars. Include float in the CSS for the sidebar container<div>

Entry Filed under: Webdesign