Reputation: 11069
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
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
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
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
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
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
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