Jump to content

Help with transparent border and background gradient

Recommended Posts

Site URL: http://www.beautifuluseful.co

Hi gang,

I managed to get this working with CSS but then "broke it" on purpose by taking away some curly brackets, and now I can't get it working again! 

Essentially I'm trying for a gradient border around the whole site (on 7.1), and succeeded in doing this with code for a transparent border + a background gradient behind, and now I can't get it to work again. I've got the border working (but can't tell if it's actually transparent since there's nothing behind it...).

My goal is a border similar to this one: https://aestheticsofjoy.com/

The custom CSS + notes I left for myself look like this (and, yes I did add the curly brackets back and take away the //s): 

// {

  background-image: linear-gradient(to bottom right, #F4C6CD,  #FAD1CF, #FFCC66);

body { border:40px solid transparent; 

header margin:25px 25px 0 25px; // 

  // neeed to add end curly parenthesis back in for this to work

 

Currently here's what I've got with the border working, but still no gradient:

body { border:25px solid transparent; }
header { margin:25px 25px 0 25px; }
gradient { background-image: linear-gradient(to bottom right, #F4C6CD,  #FAD1CF, #FFCC66); }

 

It's driving me mad not being able to figure out why I got this to work a month or so ago and now I'm having ZERO luck with anything on the gradient side. Help??

 

 

 

Edited by angefriesen
Link to comment
body {
    border: 25px solid transparent;
    background-image: linear-gradient(to bottom right, #F4C6CD, #FAD1CF, #FFCC66);
}

 

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
  • 4 months later...

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.