Home/ Questions/Q 1010801
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-16T09:08:20+00:00

I need to design a page with border images on each side. I need

  • 0

I need to design a page with border images on each side. I need the page to fit on 1280×1024 and 1024×768 resolutions. Is it possible to have a fixed size for the center div and crop the border images in the lower resolution ?

  • 1280×1024 : border-200px center-840px border-200px
  • 1024×768 : border-72px center-840px border-72px

I’ve made two images with 200px X 5px. I’ve tried to use the float property without success.
So I’ve made it this way so far, it works in 1280×1024 but not in 1024×768 (it’s too wide).

HTML : 

<body>
  <div id="right"></div>
  <div id="left"></div>
  <div id="center">
    <h1>Title</h1>
    <p>Content here</p>
  </div>
</body>

CSS :

html {
  margin: 0px;
  padding: 0;
}

body {
  margin: 0px;
  padding: 0;
  width: 100%;
  background-color: white;
  overflow: auto; /*to clear the floats*/
}

#right {
  clear: both;
  position: absolute;
  right: 0;
  background-image: url('/site_media/images/border-right.jpg');
  background-repeat: repeat-y;
  width: 200px;
  height: 100%;
}

#left {
  clear: both;
  position: absolute;
  left: 0;
  background-image: url('/site_media/images/border-left.jpg');
  background-repeat: repeat-y;
  width: 200px;
  height: 100%;
}

#center {
  width: 840px;
  margin: 0px auto;
  padding-left:10px;
  padding-right:10px;
}

Thank you!

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    since the center element if fixed-width, this should be easy. the side border should be placed as ‘background’ in the body instead of having its own div.

    correct me if im wrong, based on what i understand here, you want the side border to be cut/crop by 1024 resolution instead of shrink. how about you make a single image with 1280 width, place both side border images in it accordingly, left and right, leave the center area empty. save this as a single image (up to you if you want a transparent background), then do the followings.

    <style type="text/css">
body { /* can also use your own div */
   background:url(path_to_the_single_image) repeat-y top center;
}

#center {
   width:840px;
   margin:0 auto; /* centered the div */
   background:green;
}
</style>

<body>
   <div id="center">center content</div>
</body>

    thats it! now you should have your fixed width element in the center, and your side-borders in the background. if you load it in 1280, you should see the full border, while if you resize down to 1024, your centered element should remain there, and your side border just now should cropped out by the browser.

    let me know if this is what you looking for.. 🙂

    • 0