Link to home
Start Free TrialLog in
Avatar of Martin Pentlow
Martin Pentlow

asked on

Getting a linked image to align on top of a background header image regardless of screen resolution

On my website I have a header image which spans the width of my browser in 1280x1024. In higher resolutions (e.g. 1920x1080), it centers itself perfectly with white space on either side, as well as the rest of the body, which is fine.

The problem I'm having is that I have a linked image (a small logo) that I want to always sit on top of the background header image, on the left hand side. At 1280x1024 I can do top:10px;left:10px; and it will be in the right place. However at 1920x1080 the logo is all the way out into the left of the white space. I can compensate for this so that it displays in the correct place, however when I then load the page in 1280x1024, the logo appears halfway across the header background image.

What I'm really asking is how to make it so the logo always sits at the left of the header image, regardless of resolution (or zoom factor, as you can see the same thing happen when you zoom out, i.e. all the other content stays relative to each other and centralised, but the logo stays at the top left).

I have tried to use relative and absolute positioning to keep the logo anchored to that point on the header bar but it's not working, so I'm not sure what I'm doing wrong.

I could just edit the header image so that it includes the logo, then it wouldn't wander all over the place. But I do want the logo image specifically to be linked to the homepage so I need to keep it separate.

Here's what I have for these elements:

div.header {
    position:relative;
    width:100%;
    height:100%;
}

div.header-logo {
    position: absolute;
    top:10px;
    left:10px;
}

Open in new window


As above, this displays correctly in 1280x1024 (i.e., when the header image spans the entire width of the browser), but not really for anything higher. I guess that means that top:10px;left:10px; is only referring to the page as a whole rather than at the edge of the header image. How do I get around this? It's also probably worth mentioning that I'm almost a complete beginner to CSS (and HTML to a lesser extent) so please go ahead and explain everything like I'm 5.
ASKER CERTIFIED SOLUTION
Avatar of Rory Clerkin
Rory Clerkin
Flag of Ireland image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of Martin Pentlow
Martin Pentlow

ASKER

Thank you very much, that's absolutely fixed my problem perfectly! :)
That's great! Glad I could help.