m0j1 m0j1 - 2 months ago 7x
CSS Question

CSS stretch or fit background image

I wanted to stretch or fit my background image using css so it is always in 100% of width and height no matter what the screen size is. This is asked many times and everyone suggests to use background-size:100% and it will work. but using background-size only fits my image's width and the height is still cropped.

I'll appreciate if someone can help me with this.

Thans very much



You have tried background-size: 100% what css does when you do that is this:

background-size: 100% auto;

What you want is the second one to be 100% too, so you should do this:

background-size: 100% 100%;



background-size: cover;


background-size: contain;

cover will fit the width or height and overflow the rest, and contain will make it the largest possible without touching aspect ratio.

You can read more about the css3 background-size property HERE