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!

4 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

I’m also wondering if this still is the way to do it? And does the CSS repeat option mean that the image can be any height but still fill any page? :cherry_blossom: