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
    346
    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
    Regular Coder Psionicsin's Avatar
    Join Date
    Aug 2010
    Location
    Detroit, Michigan
    Posts
    346
    Thanks
    54
    Thanked 0 Times in 0 Posts
    Maybe this well help my crappy explaination...


  • #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
    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
    Regular Coder Psionicsin's Avatar
    Join Date
    Aug 2010
    Location
    Detroit, Michigan
    Posts
    346
    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
    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
    Regular Coder Psionicsin's Avatar
    Join Date
    Aug 2010
    Location
    Detroit, Michigan
    Posts
    346
    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
    Regular Coder Psionicsin's Avatar
    Join Date
    Aug 2010
    Location
    Detroit, Michigan
    Posts
    346
    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
    Regular Coder Psionicsin's Avatar
    Join Date
    Aug 2010
    Location
    Detroit, Michigan
    Posts
    346
    Thanks
    54
    Thanked 0 Times in 0 Posts
    Hmm so positioning is my only option, or best option rather?

  • #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
    Regular Coder Psionicsin's Avatar
    Join Date
    Aug 2010
    Location
    Detroit, Michigan
    Posts
    346
    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
    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
    Regular Coder Psionicsin's Avatar
    Join Date
    Aug 2010
    Location
    Detroit, Michigan
    Posts
    346
    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
    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
    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
    •