CSS Background Cover - fixed and only half screen?

Question

I am trying to create a layout with a top menu bar area, and then a split 75 / 25 screen with a fixed and covering background.

--------------------------------------------------------
|                                                      |
--------------------------------------------------------
|                                      |               |
|                                      |               |
|                                      |               |
|                                      |               |
|                                      |               |
|                                      |               |
--------------------------------------------------------

The left hand main area should scroll in the y direction as per any normal page.

The top menu bar should scroll with the main content.

But the region on the right hand area needs to have a fixed background that scales and covers this entire region (using CSS cover property), and is fixed - so it doesnt scroll, always covers this area, and is always visible.

I can do parts of this but not everything at the same time!

I can get the 75/25 split, get the top bar and the split, or get a covering and fixed background, but cant get everything to work together!

Ignoring top bar, this code works for everything except the position of the rhs background. The backgrounds are in place and are fixed, and the rhs background scales and covers, but it is not in the correct position within the block:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<style>
html {
height: 100%;
width: 100%;
}
body {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px;
}
.lhs {
width: 75%;
float: left;
background: url(lhs_bg.jpg) repeat left top;
}
.rhs {
width: 25%;
float: right;
background: url(rhs_bg_1.jpg) no-repeat left center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
</style>

</head>
<body>

<div class="lhs">

lhs

<br /><br /><br /><br /><br /><br />1
<br /><br /><br /><br /><br /><br />2
<br /><br /><br /><br /><br /><br />3
<br /><br /><br /><br /><br /><br />4
<br /><br /><br /><br /><br /><br />5
<br /><br /><br /><br /><br /><br />6
<br /><br /><br /><br /><br /><br />7
<br /><br /><br /><br /><br /><br />8
<br /><br /><br /><br /><br /><br />9
<br /><br /><br /><br /><br /><br />10
<br /><br /><br /><br /><br /><br />11

</div>
<div class="rhs">

rhs

<br /><br /><br /><br /><br /><br />1
<br /><br /><br /><br /><br /><br />2
<br /><br /><br /><br /><br /><br />3
<br /><br /><br /><br /><br /><br />4
<br /><br /><br /><br /><br /><br />5
<br /><br /><br /><br /><br /><br />6
<br /><br /><br /><br /><br /><br />7
<br /><br /><br /><br /><br /><br />8
<br /><br /><br /><br /><br /><br />9
<br /><br /><br /><br /><br /><br />10
<br /><br /><br /><br /><br /><br />11

</div>

</body>
</html>

Numbers are just there to show the content scrolling as it should and make sure the page is taller than the browser to force it to scroll.

My guess is that the background image is still sizing to cover the full screen, not the parent div element of the right hand area only - so you only see part of the full image in the rhs area, not the full image.

Any tips?!

Nobody will write it from scratch... Show some code, please. — Shomz, Oct 06 '14 at 19:32
Difficult to add just one snippet of code out the of the many I have tried, where each code does something but not something else! I have added some code to the post now. — R2D2, Oct 06 '14 at 19:45

score 0 · Answer 1 · answered Oct 06 '14 at 22:15

Are you trying to achieve this? http://jsfiddle.net/oneeezy/kc4umn1c/1/

    /* Rows (clears floats) */
    .row:before, .row:after { content: " "; display: table; }
    .row:after { clear: both; }
    .row { *zoom: 1; clear: both; }

    .wrapper { margin: 4em auto 0; height: 100%; }
    header { background: black; position: fixed; top: 0; left: 0; right: 0; padding: 1em; color: white; }
    main { width: 75%; float: left; display: block; background: #f2f2f2; padding: 1em; }
    nav { width: 25%; float: left; display: block; background: yellow; padding: 1em; position: fixed; right: 0; top: 5em; }
    p { background: white; padding: 2em; margin: 1em 1em 2em; }

score 0 · Answer 2 · answered Oct 06 '14 at 22:22

Are you looking for Something like This?

I use #filler { min-height:700px; } to make the site scroll.

<head>
 <title>My Website</title>
 <style type='text/css'>
    body {
      background-color: #EEE0A7;
      margin:0px;
      min-width:1200px;
    }
    .container {
      text-align: center;
      display:block;
    }
    #rightbanner {
      background-color: orange;
      width: 25%;
      float: right;
      margin-top: 1em;
      margin-right: 2%;
      min-height:250px;
      padding:10px;
    }
    #content {
      position:relative;
      min-width:475px;
      background-color: orange;
      margin-left: 2%;
      margin-right: 30%;
      min-height:350px;
      margin-bottom:1em;
      margin-top:1em;
   }
   #filler {
      min-height:700px;
   }
   h2 {
     padding:0;
     margin:0;
     font-size:1.2em;
   }
   a {
     color:black;
     font-family: "Times New Roman", Georgia, Serif;
   }
   p {
     padding:0;
     margin:5px;
   }
  `.item {
     width:468px;
     margin:0 auto;
     padding: 0;
     border:gray solid 2px;
     border-radius:10px;
     }
   header {
     top:1em;
     margin-right:2%;
     margin-left:2%;
     background-color: orange;
     height: 3em;
     margin-top:1em;
   }
   h1 {
     margin-top:0;
   }
   }
   #search {
     display:none;
   }
   </style>
   </head>
   <body>
     <div class="container">
       <header>
         <a href="#"><h1>My Website</h1></a>
       </header>
       <div id="rightbanner">
         <div  id="search">
           <b>Search Box:</b><br>
            <form method="get" action="#">
             <input type="text" id="search_input" name="search" placeholder="Search"   /><br>
             <input type="submit" value="Search"/>
           </form>
         </div>
         <b>MENU</b><br>
         <div id=navbar>
           <a href='#'>Site 1</a><br><a href='#'>Site 2</a><br>      
         </div>
       </div>
       <div id="content"><br>
    <div class='item'>
         <h2><a href='#'>Test-Link!</a></h2>
         <audio  controls>
            <source src=#' type='audio/wav' />
           <source src='#' type='audio/mp3' />
         </audio>
         <p><b>From:</b><a target='_blank' href='https://www.youtube.com/'>Video XY</a></p>
         <p><h2><a href='download.php?id=1'>DOWNLOAD</a></h2></p>
       </div><br>
    <div class='item'>
         <h2><a href='#'>Link-Test-2!</a></h2>
   Here comes text
         <p><b>Aus:</b><a target='_blank' href='https://www.youtube.com/'>Video ABC</a></p>
         <p><h2><a href='download.php?id=2'>DOWNLOAD</a></h2></p>
       </div><br>
       <div id="filler">
       </div>
       </div>
     </div>
   </body>

Li Kia Chiu · Answer 3 · 2014-10-06T22:46:53.320

0

Try add the code in the .rhs

right: 0px;
position: fixed;

See if that's what you want. Or do you mean have rhs content also moving up, but the rhs background stays?

If that's the case, then just add another div for rhs with only backgound style. Sample.

edited Oct 06 '14 at 22:46

answered Oct 06 '14 at 22:34

Li Kia Chiu

213
1
6

score 0 · Answer 4 · answered Oct 06 '14 at 22:43

It sounds like you want the background fixed on the right-side div, with the content scrolling over it?

check out this article: http://nicolasgallagher.com/flexible-css-cover-images/

Based on that article, here's what I did:

<html>
<head>
    <style>
    html {
    height: 100%;
    width: 100%;
    }

    body {
    margin: 0px auto;
    background-color:blue;
    }

    #menu{
    height:250px;
    background-color:green;
    }

    #container{
    position:relative;
    }

    #lhs {
    width: 75%;
    float:left;
    background: url(lhs_bg.jpg)repeat left top;
    }

    #rhs {
    width: 25%;
    float:right;
    background-image:url(rhs_bg.jpg);
    background-repeat:no-repeat;
    background-position:50%;
    background-size: cover;
    }
</style>

</head>

<body>

<div id = "menu"></div>
<div id = "container">
    <div id = "lhs">
        lhs
    <br /><br /><br /><br /><br /><br />1
    <br /><br /><br /><br /><br /><br />2
    <br /><br /><br /><br /><br /><br />3
    <br /><br /><br /><br /><br /><br />4
    <br /><br /><br /><br /><br /><br />5
    <br /><br /><br /><br /><br /><br />6
    <br /><br /><br /><br /><br /><br />7
    <br /><br /><br /><br /><br /><br />8
    <br /><br /><br /><br /><br /><br />9
    <br /><br /><br /><br /><br /><br />10
    <br /><br /><br /><br /><br /><br />11
    </div>

    <div id="rhs">
        rhs
    <br /><br /><br /><br /><br /><br />1
    <br /><br /><br /><br /><br /><br />2
    <br /><br /><br /><br /><br /><br />3
    <br /><br /><br /><br /><br /><br />4
    <br /><br /><br /><br /><br /><br />5
    <br /><br /><br /><br /><br /><br />6
    <br /><br /><br /><br /><br /><br />7
    <br /><br /><br /><br /><br /><br />8
    <br /><br /><br /><br /><br /><br />9
    <br /><br /><br /><br /><br /><br />10
    <br /><br /><br /><br /><br /><br />11

</div>
</div>

</body>
</html>

This keeps the background image in the right div fixed, but centered in the right div.

CSS Background Cover - fixed and only half screen?

4 Answers4