topic Re: SVG's as background in CMS Development

SVG's as background

linusgrundstrom — Mon, 10 Aug 2020 06:24:20 GMT

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

Re: SVG's as background

Jake_Lett — Mon, 10 Aug 2020 13:27:10 GMT

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 ›

Re: SVG's as background

linusgrundstrom — Mon, 10 Aug 2020 14:05:45 GMT

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

Re: SVG's as background

Jake_Lett — Mon, 10 Aug 2020 19:42:57 GMT

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.

Re: SVG's as background

linusgrundstrom — Tue, 11 Aug 2020 06:28:07 GMT

Hi @Jake_Lett

I've sent you a PM!

Re: SVG's as background

Jake_Lett — Tue, 11 Aug 2020 08:23:42 GMT

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-bottombackground-position: bottom center;

Re: SVG's as background

linusgrundstrom — Tue, 11 Aug 2020 08:39:56 GMT

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?

Re: SVG's as background

linusgrundstrom — Tue, 11 Aug 2020 08:53:05 GMT

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

Re: SVG's as background

linusgrundstrom — Tue, 11 Aug 2020 14:43:39 GMT

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;
}