Home/ Questions/Q 6623057
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-25T21:29:15+00:00

I have this page which has this this CSS body { background-image: url(images/BACKGROUND5.jpg); background-repeat:

  • 0

I have this page which has this this CSS

body {
  background-image: url("images/BACKGROUND5.jpg");
  background-repeat: no-repeat;
}

and two divs

#borderleft {
  background: none repeat-y scroll 0 0 #93A87D;
  clear: left;
  float: left;
  margin-left: -10px;
  margin-top: 610px;
  visibility: visible;
  width: 70px;
  z-index: 2;
}

#borderright {
  background: none repeat-y scroll 0 0 #93A87D;
  clear: right;
  float: right;
  margin-left: -10px;
  margin-top: 610px;
  position: relative;
  visibility: visible;
  width: 70px;
  z-index: 2;
}

here is the HTML

<body>
<div id="borderleft"></div>
<div id="borderright"></div>

any ideas on how to make image in the center and the green background: none repeat-y scroll 0 0 #93A87D; on the outsides

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    One good way to do this kind of layout, when the width of both border columns is fixed, is this.

    The elements are:

    1. A container <div> with position: relative
    2. The border <div>s with position: absolute, fixed widths, and left: 0/right:0 respectively
    3. A “content” <div> with margin-left and margin-right equal to the width of the border <div>s.

    In the example I linked above there’s no container div (the <body> element plays that role), but you will need one if you want to be able to move this arrangement around on the page as a whole.

    • 0