www.webdeveloper.com
Results 1 to 8 of 8

Thread: Css Background help

  1. #1
    Join Date
    May 2012
    Posts
    12

    Css Background help

    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!

  2. #2
    Join Date
    May 2012
    Posts
    12
    for example, using the attachments(BG______.png) to for the large attachment(Background.png)
    Attached Images Attached Images

  3. #3
    Join Date
    May 2005
    Location
    Gold Coast (MS)
    Posts
    2,217
    Have you tried using CSS 3 rules for resizing multiple background images?

    Multiple Backgrounds with CSS3
    Last edited by Major Payne; 05-21-2012 at 05:53 PM.

  4. #4
    Join Date
    May 2012
    Posts
    12
    Quote Originally Posted by Major Payne View Post
    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.

  5. #5
    Join Date
    May 2011
    Posts
    52
    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.
    Last edited by damndaewoo; 05-21-2012 at 06:58 PM.

  6. #6
    Join Date
    May 2012
    Posts
    12
    Quote Originally Posted by damndaewoo View Post
    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.

  7. #7
    Join Date
    May 2012
    Posts
    12
    Sorry, i forgot to mention:

    I figured it out after i made this post. Sorry

  8. #8
    Join Date
    May 2005
    Location
    Gold Coast (MS)
    Posts
    2,217
    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
    Last edited by Major Payne; 05-22-2012 at 01:00 PM.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles