# SVG's as background

**URL:** <https://community.hubspot.com/t/svgs-as-background/23973>\
**Category:** CMS Development\
**Created:** [August 10, 2020, 6:24am UTC](https://community.hubspot.com/t/svgs-as-background/23973 "2020-08-10T06:24:20Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![linusgrundstrom](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/linusgrundstrom/32/73373_2.png) [@linusgrundstrom](https://community.hubspot.com/u/linusgrundstrom)\
**Post date:** [August 10, 2020, 6:24am UTC](https://community.hubspot.com/t/svgs-as-background/23973/1 "2020-08-10T06:24:20Z")

</div>

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)**

 ![30103iEF362530D7D40C75.png](https://d2qpr2jzcazej7.cloudfront.net/original/3X/2/f/2f71ea52467c5adf7314fac1bd0de92915b9f216.png)

**Larger screen**

\*\*

 ![30104i130B17BFA1E40970.png](https://d2qpr2jzcazej7.cloudfront.net/original/3X/f/5/f5c8d0b402f293772d0b0a399d34b663ea96d906.png)  
\*\*

**SVG Image**

[https://svgshare.com/i/N\_g.svg](https://svgshare.com/i/N_g.svg)

**SVG Code**

```auto
<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

---

<div class="post-metadata">

**Author:** ![Jake\_Lett](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/jake_lett/32/45178_2.png) [@Jake\_Lett](https://community.hubspot.com/u/Jake_Lett)\
**Post date:** [August 10, 2020, 1:27pm UTC](https://community.hubspot.com/t/svgs-as-background/23973/2 "2020-08-10T13:27:10Z")

</div>

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](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](https://bootstrapcreative.com/hubspot-designer/?utm_source=HubSpotCommunity&utm_term=tagline)

* * *

[  
  ![28844i368E9AAC739341A8.png](https://d2qpr2jzcazej7.cloudfront.net/original/2X/0/0fa6bcd420e080a29fc75d42359cf2879b6e162d.png)  
 ](https://bootstrapcreative.com/hubspot-designer/?utm_source=HubSpotCommunity&utm_term=logo)

Located in Michigan, USA

[**Get a free estimate now ›**](https://bootstrapcreative.com/contact-us/?utm_source=HubSpotCommunity&utm_term=free%20estimate)

* * *

---

<div class="post-metadata">

**Author:** ![linusgrundstrom](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/linusgrundstrom/32/73373_2.png) [@linusgrundstrom](https://community.hubspot.com/u/linusgrundstrom)\
**Post date:** [August 10, 2020, 2:05pm UTC](https://community.hubspot.com/t/svgs-as-background/23973/3 "2020-08-10T14:05:45Z")

</div>

Hi! [@Jake\_Lett](https://community.hubspot.com/t5/user/viewprofilepage/user-id/72866)

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

---

<div class="post-metadata">

**Author:** ![Jake\_Lett](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/jake_lett/32/45178_2.png) [@Jake\_Lett](https://community.hubspot.com/u/Jake_Lett)\
**Post date:** [August 10, 2020, 7:42pm UTC](https://community.hubspot.com/t/svgs-as-background/23973/4 "2020-08-10T19:42:57Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![linusgrundstrom](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/linusgrundstrom/32/73373_2.png) [@linusgrundstrom](https://community.hubspot.com/u/linusgrundstrom)\
**Post date:** [August 11, 2020, 6:28am UTC](https://community.hubspot.com/t/svgs-as-background/23973/5 "2020-08-11T06:28:07Z")

</div>

Hi [@Jake\_Lett](https://community.hubspot.com/t5/user/viewprofilepage/user-id/72866)

I’ve sent you a PM!

---

<div class="post-metadata">

**Author:** ![Jake\_Lett](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/jake_lett/32/45178_2.png) [@Jake\_Lett](https://community.hubspot.com/u/Jake_Lett)\
**Post date:** [August 11, 2020, 8:23am UTC](https://community.hubspot.com/t/svgs-as-background/23973/6 "2020-08-11T08:23:42Z")

</div>

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;

}

---

<div class="post-metadata">

**Author:** ![linusgrundstrom](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/linusgrundstrom/32/73373_2.png) [@linusgrundstrom](https://community.hubspot.com/u/linusgrundstrom)\
**Post date:** [August 11, 2020, 8:39am UTC](https://community.hubspot.com/t/svgs-as-background/23973/7 "2020-08-11T08:39:56Z")

</div>

Hi again [@Jake\_Lett](https://community.hubspot.com/t5/user/viewprofilepage/user-id/72866)

I’ve added the change to the .css

 ![30158i8D57DD3BB22C3B3B.png](https://d2qpr2jzcazej7.cloudfront.net/original/3X/3/e/3ecd9d6d6d6690f294690411a495492c42b801f5.png)

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.

 ![30159i086B27DB2614F00F.png](https://d2qpr2jzcazej7.cloudfront.net/original/2X/b/b656a6bf5ebb30b66c6825cf294739831a38cb11.png)

 ![30160i3A9C7CA5FE57A538.png](https://d2qpr2jzcazej7.cloudfront.net/original/3X/a/c/ac44da4cc4575886df03e9c1b2bd4594f504a4fd.png)

 ![30161i557A3D95DCB1A605.png](https://d2qpr2jzcazej7.cloudfront.net/original/3X/e/4/e46b52e836e47d7aaa42ef92cffd6120baabbecf.png)

Did you get it to work?

---

<div class="post-metadata">

**Author:** ![linusgrundstrom](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/linusgrundstrom/32/73373_2.png) [@linusgrundstrom](https://community.hubspot.com/u/linusgrundstrom)\
**Post date:** [August 11, 2020, 8:53am UTC](https://community.hubspot.com/t/svgs-as-background/23973/8 "2020-08-11T08:53:05Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![linusgrundstrom](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/linusgrundstrom/32/73373_2.png) [@linusgrundstrom](https://community.hubspot.com/u/linusgrundstrom)\
**Post date:** [August 11, 2020, 2:43pm UTC](https://community.hubspot.com/t/svgs-as-background/23973/9 "2020-08-11T14:43:39Z")

</div>

Hi again [@Jake\_Lett](https://community.hubspot.com/t5/user/viewprofilepage/user-id/72866)

This is the setup in HubSpot with classes

 ![30177iB19BB84AEEA92043.png](https://d2qpr2jzcazej7.cloudfront.net/original/3X/b/d/bdc532fd416fc700bdc69a3118e82fffd98f1a17.png)

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

```auto
/* ==========================================================================
 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;
}

```