Background image positioning help (advanced)

Discussion in 'CSS' started by Audentio, Mar 25, 2009.

0
  1. #1
    Hey there, I have a design Im trying to code. I have liked the idea of aligning things to the top of a corner webpage. I am trying to figure out how to do it so the image (a shine image) stays at the top left corner of the page the entire way (a fixed skin), no matter the resolution.

    http://www.audentio.com/staff/officers/mike/previews/hws.jpg

    I will have a png or jpg as the shine image, and I want it to stay to the top left corner.

    I was thinking perhaps something like

    .bg {
    position: relative;
    left: 50px; (align to the center from the left edge)
    margin-right: 465px; (align the left edge of the background which is the shine to the right which puts it on the edge of the header image which is centered within the entire page)
    z-index: 1;
    }

    Not sure what to do to make just the background image do this, because everytime I try it moves the entire content, and I just want the background image.


    $$$ for a correct answer, as I make many designs like this. +rep too
     
    Audentio, Mar 25, 2009 IP
  2. qazu

    qazu Well-Known Member

    Messages:
    1,834
    Likes Received:
    62
    Best Answers:
    0
    Trophy Points:
    165
    #2
    change it to position: fixed; but be warned that IE doesn't support position: fixed :(
     
    qazu, Mar 26, 2009 IP
  3. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,999
    Best Answers:
    253
    Trophy Points:
    515
    #3
    I would add a wrapping DIV to the entire document around the centered part, then I would add empty padding to the right side of the image to force it over and just align the image "top center".

    Though to be honest, I'd never put an image that large on a website, though you might be able to sneak it in under a reasonable filesize. (though to be honest, I doubt it)

    There's a reason you don't see these types of effects on many websites, and the ones that do use it are fat, bloated, and take forever to load.
     
    deathshadow, Mar 26, 2009 IP
  4. Vade

    Vade Peon

    Messages:
    2
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #4
    Thought I'd use my first post here to try help you out.

    IE will support the fixed BG but only on the body tag so you can just amend it there, judging by your pic this should suffice.

    body
    {
    background:url(yourimage.jpg) fixed left top no-repeat;
    }
     
    Vade, Mar 26, 2009 IP
  5. Audentio

    Audentio Well-Known Member

    Messages:
    424
    Likes Received:
    12
    Best Answers:
    0
    Trophy Points:
    108
    #5
    I do not want it to be fixed, rather I do not want it to move to the right if I change the size of the window. Meaning I don't want it to follow the page if I scroll down, just for resolution standards.

    I have an image for the background on body (just a gradient from light blue, to white, to light green). Then I have <div id="flare"></div> at the very top after <body> with css on that as:

    #flare {
    width: 100%;
    background: url(images/flare.png) top left no-repeat;
    position: absolute;
    height: 1076px;
    z-index: -1;
    }

    flare.png is JUST the flare on a transparent background.
     
    Audentio, Mar 26, 2009 IP
  6. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,999
    Best Answers:
    253
    Trophy Points:
    515
    #6
    Which is why I suggested adding empty space to one side of your flare.png and then positioning it top center instead of top left. Have #flare wrap your content instead of being kin to it, and you should be good. then it should 'center' with the content.

    Only problem is I don't even want to think about how large that image file is going to be with the transparancy - hell, it might be smaller non-transparent with the background already composited, and even then I'm willing to bet that one image will be at least TWICE the size I'm comfortable deploying for an entire page.
     
    deathshadow, Mar 26, 2009 IP