CSS stretch or fit background image

Question

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

Answer 1

EDIT:

You tried background-size: 100% ,
CSS interprets this as 100% width, automatic height which will look like this:

background-size: 100% auto;

What you want is the second argument (height) to be 100% too, so you should do this:

background-size: 100% 100%;

END EDIT

Try:

background-size: cover;

This will fit the width or height and overflow the rest

Or:

background-size: contain;

This will make the image as large as possible without changing it's aspect ratio.

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

Answer 2

You can try:

background: url('Your image URL') 100%;

or

background: url('Your image URL') 100% no-repeat;

Answer 3

Try this CSS rule:

background-repeat: no-repeat;
background-attachment: scroll;
background-position: center center
background-size: cover; // this makes img full-screen (full-width & full-height)