question about background image - question about background image i am using 3 divs which contains a background image in each of the 3 divs

sudhakararaog · 11th October 2009, 09:43 AM

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);
}

stu2000 · 11th October 2009, 04:09 PM

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?

CloudedVision · 11th October 2009, 07:49 PM

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.

11th October 2009, 09:43 AM	#1
sudhakararaog Member Join Date: Sep 2009 Posts: 181 Thanks: 0 Thanked 0 Times in 0 Posts Expertise: Total Beginner Experience: Basic / None	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); } Last edited by CloudedVision; 11th October 2009 at 07:50 PM.. Reason: Use [code] and [html] tags please.

11th October 2009, 04:09 PM	#2
stu2000 Member Join Date: Jan 2009 Posts: 357 Thanks: 27 Thanked 26 Times in 25 Posts Expertise: PHP Experience: Professional	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? Last edited by stu2000; 11th October 2009 at 04:32 PM.. Reason: typos

Thread Tools
Show Printable Version Email this Page
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode