Welcome to OMG boards community!
Community of friends where we talk about daily life, offtopic stuff, and what keeps us busy.

You are currently viewing our community forums as a guest user. Sign up or
Having an account grants you additional privileges, such as creating and participating in discussions.

Can I add multiple background images to body in a style?

Discussion in 'Tech Talk & Web Things' started by Vilandra, Jun 23, 2009.

  1. Vilandra

    Vilandra OMG Member

    Messages:
    51
    Likes Received:
    0
    Trophy Points:
    50
    Can I add multiple background images to body in a style?

    Hi :)

    I know how to add one background image to the Body Standard CSS Attributes in a style, but is there a way to add more than one? What I'm trying to do is create the look that the four corners of the page are cut off, so I thought I could add a triangular image in each corner. But I can't figure out how to do that lol. Is there a better way than using an image?

    Thanks :)
     
  2. Brian

    Brian OMG Member

    Messages:
    22,729
    Likes Received:
    23
    Trophy Points:
    185
    Gender:
    Male
    Re: Can I add multiple background images to body in a style?

    Well, you can start out by putting one of them as the BG and making the alignment of it top left.

    Then you can make a div element, with a float: right aligned to the top of the page and put the image inside the div.

    That should work.
     
  3. Mikey

    Mikey :mikey: Staff Member

    Messages:
    17,831
    Likes Received:
    8,520
    Trophy Points:
    510
    Gender:
    Male
    Re: Can I add multiple background images to body in a style?

    You could try making a big BG image which incorporates all the images you want in it...
     
  4. Brian

    Brian OMG Member

    Messages:
    22,729
    Likes Received:
    23
    Trophy Points:
    185
    Gender:
    Male
    Re: Can I add multiple background images to body in a style?

    If you prefer to be implemented in CSS3 rather then my workaround posted above using nesting elements.

    Code:
    [LEFT][COLOR=#800080]<style>[/COLOR]
    #back-1{
    background-image:...;
    background-position:...;
    }
    #back-2{
    background-image:...;
    background-position:...;
    }
    #back-3{
    background-image:...;
    background-position:...;
    } 
    #back-4{
    background-image:...;
    background-position:...;
    [COLOR=#800080]</style>} 
    [/COLOR]
    [/LEFT]
    
    HTML:
    <div id="back-1">
    <div id="back-2">
    <div id="back-3">
    <div id="back-4">
    
    <!-- your content here -->
    
    </div>
    </div>
    </div>
    </div>
     
  5. rsgoldrsmoney

    rsgoldrsmoney OMG Member

    Messages:
    0
    Likes Received:
    0
    Trophy Points:
    25
  6. henrykuong

    henrykuong OMG Member

    Messages:
    0
    Likes Received:
    0
    Trophy Points:
    25
  1. This site uses cookies to help personalise content, tailor your experience and to keep you logged in if you register.
    By continuing to use this site, you are consenting to our use of cookies.
    Dismiss Notice