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

View Full Version : 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:
http://rodsyconstruction.com/samples/sampletop.png

MIDDLE:
http://rodsyconstruction.com/samples/sample_mid.png

BOTTOM:
http://rodsyconstruction.com/samples/sample_bottom.png

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:

http://rodsyconstruction.com/samples/sample1.png

forum_amnesiac

10-06-2009, 08:32 AM

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

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:

<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...

<!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>

</body>
</html>

coothead

nihilater

10-06-2009, 10:11 AM

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

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!

Hi there nihilater,

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

<!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>

</body>
</html>

coothead