CODEWITHSUNDEEP
css
Aiden Grossman
Aiden Grossman

Reputation: 347

positioning a link on a image using css

I have a link and an image. I would like to use css absolute positioning to position the link on the image but if i use css absolute positioning then the link will not be properly positioned if the user is using a bigger monitor or a smaller monitor. How could I make it so that it would work on all monitors and be positioned correctly.

Upvotes: 1

Views: 53

Answers (2)

Lieutenant Dan
Lieutenant Dan

Reputation: 8294

Make the image a background image, reformat as below, if possible. (this is a better practice)

Is there a reason it MUST be a foreground image? Let me know and I might have a suggestion specific to that!

#divwithimage { 
   background: url("../images/sweet.jpg");
   background-repeat: no-repeat;
   width: 500px;
   height: 500px;
   position: relative; // as this will act as parent
}

button {
  position: absolute; // absolute to container above
  left: 0;
  top: 0;
  width: 200px;
  height: 40px;
  background: pink;
}

Upvotes: 0

Jamie Barker
Jamie Barker

Reputation: 8256

Option one is really daft, but just move the link so it wraps around the image?

<a href="http://www.example.com"><img src="http://placehold.it/350x150"></a>

The other alternative (if you can't do that), is to make sure they are in the same parent element that is position: relative;: 

#container {
  position:relative;
  width:350px;
  height:150px;
}
#container a {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
<div id="container">
  <img src="http://placehold.it/350x150" />
  <a href="http://www.google.co.uk"></a>
</div>

Upvotes: 1

Related Questions