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
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.
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; }
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.
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.