I need help with positioning an img inside a div container that has a background color. I want the image to overlay on top of the div, extending beyond its height without causing any scroll bars.
Here is a fiddle related to this issue: http://jsfiddle.net/mLtfcm6n/2/
Fiddle code:
<div class="container">
<img class="image" src="https://cdn1.iconfinder.com/data/icons/prettyoffice9/256/triangle.png"></img>
</div>
.container {
background-color:red;
height:100px;
position:relative;
overflow:hidden;
}
.image {
position:absolute;
left:40px;
height:256px;
}
I am unable to set overflow-y property to hidden and only overflow-x should be hidden.
The desired outcome is shown in this fiddle: http://jsfiddle.net/mLtfcm6n/3/
The CSS for it is as follows (only change is removal of overflow property):
.container {
background-color:red;
height:100px;
position:relative;
}
.image {
position:absolute;
left:40px;
height:256px;
}
Please assist!