2 bg images in a same ID [Archive]

View Full Version : 2 bg images in a same ID

mikacruz

Mar 3rd, 2009, 12:16 PM

Hello All,
I have two colums (left col and right col)
In the right col, I want to have a background image for the content, but also a different one for the bottom.
However if I apply a bg to my #right_col
then the bg doesnt work for my #right_col_btm
What is the best way to get that bottom image always stand below the content of my right col bearing in mind that it must be relative to that right col and not to the overall main. Is there a special function to tell the rgt_btm to cover the bg of right_col? or what would be the simplest, cleanest option? (thanks a lot for your help)

CSS
#right_col
{
width: 626px;
position: relative;
background-image: url("/images/bg_rgt.gif");
}

#right_col p
{
padding-top: 0px;
padding-bottom: 0px;
padding-left: 15px;
padding-right: 30px;
}

#right_col h1
{
padding-top: 0px;
padding-bottom: 0px;
padding-left: 15px;
padding-right: 30px;
}

#rgt_btm
{
background-image: url("/images/bg_rgt_btm.gif") no repeat;
width: 625px;
height: 22px;
}

HTML
<div id="right_col">
<h1>content</h1>
<p>content</p>
<div id="rgt_btm"></div>
</div>

BoldUlysses

Mar 3rd, 2009, 02:16 PM

I can't see anything obviously wrong with your approach. A link to your page would be helpful, as we could see the images.

By the way, no-repeat needs a hyphen, and when using CSS shorthand on the background, you'll want to change it from background-image to just background:

background: url("/images/bg_rgt_btm.gif") no-repeat;

Excavator

Mar 3rd, 2009, 07:06 PM

Hello mikacruz,
The validator is a quick way to find little mistakes like that. Check the links about validation in my sig below.
Added a DocType and some colors in place since we don't have the images -
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.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>
<style type="text/css">
html, body {
font: 12px "Comic Sans MS";
background: #FC6;
text-align: center;
}
* {
margin: 0;
padding: 0;
border: none;
}
#wrap {
width: 800px;
margin: 30px auto;
background: #999;
overflow: auto;
}
#right_col {
width: 626px;
position: relative;
background: #f00 url("/images/bg_rgt.gif");
}
#right_col p {
padding: 0 30px 0 15px;
}
#right_col h1 {
padding: 0 30px 0 15px;
}
#rgt_btm {
background: #000 url("/images/bg_rgt_btm.gif") no-repeat;
width: 625px;
height: 22px;
}
</style>
</head>
<body>
<div id="wrap">
<div id="right_col">
<h1>content</h1>
<p>content</p>
<div id="rgt_btm"></div>
</div>
</div>
</body>
</html>