• Scale to full width background in CSS

    by  • April 19, 2015 • Blog • 0 Comments

    In this tutorial I will show you a very simple way to Scale to full width background in CSS. Now let ‘s do it.

    Responsive-Fullscreen

    You just need to define a CSS rule with CSS3 as below

    With another way to scale image, you can try this way

    Scaling an image with CSS is not quite possible, but a similar effect can be achieved in the following manner, though.

    Use this markup:

    with the following CSS:

    and you should be done!

    In order to scale the image to be “full bleed” and maintain the aspect ratio, you can do this instead:

    It works out quite nicely! If one dimension is cropped, however, it will be cropped on only one side of the image, rather than being evenly cropped on both sides (and centered). I’ve tested it in Firefox, Webkit, and Internet Explorer 8.

    Leave a Reply

    Your email address will not be published. Required fields are marked *