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 to add a ToolTip for an icon inside my CSS file

    How avoid zurb founction styles from overriding jqgrid/jquery ui styles?

    How to get background image from internal css using xpath?

    How to center vertically and horizontally a heading text using flask-bootstrap

    how do I find out which skin Telerik's RADeditor is using by default?

    How to align pictures on a menu bar?

    How to inspect value both in Mozilla Firebug?

    DOM How to add two divs (with jQuery inside them) next to each other?

    How can I override inline styles with external CSS?

    How to find all elements with a particular CSS style, without a JS library?

    How to align floated elements to the bottom of their container

    First and Second touch of a button, how to show images at different times?

    Bootstrap - How to ensure white space on far left and far right on mobile

    How to stick to bottom on layout by using CSS?

    How to switch css based table column with nested content using jquery?

    How to customize a set of controls with CSS

    Adding bootstrap tooltip modifies the style of the element itself - how do I stop this happening?

    How can I use jQuery and/or CSS3 to change how many unordered list items are displayed?

    how to set base_url() inside css file using codeigniter, to access background_image_url inside css file?

    How do I apply CSS styling to a
    block?

    Pagination: How to display a long text as book pages?

    how to Styling a “choose file” button using css Only

    How to change the icon of a JStree node using only css?

    How to achieve a CSS footer “curtain” effect?

    How to center two blocks with some gap inbetween using CSS?

    how to build a mobile site - basics, is it all CSS?

    How to trigger self hover on child element

    CSS How to make text align background-color top line

    how to inherit classes in css

    How to hide show image link on top of another image link