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.

**ProgramPotato** · 05-21-2012 07:42 PM

Sorry, i forgot to mention:

I figured it out after i made this post. Sorry

**Major Payne** · 05-22-2012 12:56 PM

Would you post your solution here for others that may be following this thread? Thanks.

CSS contents and browser compatibility
When can I use...
Compatibility table: CSS3 Selectors

Thread: Css Background help

Thread Tools

Display

Css Background help

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions