SVG's as background

[linusgrundstrom]

Hi,

I'm rebuilding a web using several svgs as full-screen backgrounds for specific sections. Everything is working fine for laptop, devices and phones but when viewing the page on higher screen resolutions the SVG gets cropped (images provided). I've also added the SVG code for the image

Normal screen size (macbook 13inch)

 

Larger screen

SVG Image

https://svgshare.com/i/N_g.svg

SVG Code

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1920.001" height="1381.983" viewBox="0 0 1920.001 1381.983">

<defs>

<clipPath id="clip-path">

<path id="Union_16" data-name="Union 16" d="M.5,1381.982V244.221H0V1.279C285.784,65.712,671.979,43.855,1034.513,22,1392.62.41,1727.643-21.18,1920,40.4V244.221h-.5V1381.982Z" transform="translate(1920 2343.389) rotate(180)" fill="#fff" stroke="rgba(0,0,0,0)" stroke-miterlimit="10" stroke-width="1"/>

</clipPath>

<clipPath id="clip-path-2">

<rect id="Rectangle_151" data-name="Rectangle 151" width="1920" height="1417" transform="translate(0 930)" fill="#fff" stroke="#707070" stroke-width="1"/>

</clipPath>

<linearGradient id="linear-gradient" x1="0.329" y1="0.027" x2="0.851" y2="0.851" gradientUnits="objectBoundingBox">

<stop offset="0" stop-color="#ffa400"/>

<stop offset="0.439" stop-color="#ffb632"/>

<stop offset="1" stop-color="#ffa400"/>

</linearGradient>

</defs>

<g id="Mask_Group_25" data-name="Mask Group 25" transform="translate(0.001 -961.406)" clip-path="url(#clip-path)">

<g id="Mask_Group_6" data-name="Mask Group 6" clip-path="url(#clip-path-2)">

<path id="Path_102" data-name="Path 102" d="M2160.274,305.266,1498.951,785.747a570.04,570.04,0,0,0-207.082,637.33l252.6,777.431A570.04,570.04,0,0,0,2086.618,2594.4h817.443a570.049,570.049,0,0,0,542.146-393.892l252.6-777.431a570.052,570.052,0,0,0-207.082-637.33L2830.4,305.266A570.041,570.041,0,0,0,2160.274,305.266Z" transform="matrix(0.891, -0.454, 0.454, 0.891, -1926.862, 1984.253)" fill="url(#linear-gradient)"/>

</g>

</g>

</svg>

CSS for the background:

.content-section.bg-img-defined {
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
}

Could someone help me understand what to do to get this working?

Kind regards

[Jake_Lett]

I can't tell if your background section has content in it, so you may need to specifiy a minimum height. Also to prevent the cropping, change the background-position so it is vertically aligned to the top and horizontally centered. Here is a demo:https://codepen.io/JacobLett/pen/NWNqedy

.content-section.bg-img-defined {
min-height:500px;
background-position: top center;
background-repeat: no-repeat;
background-size: cover;
}

---

Jacob Lett

Freelance HubSpot CMS Developer & Web Designer

---

Located in Michigan, USA

Get a free estimate now ›

---

[linusgrundstrom]

Hi! @Jake_Lett

On most places the background has content so your code actually solved almost every problem but on some pages I'm just assuming that the content can't strech the background enough on bigger screen resolutions. Is there a work around for that? Should the SVG be made with less height?

Kind regards,

Linus

[Jake_Lett]

Hi Linus. Could you share a URL of the page showing the issue? It is hard to say what is going on. You could also experiement with contain instead of cover.

[linusgrundstrom]

Hi @Jake_Lett 

I've sent you a PM!

[Jake_Lett · Accepted solution]

I saw your pages and suggest creating a variation class called .align-bottom and add this to your container you want the background image to be aligned to. This class will position the image towards the bottom and bleed the top edge.

.content-section.bg-img-defined.align-bottom {
background-position: bottom center;

}

[linusgrundstrom]

Hi again @Jake_Lett 

This is the setup in HubSpot with classes 

All of the css involved with content-section and bg-img

/* ==========================================================================
   Content section
   ========================================================================== */

.content-section {
    padding-top: 100px;
    padding-bottom: 100px;
    position: relative;
}

.content-section:not([data-parallax]):not([class*="overlay-"]) {
    background-color: #fff;
}

.content-section.bg-img-defined {
min-height:500px;
background-position: top center;
background-repeat: no-repeat;
background-size: cover;
}

.content-section.bg-img-defined.align-bottom {
background-position: bottom center;
}

.content-section.bg-pattern {
    background-repeat: repeat;
    background-size: auto auto;
}

.content-section .bg-img img {
    display: none;
}

[linusgrundstrom]

I think that if I somehow could switch the class between bottom and top that would solve the problem! But I can't seem to get it to work

[linusgrundstrom]

Hi again @Jake_Lett 

I've added the change to the .css 

I've added the align-bottom but if I remove bg-img all the content will be placed below the SVG and not on it.

Did you get it to work?