There is such a file in svg format. How to set the red part of this svg to be filled with a picture. Codepen

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="699px"> <path fill-rule="evenodd" fill="rgb(202, 3, 3)" d="M0.000,-0.000 L1920.000,-0.000 L1920.000,615.999 C1920.000,615.999 1407.000,767.999 964.000,659.999 C496.367,545.994 0.000,615.999 0.000,615.999 L0.000,-0.000 Z"/> </svg>

  • Solution from the past issue will not work? That is, using SVG to cut the block is simple. ( ru.stackoverflow.com/questions/921896/… ... ) - Nikita R.
  • Nikita, it would be a great solution, except that I cannot create exactly the same svg oval as on the layout ( - Daniel qwaqwaqwa
  • @Danielqwaqwaqwa but for good reason abandoned my decision. In your decision to replace the image and put it on the background, you will always need to convert to base64 format. The code will always look just monstrous. In my decision to replace the image you just need to change the URL The second minus of the base64 format is not really svg - so it is not animated, not styled - Alexandr_TT
  • @Daniel qwaqwaqwa made a second example to substantiate his previous comment - Alexandr_TT

3 answers 3

To place a background image inside a curved area, you must use the svg clipPath

  • The picture is added to the svg file and therefore you will never break the layout when you change the size of the browser window, everything will change adaptively.
  • Secondly, you can always replace the image with another, changing only the URL of the image.

 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="699px"> <defs> <clipPath id="clip"> <path d="M0.000,-0.000 L1920.000,-0.000 L1920.000,615.999 C1920.000,615.999 1407.000,767.999 964.000,659.999 C496.367,545.994 0.000,615.999 0.000,615.999 L0.000,-0.000 Z"/> </clipPath> </defs> <image xlink:href="https://i.stack.imgur.com/ZdNGI.jpg" width="100%" height="100%" clip-path="url(#clip)" /> </svg>

Cutting a picture with a mask

 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="699px"> <defs> <mask id="msk1"> <path fill="white" d="M0.000,-0.000 L1920.000,-0.000 L1920.000,615.999 C1920.000,615.999 1407.000,767.999 964.000,659.999 C496.367,545.994 0.000,615.999 0.000,615.999 L0.000,-0.000 Z"/> </mask> </defs> <image xlink:href="https://i.stack.imgur.com/ZdNGI.jpg" width="100%" height="100%" mask="url(#msk1)" /> </svg>

The mask, unlike clipPath more options. You can simultaneously show both parts of the image with different transparency.

 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="699px"> <defs> <mask id="msk1"> <rect width="100%" height="100%" fill="grey" /> <path fill="white" d="M0.000,-0.000 L1920.000,-0.000 L1920.000,615.999 C1920.000,615.999 1407.000,767.999 964.000,659.999 C496.367,545.994 0.000,615.999 0.000,615.999 L0.000,-0.000 Z"/> </mask> </defs> <image xlink:href="https://i.stack.imgur.com/ZdNGI.jpg" width="100%" height="100%" mask="url(#msk1)" /> </svg>

    Option with animated mask

    This technique is universal.

    • A block can be added to any part of the HTML layout.

    • The example below shows how this can be used as an animated site header.

    enter image description here

    • Also, this technique can be used to revitalize any image within the site.
    • You can add any text to any place in the image that can be dynamically changed using JS . In the example - Site Daniel
    • Layout will never break when the browser window is resized when using any gadget.

    Implementation details

    The animation effect is achieved by changing the attribute "d" of the patch, which is part of the mask.

    <animate attributeName="d" ..../>

    The mask consists of two parts:

    1. the transparent part is defined by the patch fill="white"

    2. the translucent part is a full width rectangle

      <rect width="100%" height="100%" fill="red"/>

    More on masks here.

    See full screen, otherwise you will not see the animation, it is below

     <div class="container"> <svg viewBox="0 0 500 220" preserveAspectRatio="none" style="height: 100%; width: 100%;"> <mask id="msk1" > <rect width="100%" height="100%" fill="red"/> <g transform="translate(0 130)"> <path transform="translate(0 -100)" d="M-1.41,149.50 C235.60,121.88 316.87,102.13 501.97,149.50 L500.00,0.00 L0.00,0.00 Z" style="stroke: none; fill:white;"> <animate attributeName="d" dur="10s" repeatCount="indefinite" values=" M-1.41,149.50 C235.60,121.88 316.87,102.13 501.97,149.50 L500.00,0.00 L0.00,0.00 Z; M-1.41,129.77 C178.61,82.39 314.61,149.50 501.97,149.50 L500.00,0.00 L0.00,0.00 Z; M-1.41,149.50 C235.60,121.88 316.87,102.13 501.97,149.50 L500.00,0.00 L0.00,0.00 Z" /> </path> </g> </mask> <image xlink:href="https://i.stack.imgur.com/J8XTf.jpg" width="100%" height="100%" mask="url(#msk1)" /> <text x="50" y="155" font-size="36" fill="red">Site Daniel </text> </svg> </div>

    • and what role does rect play there? - MaximLensky
    • @PaulVarshavsky you read my article on masks? Here for reference - en. Stackoverflow.com/a/919187/28748 section Обработка фона вне маски - Alexandr_TT
    • yes yes ... ATP exactly for sure - MaximLensky
    • one
      Thank you so much - Daniel qwaqwaqwa

    If you have a region in svg, you can easily use it as a mask for your background property.

     .custom-block{ height: 800px; -webkit-mask-image: url('data:image/svg+xml;base64,PHN2ZyANCiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciDQogeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiDQogd2lkdGg9IjEwMCUiIGhlaWdodD0iNjk5cHgiPg0KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiAgZmlsbD0icmdiKDIwMiwgMywgMykiDQogZD0iTTAuMDAwLC0wLjAwMCBMMTkyMC4wMDAsLTAuMDAwIEwxOTIwLjAwMCw2MTUuOTk5IEMxOTIwLjAwMCw2MTUuOTk5IDE0MDcuMDAwLDc2Ny45OTkgOTY0LjAwMCw2NTkuOTk5IEM0OTYuMzY3LDU0NS45OTQgMC4wMDAsNjE1Ljk5OSAwLjAwMCw2MTUuOTk5IEwwLjAwMCwtMC4wMDAgWiIvPg0KPC9zdmc+'); background: yellow; -webkit-mask-repeat: no-repeat; width: 100%; } body{ background: blue; } 'data: image / svg + xml; base64, PHN2ZyANCiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciDQogeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiDQogd2lkdGg9IjEwMCUiIGhlaWdodD0iNjk5cHgiPg0KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiAgZmlsbD0icmdiKDIwMiwgMywgMykiDQogZD0iTTAuMDAwLC0wLjAwMCBMMTkyMC4wMDAsLTAuMDAwIEwxOTIwLjAwMCw2MTUuOTk5IEMxOTIwLjAwMCw2MTUuOTk5IDE0MDcuMDAwLDc2Ny45OTkgOTY0LjAwMCw2NTkuOTk5IEM0OTYuMzY3LDU0NS45OTQgMC4wMDAsNjE1Ljk5OSAwLjAwMCw2MTUuOTk5IEwwLjAwMCwtMC4wMDAgWiIvPg0KPC9zdmc +'); .custom-block{ height: 800px; -webkit-mask-image: url('data:image/svg+xml;base64,PHN2ZyANCiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciDQogeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiDQogd2lkdGg9IjEwMCUiIGhlaWdodD0iNjk5cHgiPg0KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiAgZmlsbD0icmdiKDIwMiwgMywgMykiDQogZD0iTTAuMDAwLC0wLjAwMCBMMTkyMC4wMDAsLTAuMDAwIEwxOTIwLjAwMCw2MTUuOTk5IEMxOTIwLjAwMCw2MTUuOTk5IDE0MDcuMDAwLDc2Ny45OTkgOTY0LjAwMCw2NTkuOTk5IEM0OTYuMzY3LDU0NS45OTQgMC4wMDAsNjE1Ljk5OSAwLjAwMCw2MTUuOTk5IEwwLjAwMCwtMC4wMDAgWiIvPg0KPC9zdmc+'); background: yellow; -webkit-mask-repeat: no-repeat; width: 100%; } body{ background: blue; } 
     <div class="custom-block"></div>

    Note:

    1) in mask-image: you can transfer the image in the same way as in background-image

    2) when a diva has a mask-image property, the background will work within it, you can easily insert a picture and a color and a gradient there and generally everything that the background property supports

    3) about support you can see here https://caniuse.com/#feat=css-masks

    • one
      I know how unpleasant when they give a decision, then they will take it back. These virtual +15, of course, do not solve anything. This is all a gamble. But it’s still unpleasant, I know it myself :))) Therefore, I compensated you for the loss of your other good answers And congratulate you on the first round number! - Alexandr_TT
    • one
      @Alexandr_TT before the new year wanted to get it)) Thank you and happy new year to you) - lazyproger
    • Happy New Year and the best holiday for you! Let what you dream about and succeed, what you want - Alexandr_TT