Thread: question about background image

question about background image

i am using 3 divs which contains a background image in each of the 3 divs name top btm and ctr

my question is about the ctr div, the background image i have used has a width of 235px and height of 125px, if the content will be small and can fit within 125px then there is no issue, however the amount of content that i need in the ctr div is beyond 125px

as you will notice from the link i have given to the page below for this example, if i use a background color closer to the background image then a clear gap appears in the ctr div where the content is, also the background image of the ctr div has a small white color on left and right side so if i use a background color as the content is more than 125px that white color disappears and the look of the center div is not what i want


so should i simply use a solid background color for the entire ctr div

please advice.

thanks.

this example with the 3 images is available at
Untitled Document


following is the code

HTML Code:

<div class="bgtop"></div>

<div class="bgctr">
<p>Lorem ipsum dolor sit amet, consetetur sadi pscing sed diam</p>
<p>Erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea  rebum. Lorem ipsum dolor sit amet, consetetur sadi pscing elitr, sed diam </p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean ut lectus eu enim dapibus placerat. Aenean cursus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce wisi mi, auctor et, tincidunt in, fermentum sed, mauris. Ves</p>
</div>

<div class="bgbtm"></div>

Code:

.bgtop{
float: left;
width: 235px;
height: 10px;
background: url(topbg.jpg) no-repeat;
}

.bgctr{
float: left;
width: 215px;
height: auto;
background: #dedede url(ctrbg.jpg) repeat-x;
padding: 0 10px 0 10px;
}

.bgbtm{
float: left;
width: 235px;
height: 10px;
background: url(btmbg.jpg);
}

Hi sudhakararaog,

As you said, if you use the solid colour for the background, then you'd lose some of the effect that you are after with the white line down the left. Could you make the ctr .jpg file longer? Or is it possible that the content is going to be really really long, which would mean a very very large jpg file for the background?

Hmmm.... This would be a nice place for multiple background images. Too bad CSS3 isn't supported in most browsers yet.

But I'm sure with some fancy HTML/CSS2 you can make it work out. Have something like this:

HTML Code:

<div class="bgctr">
<div class="bgctr2">
<p>Lorem ipsum dolor sit amet, consetetur sadi pscing sed diam</p>
<p>Erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Lorem ipsum dolor sit amet, consetetur sadi pscing elitr, sed diam </p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean ut lectus eu enim dapibus placerat. Aenean cursus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce wisi mi, auctor et, tincidunt in, fermentum sed, mauris. Ves</p>
</div>
</div>

Code:

.bgctr{
float: left;
width: 215px;
height: auto;
background:url('repeating-1px-high-image.jpg') repeat-y;
}

.bgctr2 {
 background: url('ctrbg.jpg') no-repeat;
 padding: 0 10px 0 10px;
}

That might work out.

PS: Use GIF or PNG-8 images instead of JPGs for the simple images you have. You'll get better compression and better quality. JPGs are best for photographs.