CODEWITHSUNDEEP
csshtmlresponsive-design
user2794426
user2794426

Reputation:

How to crop image in HTML 5?

I am working on a responsive site in which background is a large image as seen in the first image.

If I reduce the width of the browser automatically left and right edges should get trimmed like as shown in the second image. Center is focused.

How to do this?

screen1

screen2

Upvotes: 1

Views: 291

Answers (1)

Barnadeep Bhowmik
Barnadeep Bhowmik

Reputation: 11

@AngelGuy ,

use the following css :

background-image:url('bigImg.jpg');
background-size:cover; 
background-repeat:no-repeat;

For a particular screen size with fixed height, resizing the width of the browser will not resize the image, the edges of the image will be trimmer.

Upvotes: 1

Related Questions