Background Image Size

How to Create a Background Image that Scales with the Browser Window

When you start working with responsive designs, the first thing we consider is that the images can adjust to the screen size as well or background image size. The CSS3 property background-size is used to stretch images to fit in a window, but there is an even better use for this property:

background-size: cover;

The cover keyword tells the browser to scale the image to fit the window. The image is scaled to cover the entire screen, but the original proportions and aspect ratio are kept. The image is placed in the window as large as possible so that the entire window surface is covered.

How to Use background-size: cover; ?

Create a background image. It is better to create an image that is fairly large, as while browsers can make images smaller without a loss in quality, often when they make them larger, the images get fuzzy or blurry. Use the image as background for div with the class ‘wrapper’.

CSS for Background Image Size

.wrapper {
          background-image: url(image.jpg);
          background-repeat: no-repeat;
          background-position: center center;
          background-attachment: fixed;

          -webkit-background-size: cover;
          -moz-background-size: cover;
          -o-background-size: cover;

          background-size: cover;
        }

Add the css in you web page and test this by resizing the browser window or opening the page on different devices with different resolution.

Read more about Scaling background images

2 thoughts on “Rotate Image css3 animation

  1. Hеllo there, I thіnk үour web site may be Һavіng web
    browser compatibility problems. When I take a look at your site in Safari, it looκs fine howеver, when opening in
    IE, it’s got sօme overlapping issues.ӏ merelү wanted to give you a quick heads up!
    Aside from that, wonderful site!

Leave a Reply

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