CODEWITHSUNDEEP
csssizebackground-image
AndyiBM
AndyiBM

Reputation: 379

CSS: Background image to stretch and squash to 100% area of div with no overflow no repeat

I would like to have a graphic shape background image stretch to fit the entire area of a responsive dynamically-changing div (containing text) without any need to retain proportion, so that the image stays at 100% width and height without any overflow.

I've tried using the usual background-size set to 'cover', 'contain' and '100% 100%' but these all seem to retain proportion. I thought "100% 100%" would do it, but the height doesn't stretch when the width condenses and the text wraps over more lines.

Is this possible?

Many thanks!

Upvotes: 0

Views: 2015

Answers (1)

Raushan Kumar
Raushan Kumar

Reputation: 328

You can also try

background-size:100% 100% with

body { width:100% ; height:100%;}

Or

Use object-fit: fill;

fill:The entire object will completely fill the box. If the object's aspect ratio does not match the aspect ratio of its box, then the object will be stretched to fit.

refer:https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit

Upvotes: 3

Related Questions