Jump to content

.svg background-image stretches to cover the entire content area

Recommended Posts

Site URL: https://sealion-dogfish-x6kw.squarespace.com/

hello people!

I am trying that some of the sections (with different measures) have the same .svg background-image that adapts to each one of them (I don't mind it being deformed but I do need it to cover the whole background). I have tried with:

 

section:not(.has-background) .content-wrapper {
    background-image: url("data:image/svg+xml,%3Csvg xmlns[...my .svg code...]");
    background-position: center;
    background-size: 100% 100%;
    background-attachment: scroll;
    background-repeat: no-repeat;
} 

but always maintains the same proportion... Any ideas?

my test-site: https://sealion-dogfish-x6kw.squarespace.com/

pass: *SomosBellas*

thanks in advance!!!

Link to comment
section:not(.has-background) .content-wrapper {
    background-image: url(data:image/svg+xml,%3Csvg xmlns[...my .svg code...]);
    background-position: center;
    background-size: cover;
    background-attachment: scroll;
    background-repeat: no-repeat;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.