Make a background image fill a region and not get cut off?

  • petgraveyard
  • Novice
  • Novice
  • User avatar
  • Posts: 24
  • Loc: Philadelphia, Pennsylvania, United States

Post 3+ Months Ago

Hi,

I want to do something with rounded corners, and I made an image with rounded corners of a massive height to do so (in the background). Is there any way to make the image resize itself to fill a region of variable size with CSS?

That's probably unclear. Here's an example:
http://support.technorati.com/discussions/topic/3174

You see how those posts have rounded corners, but if you check out the background image, it's a really big image that's been truncated to fix? How does one do that in an ordered list, like they did?

Thank you in advance for your help!
  • Anonymous
  • Bot
  • No Avatar
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post 3+ Months Ago

  • righteous_trespasser
  • Scuffle
  • Genius
  • User avatar
  • Posts: 6230
  • Loc: South-Africa

Post 3+ Months Ago

actually those posts are split into 3 divs each, a top, middle and bottom part, the top and bottom parts contain the images and the middle part stretches and just stays the same colour as the top and bottom parts ...

the code would look something like this:
CSS:
Code: [ Select ]
div.post
{
width:500px;
}
div.top
{
width:500px;
height:10px;
background-image:url('images/top.gif');
}
div.middle
{
width:500px;
backgroud-color:#33cc88;
}
div.bottom
{
width:500px;
height:10px;
background-image:url('images/bottom.gif');
}
  1. div.post
  2. {
  3. width:500px;
  4. }
  5. div.top
  6. {
  7. width:500px;
  8. height:10px;
  9. background-image:url('images/top.gif');
  10. }
  11. div.middle
  12. {
  13. width:500px;
  14. backgroud-color:#33cc88;
  15. }
  16. div.bottom
  17. {
  18. width:500px;
  19. height:10px;
  20. background-image:url('images/bottom.gif');
  21. }

(X)HTML
Code: [ Select ]
<div class='post'>
<div class='top'></div>
<div class='middle'>some stuff goes here</div>
<div class='bottom'></div>
</div>
  1. <div class='post'>
  2. <div class='top'></div>
  3. <div class='middle'>some stuff goes here</div>
  4. <div class='bottom'></div>
  5. </div>
  • neksus
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 2194
  • Loc: Canada

Post 3+ Months Ago

The way they have the one large file, it looks like they probably just use the same background-image.
Code: [ Select ]
div.top {
width: 500px;
height: 10px;
background: url('img/bg.gif') no-repeat top left;
}

div.middle {
width: 500px;
background: url('img/bg.gif') no-repeat 0 10px;
}

div.bottom {
width: 500px;
height: 10px;
background: url('img/bg.gif') no-repeat bottom left;
}
  1. div.top {
  2. width: 500px;
  3. height: 10px;
  4. background: url('img/bg.gif') no-repeat top left;
  5. }
  6. div.middle {
  7. width: 500px;
  8. background: url('img/bg.gif') no-repeat 0 10px;
  9. }
  10. div.bottom {
  11. width: 500px;
  12. height: 10px;
  13. background: url('img/bg.gif') no-repeat bottom left;
  14. }

Post Information

  • Total Posts in this topic: 3 posts
  • Users browsing this forum: No registered users and 37 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
 
 

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