Setting backgrounds

Here's several ways to set backgrounds on slidde.co. CSS backgrounds can be set on any element in slidde.co

CSS background

This is the most common use case.

A fallback color when your background image is loading or part of your background image is transparent:

backgroundColor: #000

The image URL can be uploaded using slidde.co. You can also use CSS gradients here, and slidde.co provides some gradient presets in a no-code way:

backgroundImage: url("your_image_url")

You can use "cover" most of the time to ensure your background covers all the images:

backgroundSize: cover

If backgroundSize: "cover" hides some important part of your image, you can adjust their positions:

backgroundPosition: 50% 10px

If your background image is not a repeatable pattern, you can set this to no-repeat:

backgroundRepeat: no-repeat

Controls whether the background image is moving when you scroll down a page. Usually, you would need a static photo that does not follow the scroll because it covers the page:

backgroundAttachment: fixed

You can check the MDN docs for more in-depth information

Animating backgrounds

If you are using CSS backgroundImage, then you can easily animate it's backgroundPosition. Here's an example.

duration: 1500ms
delay: 800ms
easing: easeOutCubic
0% { backgroundPositionY: -36vw; }
100% { backgroundPositionY: 0; }

You can also animate other CSS properties.

However, if you need to animate things like CSS opacity, you cannot directly animate it. Since opacity applies to the whole element. You should use imageElement in Advanced background instead, and set target to &>*:first-child to apply that to the image element only.

Advanced backgrounds

This applies to Page Slide Container. You can click Advanced background and select the following options.

Image element backgrounds - Setting filters on background image

Click Advanced background and select imageElement. It will create a separate HTML <div><img /></div> element inside the container as the first element.

Then you can apply CSS properties like filter to it. For example, here's 3 ways to create more contrast between the background image and the foreground text to improve readability.

filter: grayscale(0.5)

filter: brightness(0.5)

filter: blur(5px)

Check the MDN docs for more in-depth introduction.

Animated backgrounds

Click Advanced background and select animated.

There are various animated background presets you can choose.

Usually you can configure the backgroundColor backgroundImage of the animated background. Some presets also have css variables than lets you configure the color, spacing or animation duration.

Repeatable Pattern backgrounds

Click Advanced background and select pattern.

1. Select a pattern type
2. Then you can customize the options of the pattern. And you can try clicking the Insipre me button to see what random pattern it gives you.

It will create a separate HTML <div><svg width="100%" height="100%" .../></div> element inside. So that means you can adjust it's css properties as well, like opacity, filter, or even backgroundImage to add a gradient background to the svg parent element. And you can also animate the SVG.

YouTube video backgrounds

Click Advanced background and select youtubeElement. It will create a separate HTML <div><iframe /></div> element inside to embed a YouTube video. You can paste your YouTube URL link there.

Currently only YouTube elements are allowed. Since it provides better streaming optimization than hosting our own video. If you need custom video upload, please let us know through the feedback button in the navbar.