Clever Geek Handbook

CSS stretch or place background image

I wanted to stretch or fit my background image using css so that it is always 100% width and height regardless of screen size. This is asked many times and everyone suggests using a background size of 100% and it will work. but using the background size is only suitable for my image width and the height is still clipped.
I will appreciate if someone can help me.
Thans very much

+3


source to share


3 answers


EDIT:

Have you tried background-size: 100%

,
CSS interprets this as 100% width, automatic height

which will look like this:

background-size: 100% auto;

You want the second argument (height) to be 100% too, so you have to do this:

background-size: 100% 100%;

END EDIT

Try:



background-size: cover;

This will match the width or height and overflow the rest

Or:

background-size: contain;

This will make the image as large as possible without changing its aspect ratio.

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

+11


source


You may try:

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


or

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


source


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)
+1


source






More articles:


All Articles