CODEWITHSUNDEEP
cssposition
user1801221
user1801221

Reputation: 255

Background not 100% in container div with relative absolute positioning with percentages

I'm using a page with relative & absolute positioning and percentages. HTML & Body are set to 100%, the container div is relative and the interior divs are absolute. The background image I've set to the container div is not filling the page - why? Thanks in advance!

Here's what I've got:

<style type="text/css">
html, body { 
width:100%;
    height:100%;}

.container {
   width:1000px;
   height:100%;
   background-image:url('background.jpg');
   position: relative;
   margin-left:auto;
   margin-right:auto;
  }
.header {
   width:1000px;
   height:300px;
   background-color:#ffffff;
   position: absolute;
   top:0px;
   left:0px;
  }


.content {
   width: 680px;
   position:absolute;
   top: 350px;
   left: 310px;
  }

.post {
   width: 630px;
   padding: 20px;
   padding-top: 50px;

  }

.title {
   width: 650px;
   height: 20px;
   padding: 10px;
   position: absolute; left: -10px; top: 10px;
  }




</style>

<body>
<div class="container">

 <div class="header">
 Placeholder for header image.
 <p><a href="index.html">Home</a></p>
 </div>


 <div class="content">
  <div class="post">
   <div class="title">Welcome</div>

    <img src="PLACEHOLDER.JPG" alt="Proposal Photo" width="630" />
  </div>
 </div>
</div>

Upvotes: 1

Views: 2118

Answers (2)

Jay Shukla
Jay Shukla

Reputation: 5826

Try this

.container {
  width:1000px;
  height:100%;
  background-image:url('background.jpg') no-repeat;
  position: relative;
  margin-left:auto;
  margin-right:auto;
  background-size:100%
}

Upvotes: 1

achudars
achudars

Reputation: 1506

Do this:

body {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

then your div can scale with this code:

.container {
    width:100%;
    height:100%;
    position: relative;
}

Upvotes: 0

Related Questions