I've been looking around the Internet, and haven't been able to find a suitable solution to what I'd like to do in CSS; have an image (header) anchored to the top left, with a size that scales according to window size and/or simply users resolution. Instead of making multiple pages for multiple resolutions, I'd rather just have a self-scaling image. Is there any way to do this easily?
Got a tip for us?
Let us know
Become a MacRumors Supporter for $50/year with no ads, ability to filter front page stories, and private forums.
CSS Positioning
- Thread starter darkplanets
- Start date
- Sort by reaction score
You might consider using a percentage, which is of the window itself (and the window is, to some degree, related to the screen resolution):
(you should only need to change either the width or the height; your image should stay proportional that way)
Code:
#logo {
height: 30%
}(you should only need to change either the width or the height; your image should stay proportional that way)
A List Apart have recently published a primer for CSS positioning, it might be worth a look: http://www.alistapart.com/articles/css-positioning-101/
Awesome. That's exactly what I wanted. Now there's another question with relative positioning; say I have a box as a header, and a box offset it underneath (also placed via CSS)-- I tried using relative placement with percentages as the offset, but it doesn't scale the position correctly with the header at smaller resolutions. Is there any way I can in effect bind the top of the bottom header to the header offset by say 20% of the window size?