css responsive background image not showing


Tags: html,css,background-image

Problem :

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;

  }


Solution :

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%;
}

    CSS Howto..

    How do I light up an entire single row by hovering on a span in one of the columns?

    how to add inline css to rails link_to helper

    How to place buttons next to each other using css Bootstrap

    How to load CSS into CodeIgniter

    How to set the jquery draggable with margin left?

    How to avoid WebKit contentEditable copy-paste resulting in unwanted CSS?

    How can I place html text on top of a canvas flot chart?

    How to run/debug Web Application project without cache/cookies?

    How to remove curved line in HTML/CSS

    How to position the scaled elements (jQuery, css)

    How to change the button color when it is active using bootstrap?

    How to design a CSS for a centered floating confirm dialog?

    How do i prevent my CSS affecting external plugins?

    How to convert a CSS3 2D animatuon to a 3D Transform

    I am having a hard time figuring out how to dynamically setup a timeline

    How to make layout like notes in Google Keep using CSS?

    How to fix every element on the same position, when browser is resized?

    How to revise the css transitions with a delay

    How to FadeIn a parent element and then it's child elements with a slight Delay (CSS Only)

    How to give menu sub menu options

    How to run a CSS animation infintely forwards

    How to implement this logic in CSS?

    HTML / CSS - How to remove a gap between the header and a horizontal menu

    How can I remove the spacing above a block element in CSS?

    How can I use a data attribute to set a background-image in CSS?

    How to bounce to top with button on image with CSS

    My pure CSS dropdown isn't working, anybody knows how to fix it? [duplicate]

    asp.net mvc view css not showing as expected

    How would use span to create different styles between selected characters and the rest?

    how to display tabs in more than one row having the extra tabs coming one row up rather than one row below?