Search code examples
csssizebackground-image

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!

Solution

  • 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