Tell me how to solve this problem?

There is Bootstrap 4 - Row, he has a background-image file in the svg format specified in styles in a separate class. Row automatically stretches the width of the entire page with a fixed size in height.

Question: How to make background-image always fill 100% of Row dimensions - in height and width . That is, it is necessary that the background-image be stretched to the entire Row without preserving the proportions, since our height is fixed and the width depends on the screen resolution.

    2 answers 2

    Property background-size?

    { background-image: url(images/background.svg); background-size: 100% 100%; }

    To preserve the proportions, use special contain or cover values.

    Sauce: https://www.quackit.com/html/codes/html_stretch_background_image.cfm

    • Thanks for the answer, and for the link - in this example everything works, and really helped me to understand what is wrong. But in the example, gif or png files are used - in the case of them everything is ok, and I have svg - and for some reason this does not work with svg = ( - Andrew Murena

    I found a solution to my problem: in the case of SVG files, in order for everything to stretch normally on the whole screen without saving proportions , it is imperative that preserveAspectRatio = "none" is specified in the svg file, then everything will stretch normally as well as with png and jpg files .

    Here is what happened:

     <svg width="1440px" height="381px" viewBox="0 0 1440 381" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">

    It became:

     <svg viewBox="0 0 1440 381" preserveAspectRatio="none" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">

    Maybe someone will come in handy. Thank!