How to add wallpaper with CSS on a Hugo theme?

Question

How to add wallpaper with CSS on a Hugo theme?

32 Views Asked by ergerthgre At 28 March 2024 at 16:38

For the main discussion, see here: https://discourse.gohugo.io/t/how-do-i-add-a-wallpaper-to-my-site-page-cannot-figure-it-out/49084/1

I was told to ask here. Am using the JuiceBar theme on my Hugo-made site. The theme I'm using makes this tricky. My _background.scss code is:

@import "_variables";


    .background-container {
      position: fixed;
      top: 0;
      left: 0;
      height: 100vh;
      width: 100vw;
      background: linear-gradient(
        90deg,
        var($tertiary3hover) 100%,
        var($tertiary2) 100%
      );
      clip-path: ellipse(148% 70% at 91% -14%);
    }

My baseof.html code is:

    <body class="background-container">
        {{- partial "header.html" . -}}
        <main>
        {{- block "main" . }}{{- end }}
        </main>
        {{- partial "footer.html" . -}}

    </body>

My _variables.scss imports for bodyof.html are:

$tertiary2: #313131;
$tertiary3hover: #099dd7;

And then I've added

@import "background";

to my styles.scss file.

This all semi-works. For example, this is how it's coming out currently: https://i.imgur.com/RYAr56x.png

I want the blue/grey, but my results are grey/white, even though my variables and whatnot are for the blue and grey. I have with also tried messing with the “0%” and “100%” parts too.

But here is the entire big issues with this: With the

<body class="background-container">

added to my baseof.html file, it wipes out the bottom half of my entire site/page. This is how it looks WITHOUT that code added (normal): https://i.imgur.com/IeHhiss.png

When the code is then added, it wipes out the entire blog post section. How can I achieve the blue/grey background design I want without destroying the site?

I have tried just about everything at this point. I'm stuck.

Original Q&A

There are 1 best solutions below

**Dan Mullin** · Answer 1 · 2024-03-29T14:24:47.153000

This would best be accomplished in the following manner:

Set the background-color of the body to what you want the bottom half to be.
Set the background-color of the element and give it the clip-path.

This will ensure you always have the nice separation.

html {
  height: 100%;
  box-sizing: border-box;
}
*, *::before, *::after {
  box-sizing: inherit;
}
body {
  margin: 0;
  min-height: 100%;
  background: #313131;
}
.bg {
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  position: fixed;
  background: #099dd7;
  clip-path: ellipse(148% 70% at 91% -14%);
}

<body><div class="bg"></div></body>

The reason that the linear-gradient doesn't work is that the clip-path that is being applied hides the bottom half of it.

How to add wallpaper with CSS on a Hugo theme?

There are 1 best solutions below

Related Questions in CSS

Related Questions in SASS

Trending Questions

Popular # Hahtags

Popular Questions