Css Background help

**ProgramPotato** · 05-19-2012, 10:42 PM

Hello,

I was wondering if there is a way to make a "resizable" css background. for example, a small top image, the middle image that gets resized, and the bottom image. I tried this myself but failed miserably. Please help!

**ProgramPotato** · 05-19-2012, 11:16 PM

for example, using the attachments(BG______.png) to for the large attachment(Background.png)

**Major Payne** · 05-21-2012, 05:49 PM

Have you tried using CSS 3 rules for resizing multiple background images?

Multiple Backgrounds with CSS3

**ProgramPotato** · 05-21-2012, 06:15 PM

Originally Posted by Major Payne

Have you tried using CSS 3 rules for resizing multiple background images?

Multiple Backgrounds with CSS3

I tried that.. Didn't work.

I'm just going to keep using what I'm doing.

**damndaewoo** · 05-21-2012, 06:55 PM

I don't see how that technique wouldn't of worked unless you are using IE8 or lower.

if that is the case you can try spliting your page into three seperate containers with their own specific background. ie:

HTML Code:

<html>
 <head>
  <style type="text/css">
   body{background-color:#282828;margin:0 auto;padding:10px 0px;}
   .container {margin:0 auto;}
   .top {background-image:url('BGtop.png');background-repeat:no-repeat;height:16px;margin:0 auto;width:900px;}
   .middle {background-image:url('BGmid.png');background-repeat:repeat-y;color:#FFFFFF;margin:0 auto;padding:25px;width:850px;}
   .bottom {background-image:url('BGbottom.png');background-repeat:no-repeat;height:18px;margin:0 auto;width:900px;}
  </style>
 </head>
 <body>
  <div class="container">
   <div class="top">
   </div>
   <div class="middle">
    <p>blah blah blah blah</p>
    <p>blah blah blah blah</p>
    <p>blah blah blah blah</p>
    <p>blah blah blah blah</p>  
   </div>
   <div class="bottom">
   </div>
  </div>
 </body>
</html>

Everytime you add more stuff to the middle div it will just keep getting taller.

**ProgramPotato** · 05-21-2012, 07:40 PM

Originally Posted by damndaewoo

I don't see how that technique wouldn't of worked unless you are using IE8 or lower.

if that is the case you can try spliting your page into three seperate containers with their own specific background. ie:

HTML Code:

<html>
 <head>
  <style type="text/css">
   body{background-color:#282828;margin:0 auto;padding:10px 0px;}
   .container {margin:0 auto;}
   .top {background-image:url('BGtop.png');background-repeat:no-repeat;height:16px;margin:0 auto;width:900px;}
   .middle {background-image:url('BGmid.png');background-repeat:repeat-y;color:#FFFFFF;margin:0 auto;padding:25px;width:850px;}
   .bottom {background-image:url('BGbottom.png');background-repeat:no-repeat;height:18px;margin:0 auto;width:900px;}
  </style>
 </head>
 <body>
  <div class="container">
   <div class="top">
   </div>
   <div class="middle">
    <p>blah blah blah blah</p>
    <p>blah blah blah blah</p>
    <p>blah blah blah blah</p>
    <p>blah blah blah blah</p>  
   </div>
   <div class="bottom">
   </div>
  </div>
 </body>
</html>

Everytime you add more stuff to the middle div it will just keep getting taller.

That's what I'm doing now.