How can I combine three images to act as one Background image in CSS?

**nihilater** · 10-06-2009, 08:23 AM

So i have three images here:

TOP:

MIDDLE:

BOTTOM:

And I want to combine those images to be my background image so that when i write paragraphs in it, it will expand where my "MIDDLE image" will repeat in y axis like the below:

**forum_amnesiac** · 10-06-2009, 08:32 AM

You could possibly do this by having 3 different div classes, eg

HTML Code:

div.hdr {
  background-image :   url(header.jpg);
}

div.bdy {
  background-image :   url(body.jpg);
}

div.ftr {
  background-image :   url(footer.jpg);
}

Then use these in your HTML like this:

HTML Code:

<div class="hdr">Some text here</div>

<div class="bdy">body text here</div>

<div class="ftr">Footer text here</div>

**coothead** · 10-06-2009, 09:59 AM

Hi there nihilater,

here is an alternative example for you to play with...

Code:


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>

<base href="http://rodsyconstruction.com/samples/">

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="language" content="english"> 
<meta http-equiv="Content-Style-Type" content="text/css">

<title></title>

<style type="text/css">
#container {
    width:324px;
    margin:auto;
 }
#container img {
    display:block;
 }
#content {
    padding:1px 2em;
    background-image:url(sample_mid.png);
 }
#content p {
    font-family:verdana,arial,helvetica,sans-serif;
    font-size:0.9em;
    color:#000;
    text-indent:2em;
 }
#content p:first-letter {
    font-family:'times new roman',serif;
    font-size:2em;
    line-height:0.9;
}
</style>

</head>
<body>

<div id="container">

<img src="sampletop.png" alt="top image">

<div id="content">
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras volutpat, purus ac 
pellentesque adipiscing, mauris ligula convallis metus, vitae scelerisque nibh 
orci quis mi. Cum sociis natoque penatibus et magnis dis parturient montes, 
nascetur ridiculus mus. Curabitur porttitor aliquam libero. Quisque molestie ornare 
sem. Nam euismod sem lacinia ipsum. In pharetra metus ut dolor cursus aliquam. 
Maecenas eu ante quis enim tincidunt laoreet. Pellentesque varius nunc in ipsum 
pulvinar sollicitudin. Nunc et mi. Donec auctor dignissim orci. Aliquam sed magna. 
Pellentesque in dui. In eget elit. Praesent eu lorem.
</p>
</div>

<img src="sample_bottom.png" alt="bottom image">

</div><!-- end #container" -->

</body>
</html>

coothead

**nihilater** · 10-06-2009, 10:11 AM

Cool. I actually edited it to fit in my page like this:

Code:

div.hdr {
  			background-image: url(images/top.png); background-repeat:no-repeat; background-position:top; width:724px; height: 105px; float:left;
		}
		
		div.bdy {
		  background-image: url(images/mid.png);  width:714px;  background-repeat:repeat-y; float:left;
		}
		
		div.ftr {
		  background-image: url(images/bottom.png); background-position:bottom; background-repeat:no-repeat; width:724px; height:42px; float:left;
		}

it needs the height and width for the header and footer and only width for the body and the repeat-y to repeat the image when expanding it.

thanks man...

**nihilater** · 10-06-2009, 10:13 AM

Hey coothead, I am actually looking for an alternative, I will go and try this one. You always help, thanks man!

Originally Posted by coothead

Hi there nihilater,

here is an alternative example for you to play with...

Code:


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>

<base href="http://rodsyconstruction.com/samples/">

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="language" content="english"> 
<meta http-equiv="Content-Style-Type" content="text/css">

<title></title>

<style type="text/css">
#container {
    width:324px;
    margin:auto;
 }
#container img {
    display:block;
 }
#content {
    padding:1px 2em;
    background-image:url(sample_mid.png);
 }
#content p {
    font-family:verdana,arial,helvetica,sans-serif;
    font-size:0.9em;
    color:#000;
    text-indent:2em;
 }
#content p:first-letter {
    font-family:'times new roman',serif;
    font-size:2em;
    line-height:0.9;
}
</style>

</head>
<body>

<div id="container">

<img src="sampletop.png" alt="top image">

<div id="content">
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras volutpat, purus ac 
pellentesque adipiscing, mauris ligula convallis metus, vitae scelerisque nibh 
orci quis mi. Cum sociis natoque penatibus et magnis dis parturient montes, 
nascetur ridiculus mus. Curabitur porttitor aliquam libero. Quisque molestie ornare 
sem. Nam euismod sem lacinia ipsum. In pharetra metus ut dolor cursus aliquam. 
Maecenas eu ante quis enim tincidunt laoreet. Pellentesque varius nunc in ipsum 
pulvinar sollicitudin. Nunc et mi. Donec auctor dignissim orci. Aliquam sed magna. 
Pellentesque in dui. In eget elit. Praesent eu lorem.
</p>
</div>

<img src="sample_bottom.png" alt="bottom image">

</div><!-- end #container" -->

</body>
</html>

coothead

Thread: How can I combine three images to act as one Background image in CSS?

Thread Tools

Search Thread

How can I combine three images to act as one Background image in CSS?

Bookmarks

Bookmarks

Posting Permissions