I want to fix 3 pieces of images into 3 divisions of my header part. layout is fluid - 100%, left side image is fixed-width, center image should repeat and the right side image also should fix according the browser window resize.

how to achive this ?

1 answer

Ktash 1851

Well, there are a number of ways that you can do this. An easy way (shown here with divs, though it will work with images as well) is:


<div id="container">
    <div id="right_part"></div>
    <div id="left_part"></div>


#container { background: blue; }
#left_part { width: 15px; height: 100px; background: green; }
#right_part { width: 15px; height: 100px; background: red; float: right; }

The heights and widths are explicitly set for the divs so that they have it, but you shouldn't have this issue with images. Basically, you'll want to make right part and left part your images, and the container will have the center piece as background: #color url(image) repeat-y scroll center top;.

Edit: Just read the part on the right side needing to adjust as well.In that case, you'll want to set the right side to have a fixed height and a percentage based width, with a repeat background the same as the container div.

Answered almost 6 years ago by Ktash
  • Hi Ktash, My layout is fluid and I have 3 pieces of images for the header part. left image is of 240px, center is a small piece of image that has to be repeated and the right one is about 550px. when user re-size the browser the left and right image should be fixed and only the center image should decrease its size. pls help me to fix this issue. ismailvtl almost 6 years ago