Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 15 of 15
  1. #1
    Regular Coder Psionicsin's Avatar
    Join Date
    Aug 2010
    Location
    Detroit, Michigan
    Posts
    351
    Thanks
    54
    Thanked 0 Times in 0 Posts

    HELP: div graphic layering

    Hey guys. It might just be too late in the night for me to think clearly, but here goes.

    I have a tiled graphic on the body repeating x and y. I need one more tiled graphic layered over the body that is tiled x 100%, but only y down to 480px. I'm trying to figure out a way to do this without making the graphic 480px tall.

    How would I do this, so I can then make an actual content div for all of my content to go into without being affected by the length underneath?

    Hope I'm explaining this right because I'm exhausted.

  2. #2
    Regular Coder Psionicsin's Avatar
    Join Date
    Aug 2010
    Location
    Detroit, Michigan
    Posts
    351
    Thanks
    54
    Thanked 0 Times in 0 Posts
    Maybe this well help my crappy explaination...


  3. #3
    New Coder
    Join Date
    Jan 2012
    Posts
    97
    Thanks
    1
    Thanked 13 Times in 13 Posts
    Not exactly sure what u mean. You just want this? <div style="background:url(tiled image src goes here) no-repeat;width:100%;height:480px;"></div>

  4. #4
    New Coder
    Join Date
    Jan 2012
    Posts
    97
    Thanks
    1
    Thanked 13 Times in 13 Posts
    Oh ok that picture helped. So do this:

    <div style="background:url(images src) no-repeat;top: 0;left: 0; z-index:-5000;width:100%;height:480px;></div>

  5. #5
    Regular Coder Psionicsin's Avatar
    Join Date
    Aug 2010
    Location
    Detroit, Michigan
    Posts
    351
    Thanks
    54
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by sean3838 View Post
    Oh ok that picture helped. So do this:

    <div style="background:url(images src) no-repeat;top: 0;left: 0; z-index:-5000;width:100%;height:480px;></div>
    Hmm it looks like I didn't explain this well. I'm going to change the graphic right quick... (and shame on that inline coding lol)

    Ok I removed all of the distracting things from that graphic. The content needs to overlay on top of the design without being bound by any length restrictions.
    Last edited by Psionicsin; 03-12-2012 at 07:23 AM.

  6. #6
    New Coder
    Join Date
    Jan 2012
    Posts
    97
    Thanks
    1
    Thanked 13 Times in 13 Posts
    Ya just use: (I used colors for the background but you will obviously use your images, and i don't have an external stylesheet so yes I used inline styling! haha)

    Code:
    <div style="background: #ffffff no-repeat;position:absolute;top:0;left: 0;z-index:-5000;width:100%;height:480px;">
         <div>All of your content can go in here without being affected</div>
    </div>

  7. #7
    Regular Coder Psionicsin's Avatar
    Join Date
    Aug 2010
    Location
    Detroit, Michigan
    Posts
    351
    Thanks
    54
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by sean3838 View Post
    Ya just use: (I used colors for the background but you will obviously use your images, and i don't have an external stylesheet so yes I used inline styling! haha)
    OK, never mind. I'm not sure how this is working, but it works so thanks a lot. I could've SWORN there was another way to do this though that doesn't involve positioning.

    I've ran into this problem before, but cannot for the life of me remember what project I did it for. I've looked back at my past 30 projects and the example is not there.

    Last edited by Psionicsin; 03-12-2012 at 05:06 PM.

  8. #8
    Regular Coder Psionicsin's Avatar
    Join Date
    Aug 2010
    Location
    Detroit, Michigan
    Posts
    351
    Thanks
    54
    Thanked 0 Times in 0 Posts
    Is there a way to do this without positioning? Or am I better off just making the graphic for the stripes 480px tall?

  9. #9
    Regular Coder Psionicsin's Avatar
    Join Date
    Aug 2010
    Location
    Detroit, Michigan
    Posts
    351
    Thanks
    54
    Thanked 0 Times in 0 Posts
    Hmm so positioning is my only option, or best option rather?

  10. #10
    New Coder
    Join Date
    Jan 2012
    Posts
    97
    Thanks
    1
    Thanked 13 Times in 13 Posts
    It's your best option. Any other way would be silly IMO.

  11. #11
    Regular Coder Psionicsin's Avatar
    Join Date
    Aug 2010
    Location
    Detroit, Michigan
    Posts
    351
    Thanks
    54
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by sean3838 View Post
    It's your best option. Any other way would be silly IMO.
    Alright cool, thanks. I wasn't aware of that trick as I rarely make a layout like that.

  12. #12
    Registered User
    Join Date
    Jun 2011
    Posts
    1,063
    Thanks
    12
    Thanked 241 Times in 240 Posts
    I don't think it's the best option. The more semantic and easier way is just using two backgrounds:

    Code:
    body {
       background: url('background1.png'), url('background2.png');
    }
    Multiple Backgrounds Article
    Multiple Backgrounds W3Schools

    The only problem with this method is that it doesn't work in < IE9.
    Last edited by Sammy12; 03-13-2012 at 08:16 PM.

  13. #13
    Regular Coder Psionicsin's Avatar
    Join Date
    Aug 2010
    Location
    Detroit, Michigan
    Posts
    351
    Thanks
    54
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Sammy12 View Post
    I don't think it's the best option. The more semantic and easier way is just using two backgrounds:

    Code:
    body {
       background: url('background1.png'), url('background2.png');
    }
    Multiple Backgrounds Article
    Multiple Backgrounds W3Schools

    The only problem with this method is that it doesn't work in < IE9
    I'm using an IE blocker for anything under 9 anyway. But how would you be able to control each separately? Right now both graphics are very small tiled graphics.

  14. #14
    Registered User
    Join Date
    Jun 2011
    Posts
    1,063
    Thanks
    12
    Thanked 241 Times in 240 Posts
    Well, < IE9 (IE8 mainly, and a little IE7) is important to support
    http://www.w3schools.com/browsers/browsers_explorer.asp

    I would use a conditional stylesheet that would display the position: absoluted element if an old browser was viewing. That way you would be using the correct method, and supporting old browsers. Once the numbers of old browsers falls below 1%, you can take the conditional methods out.

    You can use the background-repeat and background-position properties

    Code:
    body {
        background: url('background1.png') repeat, url('background2.png') no-repeat;
    }
    Last edited by Sammy12; 03-13-2012 at 10:39 PM.

  15. #15
    Registered User
    Join Date
    Jun 2011
    Posts
    1,063
    Thanks
    12
    Thanked 241 Times in 240 Posts
    I just read your first post, you wanted both backgrounds to repeat-y. That can't happen easily with multiple backgrounds, since repeat-y is 100% of the container. I was thinking the second background was 400px tall. The multiple background works if you have no-repeat on one of the images (as my code above shows). I think a workaround is using background-origin

    Code:
    body {
        background-origin: padding-box, content-box;
    }
    but I don't really want to waste my time try to figure that out. You could also use :after to display another background, but at this point I've spent too much time trying to make this work.

    Though semantically wrong and I dislike the use of outdated methods, using position: absolute; is the only solution to this problem. Sorry I read the original post wrong.
    Last edited by Sammy12; 03-13-2012 at 10:36 PM.


 

Posting Permissions

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