It's relatively complicated to explain, but i try:
You use a background image, opriginally sized 1152px width. x 251px.height.
If a browser resolution ist less than 1152pc width, i.E. 1024x768px, it will automatically cut/hide parts of the right side of the background image. If a browser resolution is larger than 1152px, i.E. 1280px wide, or larger, the background image would repeat itself, adding another image, immediately behind the first one.
There are ways to prevent the background image from repeating itself, like CSS, looking similar to the one, shown below:
Code: Select all
background: url('../image/search_box_2.png') left center no-repeat;
but then, you would ALSO have to FIX the BROWSER VIEW MAX WIDTH, to a POPULAR Browser Size, like 1024px width, by using such a MAX SIZE LIMITER like:
Code: Select all
/* layout */
#container {
width: 980px;
margin-left: auto;
margin-right: auto;
text-align: left;
}
to make sure, your background image size will FILL the entire Space, leaving NO empty right Section, but still display in Full.
The image itself would have to be sized in an Image Editor, to exactly match, i.E. 980px width.
I hope you get the idea!
OC is like a Woman, one has to play around a little, to find out on what she likes best
Good Luck
Ernie