SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    Error 404: Life not found silver trophybronze trophy
    Join Date
    Dec 2007
    Location
    UK Nr Manchester
    Posts
    3,460
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Background image positioning difficulties...

    Hoping this one will be a doddle for one of the many CSS experts we have here.

    I've designed myself into something of a corner by using a drop shadow on a patterned body background on this site being developed http://www.visit.turnstone-media.co.uk/ which should look like this concept design - http://visitbuxton.co.uk/new-site/

    The drop shadow down to 1010px is a single image (called main-shadow-bg.jpg) without repeat used as the BG image for the Div #wrapper. To try and have the drop shadow continue past the bottom of that into the white background area I made a second wrapping div called #innerwrapper and tried to position a new dropshadow image (called horizontal-shadow.jpg) 1000px from the top of the 'innerwrapper div so that the drop shadow extends all the way to the bottom of the page. As you can see, the second drop shadow image is starting at the top instead of 1000px down the page.

    Never tried to use this technique before, not sure why it's not working, can someone point me in the right direction?
    It's 530 people, but do you really get it?
    ImgWebDesign - Web design in Buxton, High Peak, Derbyshire UK.

  2. #2
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Hi, background-repeat is a bit tricky.

    When you specify a background position (in this case 1000px vertical), it does start down there, but since you are repeating it vertically down the y axis it will repeat up and down to fill the space, not really whaty ou are after

    You could rework the image to have 1000px of blank transparent space at the top of the image and then it will work.

    Or you could remove the innerwrapper element, and place it on 2 empty absolutely positioned elements (positioned accordingly).

    I like the first option though . Slightly larger image file.
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  3. #3
    Error 404: Life not found silver trophybronze trophy
    Join Date
    Dec 2007
    Location
    UK Nr Manchester
    Posts
    3,460
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Ryan.

    Quote Originally Posted by RyanReese View Post
    Hi, background-repeat is a bit tricky.

    When you specify a background position (in this case 1000px vertical), it does start down there, but since you are repeating it vertically down the y axis it will repeat up and down to fill the space, not really whaty ou are after
    Yeah, wondered if it had something to do with the repeat.

    Quote Originally Posted by RyanReese View Post
    You could rework the image to have 1000px of blank transparent space at the top of the image and then it will work.
    If I do that presumably I can't use repeat so I'd have to make a full size image and the point of the way I'm trying to do it now is that it will expand downwards and always be as long as the page is.

    Quote Originally Posted by RyanReese View Post
    Or you could remove the innerwrapper element, and place it on 2 empty absolutely positioned elements (positioned accordingly).
    Trying this now. I never normally use positioned elements, always managed to avoid the need so far.
    It's 530 people, but do you really get it?
    ImgWebDesign - Web design in Buxton, High Peak, Derbyshire UK.

  4. #4
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    To be hoenst there probably is a better way and I know it has been said coutnless times here on how to approach this issue, though my memory is failing me (even with searches) on this subject.

    Hopefully someone will come along and point out the correct solution
    Off Topic:

    Forgot about the repeating issue witih the blank space in the image, I blame sleep deprivation
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  5. #5
    Error 404: Life not found silver trophybronze trophy
    Join Date
    Dec 2007
    Location
    UK Nr Manchester
    Posts
    3,460
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by RyanReese View Post
    To be hoenst there probably is a better way and I know it has been said coutnless times here on how to approach this issue, though my memory is failing me (even with searches) on this subject.

    Hopefully someone will come along and point out the correct solution
    Off Topic:

    Forgot about the repeating issue witih the blank space in the image, I blame sleep deprivation
    Making me feel better about posting with a solution request, I couldn't find anything when I searched but always concerned about looking like a 'help vampire'.

    If I figure it out, which I haven't yet, I'll post the solution.
    It's 530 people, but do you really get it?
    ImgWebDesign - Web design in Buxton, High Peak, Derbyshire UK.

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,821
    Mentioned
    158 Post(s)
    Tagged
    4 Thread(s)
    Hi,

    The solution is pretty straight forward.

    Apply the repeatong horizontal shadow to the first element and the overlay to the second element.

    e.g move the innerwrapper to be the first element on the page.
    Code:
    <body>
    <div id="innerwrapper">
     <div id="wrapper">
    Then change the css:

    Code:
    #innerwrapper {
        background-image: url(http://www.visit.turnstone-media.co.uk/templates/visit2/images/horizontal-shadow.jpg);
        background-repeat: repeat-y;
        background-position: 0 0;
        width:1022px;
        margin:auto
        }
    You will need to remove the bottom line from the shadow-bg-main.jpg img of course.

    When the image stops at the bottom the repeating background from behind takes over.

    Looks like your right column is 1px to far over to the right as the background causes a jog. It doesn't need a background colour anyway

  7. #7
    Error 404: Life not found silver trophybronze trophy
    Join Date
    Dec 2007
    Location
    UK Nr Manchester
    Posts
    3,460
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hah! Thanks Paul, I have a blind spot for stuff like that, probably why I could never solve Rubic's cubes either.

    Cheers
    It's 530 people, but do you really get it?
    ImgWebDesign - Web design in Buxton, High Peak, Derbyshire UK.


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
  •