Getting a div to be same size as container?

  • dsgn
  • Born
  • Born
  • dsgn
  • Posts: 1

Post 3+ Months Ago

I have a problem. How can I make a div (which has a repeated background image) to be the same height as what the #container it's in is?

If I make say for e.g. <div id="container"><div id="image" style="height: 100%"></div></div> it makes #image 100% of the browser window, not of the #container div it's in.
  • digitalMedia
  • a.k.a. dM
  • Genius
  • User avatar
  • Posts: 5149
  • Loc: SC-USA

Post 3+ Months Ago

I'm a little confused. You want the child <div> to have a background that scales with the parent <div>?
  • Bogey
  • Genius
  • Genius
  • Bogey
  • Posts: 8413
  • Loc: USA

Post 3+ Months Ago

like this...

The CSS
CSS Code: [ Select ]
.background {
 background-image: url('images/image.jpg');
 width: 200px;
 height: 100%;
 position: absolute;
}
 
#container {
 position: relative;
 height: auto;
 width: 900px;
 margin: 0 auto;
}
  1. .background {
  2.  background-image: url('images/image.jpg');
  3.  width: 200px;
  4.  height: 100%;
  5.  position: absolute;
  6. }
  7.  
  8. #container {
  9.  position: relative;
  10.  height: auto;
  11.  width: 900px;
  12.  margin: 0 auto;
  13. }

And the HTML
HTML Code: [ Select ]
<html>
<head>
 <title>Test Page</title>
</head>
<body>
<div id="container">
 <div class="background">
 <p>Whatever</p>
 </div>
</div>
</body>
</html>
  1. <html>
  2. <head>
  3.  <title>Test Page</title>
  4. </head>
  5. <body>
  6. <div id="container">
  7.  <div class="background">
  8.  <p>Whatever</p>
  9.  </div>
  10. </div>
  11. </body>
  12. </html>

Post Information

  • Total Posts in this topic: 3 posts
  • Users browsing this forum: No registered users and 81 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
cron
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.