0

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!

AndyiBM
  • 379
  • 5
  • 17
  • 1
    background-size:100% 100%; See: https://stackoverflow.com/questions/1150163/stretch-and-scale-a-css-image-in-the-background-with-css-only – VA79 Jul 28 '17 at 11:09
  • I'm not sure if this helps you but take a look at `object-fit` https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit – Muthu Kumaran Jul 28 '17 at 11:10
  • Thanks Muthu... doesn't apply to a background image, but it really OUGHT to be another option for background-size. – AndyiBM Jul 28 '17 at 11:16
  • VA79 - 100% 100% doesn't work for me... does that only work where dimensions are declared (or vw and vh)? – AndyiBM Jul 28 '17 at 11:18

1 Answers1

3

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

Raushan Kumar
  • 328
  • 1
  • 2
  • 10
  • or try background-size:100% 100% with body { width:100% ; height:100%;} – Raushan Kumar Jul 28 '17 at 11:22
  • Thanks Raushan, but the object-fit doesn't have an effect - I suspect it's not useable on a background image. I've tried adding width:100% and height:100% to my div to use the background-size:100% 100% but it's not stretching the image to the edges. I'm wondering whether I have some other property set that is preventing this from working properly. I need to look closer. – AndyiBM Jul 28 '17 at 11:47
  • Found it! I'd slipped in an .svg background image (with png fallback) but the svg won't reshape itself. When I removed it, the png reshapes/resizes as required. – AndyiBM Jul 28 '17 at 14:03
  • This is new to me .Thank You for sharing. :) – Raushan Kumar Jul 28 '17 at 15:26