Reputation: 23
I am having trouble getting my image to display when there are no fixed height and width assigned. I want my image to be flexy and responsive with my grid, so what I thought would work is to set height and width to 100% but no avail.
How can I get the image to show and be able to change size accordingly?
HTML
<div class="row">
<div class="large-12 columns">
<div class="hero">
<img id="image" src="steve1.png" alt=""/>
</div>
</div>
</div>
CSS
.hero {
max-width: 100%;
height: auto;
background-repeat: no-repeat;
margin: 0;
}
Upvotes: 0
Views: 1253
Reputation: 5353
Give this a shot:
html {
min-height: 100%;
background-size: cover;
background-image: url(steve1.png);
background-repeat: no-repeat;
background-position: right bottom;
}
body{
min-height:100%;
}
Upvotes: 1
Reputation: 84
Try adding to the css:
.hero img {width:100%;}
You have to add the style to the img it self, not the container div.
Upvotes: 0