Search This Blog

Thursday, February 20, 2014

Tips and Tricks, Flash, HTML5, CSS3, Jquery, Media




Background image fit to Browser when resizing

Stretch 

html, body {
    margin:0;
    padding:0;
    height: 100%;
}
#background {
    background : #000000 url("your image") no-repeat bottom left;
    background-size: 100% 100%;
    min-height:100%;
}

Cover

html{
    /* This image will be displayed fullscreen */
    background:url('background.jpg') no-repeat center center;

    /* Ensure the html element always takes up the full height of the browser window */
    min-height:100%;

    /* The Magic */
    background-size:cover;
}

body{
    /* Workaround for some mobile browsers */
    min-height:100%;
}

No comments:

Post a Comment