Website background image/svg instead of a color

Hi all :wave:,

I want to use an .svg as a website background instead of just a color…
Anyone know how to create this in Sitejet?

Hi! If you want to change the website background globally, you can do this by adding a bit of custom CSS in the Asset manager → CSS (tab)

Custom CSS , to add a global background image

	body {
		background-image: url('https://cdn1.site-media.eu/images/your_images.svg'); //your image full url
		background-position: top center; //background position options
		background-repeat: repeat-y; //repeat options
	}

CSS properties docs:
https://www.w3schools.com/cssref/pr_background-image.asp
https://www.w3schools.com/cssref/pr_background-repeat.asp
https://www.w3schools.com/cssref/pr_background-position.asp

Hope this helps!

3 Likes

Three years later, is this still the best way to do this, or is there a newer/better way?

I tried it, and it worked, but on mobile it has a weird jump as you scroll down.

Maybe:

  1. my image aspect ratio isn’t correct
    or
  2. my image size isn’t correct?

See rsvp.webhive.co.za
(still busy with the project)

1 Like