CODEWITHSUNDEEP
htmlcss
Ryan S
Ryan S

Reputation: 3268

How to make this background stretch throughout the whole website

Hi Guys I have this site:

http://www.ryansammut.com/orijen/

Basically so far I managed to make the top part strech as a background, now I need to make the other parts too. I'm not sure how to do it, so I'm asking for ideas how this would be done best, keeping the positioning all relative and the background image would adjust according to the needed content area.

PS. This is only needed for resolutions greater than 1280px, so zoom out if you need to see what's happening.

Upvotes: 0

Views: 2344

Answers (3)

Jafu
Jafu

Reputation: 480

You need to change the structure to something like this:

<div id="header">
   <div>
     <ul>Nav</ul>
   </div>
</div>
<div id="mainContent">
   <div>Content</div>
</div>
<div id="footer">
   <div>Content</div>
</div>

Then the CSS could look something like this:

div#header { width: 100%; background: black; }
  div#header div { width: 600px; margin: 0 auto; background: url(...); }
div#mainContent { width: 100%; background: url(...); }
  div#mainContent div { width: 600px; margin: 0 auto; }
div#footer { width: 100%; background: black; }
  div#footer div { width: 600px; margin: 0 auto; }

It is fast written, hope you can see the idea? I can't see why you would go with position absolute or relative. Use margin: 0 auto; to center divs instead :)

Upvotes: 0

Paweł Szymański
Paweł Szymański

Reputation: 7792

  1. Don't use tables, use DIVs only.
  2. No need to include FlowPlayer script two times.
  3. I dont see you use JQuery (no need to include that).
  4. Replace Dreamweaver's rollover images with proper CSS:

.item {background: image.jpg} .item:hover {background: image_rollover.jpg}

  1. Get sprite images (you can read here: http://css-tricks.com/css-sprites/)

As the original question... you have to use two DIVs for each "row", like this:

#header_wrapper {
  float: left;
  width: 100%;
  background: header_backgroud.jpg;
}
#menu_wrapper {
  float: left;
  width: 100%;
  background: menu_backgroud.jpg;
}
#content_wrapper {
  float: left;
  width: 100%;
  background: content_backgroud.jpg repeat center top;
}
.wrapper {
  margin: 0 auto;
  width: 1260px;
}

<div id="header_wrapper">
  <div class="wrapper">
    --- header content ---
  </div>
</div>
<div id="menu_wrapper">
  <div class="wrapper">
    --- menu content ---
  </div>
</div>
<div id="content_wrapper">
  <div class="wrapper">
    --- page content ---
  </div>
</div>

Upvotes: 1

Timothy Groote
Timothy Groote

Reputation: 8643

You can not stretch those elements because they are contained in a div named 'wrapper', which has a maximum width of 1280px.

add the following properties to : header, contentbackground, and footer:

margin-left:auto; 
margin-right:auto;

this will make sure the elements are centered.

then remove the width property from #wrapper, and add the background to it so it reads as follows :

#wrapper {
  position: relative;
  margin: 0 auto;
  top: 0px;
  padding: 0px;
  background-image: url(../images/contentBG.png);
}

However, now we won't see the horizontal stretch of the header anymore, so we need to move #header above #wrapper.

<div id="header">
 ...
</div>

<div id="wrapper">
 ...
</div>

Upvotes: 1

Related Questions