0

I have an SVG image (svg tag with path) and I want to make it into a whole-page fixed background. I managed to do that, but unfortunately, it's attached to the left and top side of the page, it's not centered when in mobile, etc. Is it possible to center it horizontally and vertically?

.gradbg{
    min-width:100%;
    height:100%;
    position:fixed;
    top:0;
    z-index:-1;
    display:flex;
    align-items:center;
    justify-content:center;
}

.gradString{
    object-fit:cover;
    width:100%;
    height:100%;
}

.gradPath{
    fill:url(#Gradient1);

}
        <div class="gradbg">
        <svg xmlns="http://www.w3.org/2000/svg" class="gradString">
            <defs> <linearGradient id="Gradient1">
                    <stop class="ucpgrad1bg" offset="0%"/>
                    <stop class="ucpgrad2bg" offset="25%"/>
                    <stop class="ucpgrad3bg" offset="50%"/>
                    <stop class="ucpgrad4bg" offset="75%"/>
                    <stop class="ucpgrad5bg" offset="100%"/>
            </linearGradient></defs>
<path class="gradPath" d="M1858.4-39.1c.1,5.4-1.9,10-4.9,14.3-39.2,56.7-66.4,125.1-84.2,191.3-13.6,50.8-21.5,105.5-23.7,157.8s-14.3,107.4-40.7,152c-27.6,46.6-61.2,88.6-95.3,130.5A677.1,677.1,0,0,0,1524.8,740c-8.2,16.9-16,34.2-21.6,52.1-16.8,53.3-11.6,109.5-2,163.5,8.5,48.1,18.8,95.9,28.2,143.7,0-.9-22.1.7-24.4.2-7.2-1.4-6.1-10.3-7.2-16.5q-9.6-57.6-15.1-115.6c-4.8-50.8-8.1-98.8,2.8-149,19.6-90.7,68.4-177.3,125.7-249.5,31.5-39.8,58.9-83,75.5-131.4,2-5.8,3.8-11.7,5.5-17.6,13.6-49,14.6-100.1,20.1-150.4s18.3-101.7,34.9-150.3,38.1-96.5,65.1-140.3c1.3-2.1,9.3-18,11.1-18Z           M248.7,1098.9c-1.3-1.7,1.1-3.6,2.7-5.7,3.7-5.2,7.6-10.2,11.6-15.2,8-9.9,16.4-19.4,25.3-28.5a408.6,408.6,0,0,1,57.8-49.7c11.3-8.1,22.6-16.1,33.5-24.8s19.9-18.1,29.7-27.3c29.4-27.2,57.4-55.7,80.5-88.5,8.1-11.5,15.8-23.3,23-35.4,13.7-23.2,24.2-48.5,34.2-73.5s20.3-53.2,29.1-80.3c15.1-46.4,24.6-94.1,46.2-138.1a339.6,339.6,0,0,1,24.5-42.1c4.2-6.3,9.1-12.2,12.9-18.8s9.8-14.2,15.1-20.7c17.4-21.3,37.3-40.3,54.2-62,11.2-14.5,21.5-29.4,33.4-43.4s23.2-29.2,33.9-44.4A320.8,320.8,0,0,0,827.4,245a160.1,160.1,0,0,0,13.7-53.2c1.4-18.9.8-37.8-2.9-56.6C832.8,107,826,79.4,816,52.6c-6.4-17.2-12-34.7-19.9-51.1C790.9-9.1,785.6-19.6,781-30.4a15.4,15.4,0,0,1-1.5-8.7h29a176.6,176.6,0,0,0,9.6,24,117.1,117.1,0,0,1,8.2,21.3c7.4,27.3,17.1,53.8,22.5,81.7a550.9,550.9,0,0,1,9.1,65.1c.8,12-1.1,24.2-2,36.3a145.7,145.7,0,0,1-14.8,53c-8.8,17.6-18.3,34.9-30.2,50.9-8.5,11.6-17.6,22.7-26.8,33.8-4.3,5.2-8.9,10.1-13,15.5l-13.4,17.7c-4.3,4.2-7.7,10-11.4,14.8l-11.5,15.2c-7.7,10.1-15.6,19.6-23.7,29.2a532.4,532.4,0,0,0-62.6,89.5,359.5,359.5,0,0,0-20.3,42.5,209.7,209.7,0,0,0-7.8,25.6c-2.2,9.5-4.3,19.1-6.6,28.7q-6.6,28.6-13.7,57.2c-3.7,15-7.5,29.7-12.3,44.3-16.4,50.8-35.6,100-63.5,145.8-5.8,9.5-12.1,18.4-18.6,27.4s-11.4,15.1-17.2,22.6c-15.9,20.3-36.4,37.9-55.6,55s-40.5,34.4-61.8,50.2c-19.5,14.4-40.7,26.2-59.7,41.4a277,277,0,0,0-31.1,29.2c-4.8,5.3-9.4,10.7-13.8,16.4-2.6,3.2-2.8,4.3-6.8,4.5-2.3.1-8,1.1-9.9,0ZM-8.4,915.7c2.3-.9,3.4-3.1,4.9-4.8,21.1-23.4,43.7-45.3,66.3-67.3,12-11.7,22.8-24.6,34.3-36.9s25.7-25.7,38.3-38.6c14.2-14.6,28.1-29.4,42.1-44.1a228,228,0,0,0,51.9-86c2.7-8,4.4-16.3,7.2-24.1s5.7-17.8,9.2-26.5c6.6-16.9,12.2-34.1,20.8-50.2,7-12.9,17.6-23.2,26.3-34.9s18-18.6,26.9-28,15.3-17.5,23.3-25.9c18.6-19.3,38.1-37.8,58.1-55.7A210.9,210.9,0,0,0,434,355.4c10.6-15.5,20.7-31.3,29.3-48,5.8-11.4,13.3-21.9,19.3-33.2s11.5-22.8,16.5-34.6c13.5-32.2,27.2-66,27.1-101.4-.1-27.8-1.3-55.6-2.1-83.4-.6-21.5-.9-43-2-64.4-.5-10.2.1-19.9,3.4-29.5h29c-8.7,27.9-5.3,56.8-6.8,85.2-1.7,31.1-1.8,62.3-3.4,93.4-2.3,45-17.9,90.9-36.8,131.6-6.3,13.6-12.7,27.1-20.9,39.6a39.7,39.7,0,0,0-3,5.8c-7,14.5-13.9,29-22.7,42.6-3.9,6.1-7.6,12.4-11.3,18.7-10.2,17.4-25.2,30.4-38.7,44.8s-25.1,26.3-37.6,39.5c-6.1,6.4-13.1,11.9-18.9,18.5-10.3,11.6-22.3,21.3-33.3,32.1-7.1,7-12.9,15.5-18.8,23.8-14.6,20.2-23.7,43-33.8,65.3-6.8,14.9-11.7,30.4-18.1,45.4a398.4,398.4,0,0,1-17.5,36c-6.2,11.3-14.1,21.1-23,30.5-12.8,13.7-25.9,27.3-39.5,40.1s-28.6,26.2-43.2,38.9l-1.3,1.1C115.2,803,105,812.9,95,822.9c-14.6,14.5-30,28.3-45.8,41.6-19.5,16.4-38.5,33.4-55,53a13.8,13.8,0,0,1-2.6,2.2ZM814.9,1099.7c-18.2-90.3-29.2-183-18.5-274.5,1.9-16.4,4.5-32.8,7.9-48.9s7.6-32.4,12.6-48.3a456.9,456.9,0,0,1,17.5-46.5,366.3,366.3,0,0,1,18.5-37.1c6.9-12.1,14.9-23.1,23-34.3,16-22.4,32.3-44.5,49.1-66.3l1.4-1.8q25.2-32.4,51.4-63.8c33.9-40.6,72.3-76.9,108.3-115.5a517.7,517.7,0,0,0,49.4-62.1c7.7-11.4,14.2-23.7,21.2-35.5a681,681,0,0,0,46.3-94.8c13.5-34.2,27.7-67.6,43.8-100.8q23-47.2,49-93.1c3.3-5.7,8.1-14.6,15.2-15.9,8.9-1.6,19.5-.6,28.4.6.7,5.5-9.4,17-12.4,21.9L1312.6,7.1c-18.7,31.8-36.2,63.8-53.2,96.7s-34,63.9-49.3,96.7c-8.2,17.4-14.4,36.2-24.1,52.8-7.7,13.1-14.4,27-22.6,39.9a423.3,423.3,0,0,1-81.9,94.6,370.7,370.7,0,0,0-28.5,27.6c-5.9,6.4-11.9,12.8-18,19.1-15.7,16.3-32,31.9-48.4,47.4-9.4,8.9-17.4,18.9-25.2,29-11.8,15.1-24.3,29.6-36.9,44.1-6.1,7.1-12.6,13.8-18.4,21.2-14,17.9-28.5,36.5-40.9,55.7a341.6,341.6,0,0,0-23,43A363.6,363.6,0,0,0,825.3,721a435.6,435.6,0,0,0-11.1,48.1,473.1,473.1,0,0,0-5.8,49.1c-.6,8.5-.9,17-1.1,25.6-1.4,86.3,16.7,171.6,35.4,255.9H814.9ZM1468.1-38.3a10.2,10.2,0,0,1,1.8,1.3c-42.5,74.3-47.9,163.9-45.2,249.5,1.7,51,5.8,101.9,5.6,152.9-.1,23.3-1,46.9-3.4,70-4.3,39.5-14.1,78.3-22.5,117q-11.6,52.8-27.1,104.7c-11.5,38-24.9,76.6-41.9,113-23.7,50.6-57.9,95.4-90,141s-67,93.4-101.6,139.2l-25,32.9c-3.6,4.6-6.5,10.3-11.8,12-2.8.9-17.4-2.7-18.9-.6l104.7-145.4c43-59.8,88-120.1,122-185.5A1009.9,1009.9,0,0,0,1393,562.3c7.3-27.3,13.1-55.3,18-83.2s9.2-55.9,9.7-83.8.8-57.8-1-86.8-5.1-59.2-7-88.9c-2.3-37.5-5.8-74.9-4.6-112.3s5.9-74.7,17.1-110.4c.4-1.6,1.7-3.8,1.7-5.4,3.2-9.7,7.2-19.6,14.9-26.3S1460.3-43.3,1468.1-38.3ZM1927.7,478.5c-3.3,6.5-13.6,12.6-18.8,17.2l-23.6,21.4c-30.5,27.9-60.3,56.6-87.6,87.7-34.6,39.2-65.5,82.5-87,130.5-11.1,24.8-20.3,50.9-26.1,77.5s-5.9,55.3-6.7,83c-.4,12.2-.9,24.4-2.1,36.6a939.4,939.4,0,0,1-22.5,128.9c-2.7,11-5.9,22.4-13.5,30.7s-21.2,12.4-30.5,6c-2.2-1.5,14.7-46.7,16.3-51.8,5.8-17.8,11.1-35.9,15.7-54a877.6,877.6,0,0,0,20.6-110.5c2.8-22.9,2.6-46.1,6.2-68.9,4-25.9,12.8-50.7,24.3-74.2,12.5-25.2,28.6-48.2,43.9-71.7,30.2-46.5,66-90.5,101.6-132.9,11.5-13.8,23.3-27.4,35.2-40.9,14.3-16,31.7-42.9,55.3-45.3-2.1.5,1,26.7-.4,30ZM-7.8,574.1c1.2-2.1,3.9-3,6.1-4.3l11.5-6.7c15.2-9,30.1-18.7,43.8-30a197.2,197.2,0,0,0,46.3-55.4c13.4-23.9,20.1-51.4,28.7-77.2,6.6-20.1,12.9-40.4,20.6-60.1s15.2-42.5,25.1-62.8c8.8-18.4,17.7-36.8,25.9-55.5s18-37.5,26.1-56.5c8.7-20.8,21.4-39.1,33.5-57.7C274.6,85.2,290,62.8,307.4,42Q326,19.7,345.1-2.4c11.4-13.4,25.1-23.8,38.5-34.6.7-.6,1.3-1.4,2-2.1h26a6.5,6.5,0,0,1-4,7.4c-10.4,4.3-18.1,12.2-26.9,18.7-13.5,9.9-25.3,21.6-36.4,33.9S321.1,47,310.4,60.8s-22.3,29.8-32.7,45.3c-5.3,8-10.6,16.1-15.7,24.3s-10.5,15-15.2,22.9l-1.7,2.9c-7.2,13.1-14.7,26-21.3,39.5s-11.4,26.2-17.5,39-12.1,25.1-17.6,38a709.4,709.4,0,0,0-28.3,78.7c-.8,2.8-1.8,5.5-2.6,8.3-3.5,12.5-7.1,24.9-10.9,37.3s-7.6,23.3-10.7,35.2c-7.8,30.4-18.7,59.9-36.9,85.8a210.5,210.5,0,0,1-32.9,37,211.9,211.9,0,0,1-19.6,15.5L26.9,584.7l-4.7,3.2C15,592.7,7.9,598-.2,601.6c-2.6,1.1-5.3,1.9-8.2,1.2-.6-.2-.4-24.6,0-26.9A4.8,4.8,0,0,1-7.8,574.1ZM1928.4,909.7c-19.5.3-36.6,9.1-53.7,17-12.1,5.6-21.6,15.5-31,25.2-19.2,19.8-30.7,44.9-37.6,71.5-6.3,24.9-8.7,50.6-11.1,76.2a10,10,0,0,1-9.5,0c-7.2-4-3.3-9.9-3-16.1.5-10.6,1.4-21.2,2.6-31.8a496,496,0,0,1,9.9-56.8c3.9-16.4,13.6-33.1,23.3-46.7a167.9,167.9,0,0,1,39.1-38.9c15.8-11.2,33-18,50.8-25.2,6.3-2.6,13.3-2.9,20.2-2.4ZM-8.4,230.8c12-17.1,23.7-34.4,34.3-52.5,6.9-11.7,14.1-23.4,20.9-35.1,5.5-9.4,9.7-19.6,14.6-29.4q11-22.2,20.4-45c9-21.9,17.3-44.2,23.1-67.2,3.1-12.3,7.1-24.3,9.2-36.8.2-1.3.3-2.6.5-3.9h25c-.8,9.2-3.7,17.9-6.5,26.5-8.2,25-17,49.6-28.2,73.5s-24.3,48.3-37.8,71.8c-18.9,33-40.9,63.7-63.9,93.9-2.7,3.6-5,7.4-7.4,11.2-1.1,1.7-2.1,3.5-4.2,4Z"/>
        </svg>
        </div>
Gibon
  • 89
  • 1
  • 7
  • Serve the SVG like a raster image and then use CSS to center it. Namely, `background-image` to set the image as background and `background-position` to center it. – Shreshth Feb 09 '22 at 08:55
  • This way I won't be able to apply custom gradient. I managed to find a workaround (instead of stripes image I did background with stripes cut and gradient under the image), but still I'd like to know a better solution. – Gibon Feb 09 '22 at 09:00
  • See if you can use this approach and still be able to apply the gradient. https://stackoverflow.com/questions/10768451/inline-svg-in-css – Shreshth Feb 09 '22 at 09:02

0 Answers0