How to make DIV background image for all widths?

[toplisek]

I have code sample like:

#my bacground {
width: 100%;
padding :3px 0 10px 0;
margin-bottom:10px;
background:url(../images/bg.gif) top no-repeat;
text-align:left;
}



<div id="search_area_acc"></div>


It seems that it takes width fixed as bg image. is possible to increase automatic with CSS (have width 100%)

Need help.

[Centauri]

Background images can only ever display at their normal size, and will be clipped by the size of the container - you cannot stretch a background image. For a variable-width container, it is normal to either use a repeating graphic background, or to make the image larger than needed so it will be clipped to size.

[toplisek]

I have one good thing in this issue that image is in the middle completely the same.How can I put within div element another image that will resize automatic according to display resolution?

[toplisek]

Hi,
please find my sample background.

[Centauri]

First of all, split it into 3 parts - the left and right ends (as narrow as possible), and a narrow strip from the middle, as per the attached images. It is then a matter of repeating the middle graphic section on the background of the container, and floating the left and right ends into place. To avoid having the graphic ends in the html (as they are not classed as content), you can apply these as a background to something else. You can use divs for this if you like, but I like to use the <b> tag for corner / end graphic placement - it has no semantic meaning and isn't used much these days, and it segregates it from divs which would normally contain content. Whilst the ends could simply overlay the repeated graphic as there is no transparency in your case, the graphics can be butt joined so transparent graphics could be used - the container div gets side margins equal to the width of the end graphics, and the elements containing these graphics are pulled out the end with negative margins :<div class="boxbottom">
<b class="bl"></b><b class="br"></b>
Any text you want here
</div>.boxbottom {
height: 29px;
line-height: 26px;
text-align: center;
margin: 0 7px;
background-image: url(images/bgmiddle.gif);
background-repeat: repeat-x;
}
.boxbottom .bl {
width: 7px;
height: 29px;
float: left;
margin-left: -7px;
position: relative;
background-image: url(images/bgleft.gif);
display: inline;
}
.boxbottom .br {
width: 7px;
height: 29px;
float: right;
margin-right: -7px;
position: relative;
background-image: url(images/bgright.gif);
display: inline;
}The inline display is to avoid IE6's doubled float margin bug.

[toplisek]

Thank you. it works. Where to find such solutions for DIV? Is there some best software which will transform to DIV my image elements or current technology solution is just PURE coding as in the past.

[Centauri]

There is no software that can automatically transform images, as software cannot understand the purpose and meaning of an image, nor could software understand the desired results. Modern website design is all about properly describing the content of the page, separating that aspect from how it looks. Only an experienced human mind can make the decisions about how this is best achieved. Writing the code (using software to assist this if desired) is still quicker overall - whilst code generated by WYSIWYG or graphic slicing software may seem easier, you will spend much more time trying to tweak and debug the rubbish generated, and still not be in total control.

[Eye for Video]

Thanks for the helpful tip Centauri. You seem to be able to answer most of the tough html problems here.
Eye for Video
www.cidigitalmedia.com