CODEWITHSUNDEEP
htmlcssbackground-image
user1968859
user1968859

Reputation: 23

css responsive background image not showing

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

Answers (2)

Eric Goncalves
Eric Goncalves

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

madaaah
madaaah

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

Related Questions