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.
Martin PentlowAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Red-KingIT ManagerCommented:
I've a bit of experience with HTML/CSS but somebody else might be able to help more.

First thing, it would be useful to see your HTML where you're putting the header and logo into the page.

From your question I expect it's something like:
<div class=header>
 <img src="mybackground.jpg">
</div>
<div class=header-logo>
 <a href="link.html">
  <img src="mylogo.jpg">
 </a>
</div>

Open in new window


If that's the case, I suggest you change your CSS so that the header-logo positioning is relative and maybe put in the width and height of the image in pixels too so that you don't stretch the image.
Now in your html put the header-logo div inside the header div

<div class=header>
 <img src="mybackground.jpg">
 <div class=header-logo>
  <a href="link.html">
   <img src="mylogo.jpg">
  </a>
 </div>
</div>

Open in new window

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Martin PentlowAuthor Commented:
Thank you very much, that's absolutely fixed my problem perfectly! :)
0
Red-KingIT ManagerCommented:
That's great! Glad I could help.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Web Development

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.