Home/ Questions/Q 8899191
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-15T00:48:00+00:00

I want to stretch background color (or an image) so it would look like

  • 0

I want to stretch background color (or an image) so it would look like the bottom example in

this jsfiddle

Same code but here:
Example1:

<div class="fixed_width">
  <div class="header">Header</div>
  <div class="menu">
      Here be some menu
  </div>
  <div class="content">
      Here be some content<br/>
      ANd even more
  </div>
</div>

Example 2

<div class="fixed_width">
  <div class="header">Another<br/>Header</div>
  <div class="menu2">
      Here be some menu
  </div>
  <div class="content">
      Here be some content<br/>
      ANd even more
  </div>

CSS:

body {background: lightgray}
.fixed_width {width: 500px; border: solid thin black; 
  margin: 20px auto; background: white;}
.menu {background: blue; color: white; padding: 20px; 
  margin-bottom: 10px;}
.content {background: white; border: solid thin gray; 
  margin: 5px;}

.menu2 {width: 500px; background: blue; color: white; 
  margin-bottom: 10px;padding: 20px 2000px 20px 2000px; 
  margin-left: -2000px;}

Bottom example is something I came up with but the problem is browser wants to scroll to those 2000px on the right.

The structure of the page is similar to the code in jsfiddle and as you can see there is no telling where exactly the top of menu will be – above it there will be a header which can have variable height (so I can not use a nice pre generated whole page background image).

I can not disable scroll because on smaller screens ppl wont be able to scroll. Please help me fix that (if possible).

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    put your menu in a wrapping element, give the latter a width of 100% (assuming it is the top most element), and center the menu:

    HTML:

      <body>
     <div id="menu_wrapper">
        <ul id="menu">
         <li>Item</li>
         <li>Item</li>
         <li>Item</li>
         <li>Item</li>
        </ul>
      </div>
  </body>

    CSS:

      #menu_wrapper {
  width:100%;
  background:blue;
  }
  #menu 
  width:1000px;
  margin:0 auto;
  }
    • 0