Jump to content

Custom background with css / Image

Go to solution Solved by SaranyaDesigns,

Recommended Posts

Exileking Level 4

Exileking

Posted
Posted

Howdy folks! Thanks for all the help so far with my website! I have another interesting question. Is it possible to create a seamless backround for the website using a custom PNG or image. I created a pixelated background for the website but im not sure how to put it in the background as a seamless pattern. I have attached a before and after of what id like it to look like. 



 

Before.png

After.png

Link to comment
  • Replies 4
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Popular Days

Popular Posts

SaranyaDesigns
SaranyaDesigns

@Exileking ok so you'll need to upload the image to your site first and then find the direct url for it. then replace the url in the code below, but something like this should work, assuming you want

Exileking
Exileking

@SaranyaDesigns  This worked perfect thank you!!!!MUCHO

Posted Images

  • Solution
SaranyaDesigns Level 5

SaranyaDesigns

Posted
  • Solution
Posted

@Exileking ok so you'll need to upload the image to your site first and then find the direct url for it. then replace the url in the code below, but something like this should work, assuming you want it on all pages of the site? Add this to your custom CSS: 

/* remove dark background from all sections of site */
body, .header, .page-section .section-border, :not(.has-background) .section-background {
	background-color: transparent !important;
}
/* add repeating seamless background image sitewide - replace url with locally hosted version of image file */
body {
    background-image: url(https://content.invisioncic.com/p289038/monthly_2023_11/Image.thumb.png.feabc75f3081e1db301ea993557e1567.png);
    background-repeat: repeat;
}

Let me know?

Link to comment

Create an account or sign in to comment

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

Sign Up / Login
Go to topic listing
×
×
  • Create New...

Squarespace Webinars

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

Upcoming Webinars →

Hire a Designer

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

Get Matched →

Support

Community

Developers

Resources