Insert Background Image

[TheChaosToast]

Hello,

can you tell me how to insert a background image or where to change it? Because I'm a bit confused by the entry:
:root {
--site-background: #1e202f;
--site-secondary-color: #a61f67;
--site-accent-color: #f92552;
--site-text: #9e9caa;
--site-scrollbar-color: #1c88cc;

--font-family-sans-serif: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
--font-family-main: "Exo 2", "Roboto", sans-serif;
}

body {
background-color: var(--site-background);
...

Do I have to change this in root or in background? If I insert my background image, do I have to delete anything from the above entries?

Thanks for help :)

[cataalin]

Hello,

can you tell me how to insert a background image or where to change it? Because I'm a bit confused by the entry: :root { --site-background: #1e202f; --site-secondary-color: #a61f67; --site-accent-color: #f92552; --site-text: #9e9caa; --site-scrollbar-color: #1c88cc;

--font-family-sans-serif: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji"; --font-family-main: "Exo 2", "Roboto", sans-serif; }

body { background-color: var(--site-background); ...

Do I have to change this in root or in background? If I insert my background image, do I have to delete anything from the above entries?

Thanks for help :)

always in the element you want to modify, you don't need to do anything in root.

:root {
  --site-background: #1e202f;
  --site-secondary-color: #a61f67;
  --site-accent-color: #f92552;
  --site-text: #9e9caa;
  --site-scrollbar-color: #1c88cc;

  --font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --font-family-main: "Exo 2", "Roboto", sans-serif;
}

body {
  background-color: var(--site-background);
  background-image: url('path/to/your/background-image.jpg');
  background-size: cover; /* Adjust as necessary */
  background-position: center; /* Adjust as necessary */
  background-repeat: no-repeat; /* Adjust as necessary */
  ...
}

[TheChaosToast]

Thank you very much, that worked. I still have to make adjustments to the image, but that's the start :)

If I want to play a video as a background, then I still have to make adjustments. I assume that I should then change something in the body.latte file, right?

[cataalin]

Thank you very much, that worked. I still have to make adjustments to the image, but that's the start :)

If I want to play a video as a background, then I still have to make adjustments. I assume that I should then change something in the body.latte file, right?

If you modify body.latte, here is an example, you have many examples and tutorials if you Google you will understand better.

 <div class="video-background">
        <video autoplay muted loop id="background-video">
            <source src="your-video.mp4" type="video/mp4">
            Your browser does not support the video tag.
        </video>
    </div>   

/* Ensure the body and html take up the full space */
html, body {
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

/* Style the video container */
.video-background {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: -1;
}

/* Style the video to cover the entire screen */
#background-video {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: translate(-50%, -50%);
}

/* Ensure the content is above the video */
.content {
    position: relative;
    z-index: 1;
    color: white; /* Adjust the color as needed */
    text-align: center;
    padding: 20px;
}

[TheChaosToast]

Thank you <3