"Can I create a CSS background cover that is fixed and covers only half of the

Question

"Can I create a CSS background cover that is fixed and covers only half of the

Can someone provide guidance on creating a layout that includes a top menu bar area, along with a split 75/25 screen featuring a fixed and covering background?

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

The main left-hand area should scroll vertically like a normal webpage.

The top menu bar should also scroll with the main content.

However, the right-hand area needs to have a fixed background that scales and covers the entire region (utilizing the CSS cover property) without scrolling.

I've been able to achieve some parts of this layout separately but struggling to get everything to work together seamlessly!

Currently, I'm facing an issue where the background image in the RHS area is not positioning correctly within the block. The backgrounds are in place and fixed, but the RHS background doesn't seem to fit perfectly:

<!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

...(content for lhs)...

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

rhs

...(content for rhs)...

</div>

</body>
</html>

The numbers indicate the vertical scrolling behavior in both areas to demonstrate how the page extends beyond the browser height.

It seems like the background image in the RHS area is still sizing to cover the full screen rather than just fitting the parent div element. As a result, only a part of the image is visible in the RHS area instead of the complete image coverage.

Any suggestions or tips to resolve this issue would be greatly appreciated!

html css background fixed

Answer 1

Answer №1

Do you want to achieve something like 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; }

Answer 2

Do you want to achieve something like 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; }

Answer 3

Answer №2

Are you in search of something like the following?

I implemented the code snippet below to enable scrolling on the site:

<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>
     </div>
   </body>

Answer 4

Are you in search of something like the following?

I implemented the code snippet below to enable scrolling on the site:

<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>
     </div>
   </body>

Answer 5

Answer №3

Do you need the background to remain fixed on the right-hand side div while the content scrolls over it?

You should take a look at this informative article:

Following the guidelines from that article, here is what I implemented:

<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"></di
 v>
<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 


/>10
    <br /><br /><br /><br /><br /><br />11

</div>
</div>

</body>
</html>

This method ensures that the background image in the right div remains fixed and centered within the right div.

Answer 6

Do you need the background to remain fixed on the right-hand side div while the content scrolls over it?

You should take a look at this informative article:

Following the guidelines from that article, here is what I implemented:

<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"></di
 v>
<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 


/>10
    <br /><br /><br /><br /><br /><br />11

</div>
</div>

</body>
</html>

This method ensures that the background image in the right div remains fixed and centered within the right div.

Answer 7

Answer №4

Consider inserting the following code into the .rhs section

right: 0px;
position: fixed;

Check if this aligns with your requirements. Alternatively, are you suggesting the rhs content should also move up while keeping the background static?

In that scenario, simply include an additional div for rhs with only a background style. Example.

Answer 8

Consider inserting the following code into the .rhs section

right: 0px;
position: fixed;

Check if this aligns with your requirements. Alternatively, are you suggesting the rhs content should also move up while keeping the background static?

In that scenario, simply include an additional div for rhs with only a background style. Example.

"Can I create a CSS background cover that is fixed and covers only half of the

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Tips for ensuring text is consistently aligned at the top using CSS and div elements

One-time PHP form submission only

Having trouble uploading images using ReactJS on the web platform

Selenium not registering click on enabled element

How to eliminate spacing between photos in a flexbox layout

Streaming RTMP video through a WebView

Creating tabbed content with a classless CSS design by utilizing radio buttons instead of the traditional unordered

What is the process for linking functionality to buttons in Embedded Elixir?

"Adjusting the width of columns in a Datatable

Guide to adjusting the position of a dropdown menu within a navigation bar

PHP - Printing out various embedded HTML quotes

My goal is to populate all of these elements with Javascript

Issues arise with the functionality of the sticky navigation script following a browser resize

How come when I applied height:100% and position: absolute to .test2, it ended up being 200px instead of the expected 204px

What is the process to extract the displayed font using JavaScript?

"The challenges faced while working with a PHP script on a mySQL table, including problems related to the FROM_UNIX

Tips on adjusting the color of a link once it has been clicked?

What steps should be taken to transform this object into code?

hyperlinks along the edges surrounding a centrally positioned image

What is the process for adding information to the database when the checkbox is selected?