SitePoint Sponsor

User Tag List

Results 1 to 6 of 6

Hybrid View

  1. #1
    SitePoint Enthusiast
    Join Date
    Nov 2009
    Location
    London, UK
    Posts
    32
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Is this bad practise when using a background?

    Hi

    Was wondering if it's bad practise to use an image as a background. I ask this because some people like to use multiple images on a background and it seems that css only allows you to use one image per background, for example if you are using a gradient. e.g (background-image:../gradient.jpg; } background-color:#000

    What's the best way to use a background when the background requires multiple images?

    Thanks

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,165
    Mentioned
    453 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by Michael I View Post
    What's the best way to use a background when the background requires multiple images?
    CSS3 allows for multiple background images on a single element, and this is well supported in the latest browsers. But an alternative it to have divs within divs, each with its own background image.

    There are lots of options.

  3. #3
    SitePoint Enthusiast
    Join Date
    Nov 2009
    Location
    London, UK
    Posts
    32
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Ralph,

    Im a bit confused as to how this would be written in the css. Would the divs go under #body like this?

    .div_background1{
    background-image:../img1.jpg;
    }
    .div_background2{
    background-image:../img2.jpg;
    }
    .div_background3{
    background-image:../img3.jpg;
    }

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,165
    Mentioned
    453 Post(s)
    Tagged
    8 Thread(s)
    That would work if you structured your HTML like this:

    Code:
    <body>
    
    <div class="div_background1">
      <div class="div_background2">
        <div class="div_background3">
        </div>
      </div>
    </div>
    
    </body>
    Or you can try out CSS3 multiple backgrounds.

  5. #5
    SitePoint Enthusiast
    Join Date
    Nov 2009
    Location
    London, UK
    Posts
    32
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That's great.

    Thanks for your help.

  6. #6
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,165
    Mentioned
    453 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by Michael I View Post
    That's great.

    Thanks for your help.
    No problem! Please post back if you have any issues or other questions.


Bookmarks

Posting Permissions

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