CODEWITHSUNDEEP
htmlcsscss-position
Jamgreen
Jamgreen

Reputation: 11069

Place image on top of element with css

How do I place an image on top of a button with html and css?

<div>
  <img src="photo.jpg">
  <button>Text</button>
</div>

I guess it should be something like

div {
  position: relative;
}

img {
  position: absolute;
  top: 10px;
}

but it acts a bit weird.

Is it possible to just have a normal div and then set the img to float on top of everything else in the div element?

Upvotes: 2

Views: 301

Answers (6)

Geeky
Geeky

Reputation: 7496

If you just want to make the image to come over the button, you can make the display as block

check the following snippet

div img{
  display:block;
}
button{
  text-align:center;
  margin:40px;
  padding:10px;
}
<div>
  <img src="https://cdn1.iconfinder.com/data/icons/user-pictures/100/male3-128.png">
  <button>Text</button>
</div>

Hope this helps

Upvotes: 0

perilla
perilla

Reputation: 38

I don't know what's your purpose exactly, if you want the image to take the whole line, make the button lay beneath, why don't set the CSS display attribute of the image to display:block;?

Upvotes: 1

Jazzzzzz
Jazzzzzz

Reputation: 1633

May be you are trying to achieve something like this.

.userIcon {
  background: url('https://cdn1.iconfinder.com/data/icons/user-pictures/100/male3-128.png') no-repeat;
  height:20px;
  width:20px;
  background-size:20px;
  top: 8px;
}
.left {
  float:left;
}
.right {
  float:right;
}
.clear{
  clear:both;
}
.button{  
  padding:10px;
  color: #FFF;
  background-color: #0095ff;
  border:1px solid #07c;
  box-shadow: inset 0 1px 0 #66bfff;
}
.btnText{
  margin:2px 0px 0px 10px;  
}
<div>
  <button class="button">
    <span class="left userIcon"></span>
    <span class="right btnText">Create user account</span>
    <span class="clear"></span>
  </button>
</div>

Upvotes: 0

Razia sultana
Razia sultana

Reputation: 2221

#bottom{
    background-repeat: repeat-x;    
    height:121px;
    width: 984px;
    margin-left: 20px;
    margin-top: 13px;
}

#bottom .content{    
    width: 182px; /*328 co je 1/3 - 20margin left*/
    height: 121px;
    line-height: 20px;
    margin-top: 0px;
    margin-left: 9px;
    margin-right:0px;
    display:inline-block;
    position:relative;
}
<div id="bottom">
    <div class="content">
        <img src="http://placehold.it/182x121"/> 
        <button>Text</button>
    </div>      
  </div>

Upvotes: 0

Nenad Vracar
Nenad Vracar

Reputation: 122155

You can use position: absolute with transform: translate() on img.

This calc(-100% - 1px) means

  • -100% or - height of element (img in this case) that you are performing transform on, so it will translate for its own height up on Y axis
  • -1px is for top border on div element.

div {
  position: relative;
  display: inline-block;
  border: 1px solid black;
  margin-top: 100px;
}
img {
  position: absolute;
  top: 0;
  transform: translateY(calc(-100% - 1px));
}
<div>
  <img src="http://placehold.it/50x50">
  <button>Text</button>
</div>

Just to demonstrate if you have border of 5px then you should use -5px in calc.

div {
  position: relative;
  display: inline-block;
  border: 5px solid black;
  margin-top: 100px;
}
img {
  position: absolute;
  top: 0;
  transform: translateY(calc(-100% - 5px));
}
<div>
  <img src="http://placehold.it/50x50">
  <button>Text</button>
</div>

Upvotes: 0

Asifuzzaman
Asifuzzaman

Reputation: 1783

hello see the below one its simple with a few line code 

<div style="position:relative;" >
<img src="http://www.industrydynamics.ca/images/skype_icon.png" width="100" height="100"  >

<input type="button" name="" value="Button" style="position:absolute;width:80px;left:10px;top:120px;" >
</div>

Upvotes: 0

Related Questions