How do I add a wallpaper to my site page? Cannot figure it out

4e5rhwrt · March 28, 2024, 2:16am

Using JucieBar theme. I’ve tried going into the index.html file and adding

<style>
body {
  background-image: url('img.png');
}
</style>

I’ve tried following Background image--how to? - #8 by jmooring (@jmooring) but it didn’t work for my theme. I can’t figure this out. Have spent 4hrs on it so far. Please help.

On my site’s forums, the CSS is:

html {
  body {
    background: linear-gradient(
        0deg,
        rgba(var(--primary-rgb), 0.075) 0%,
        rgba(var(--primary-rgb), 0.075) 100%
      ),
      linear-gradient(0deg, var(--secondary) 100%, var(--secondary) 100%);
  }
  .background-container {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    width: 100vw;
    background: linear-gradient(
      90deg,
      var(--tertiary-hover) 0%,
      var(--tertiary) 100%
    );
    clip-path: ellipse(148% 70% at 91% -14%);
  }
}

and the header.html is: <div class="background-container"></div> but that won’t work either when I add to CSS files in the theme. The above CSS & HTML on my forums gives a nice:

panchtatvam · March 28, 2024, 9:41am

The theme doesn’t seem to have any background-image setting in config.
I suppose your query to the theme author might shed some light on this.

Tom_Durand · March 28, 2024, 11:24am

Use developper’s tools to verify is image.png is found. As it stands ‘image.png’ will look under the page, locally, so you would have make all your pages page bundles and put image.png under each and everyone of them. I suggest you use /image.png with the leading slash and put it right under /static.
I see in the theme’s repo that it doesn’t a dark background-color is only added for the footer, navbar, a (transparent), header, code element and #post-container so your code should take priority. But again, see within your browser that the rule appears.
And you should place the post under “using theme”, not “support”

irkode · March 28, 2024, 12:09pm

Guess you are in with customizing theme right now

Your theme does not support customizing the css directly

Next learnings: css, scss. Sass…
And of course Bulma the css layout used by the theme

Quick patch

Add your background-container class to the body tag. By proper customizing the themes baseof.html
add a /assets/scss/_background.scss defining the container class. No html tag selectors. Move the gradient into the container class
proper customize themes style.scss to include background.scss before main

Works for dark mode ootb. Guess you will have to fiddle with the colors

Import of bulma seems a little hacky within the theme.

4e5rhwrt · March 28, 2024, 1:37pm

@irkode Yeah, any CSS change I want to make, I always open the whole theme on Visual Studio and have to make changes there, usually to _main.scss. Anyway…

Ok, so I added <div class="background-container"></div> to the baseof.html file.

“add a /assets/scss/_background.scss defining the container class. No html tag selectors. Move the gradient into the container class” How do I do this part? Simply take out the html { at the top of my code I posted and the last }?

In my code, when I try to replace

        rgba(var(--primary-rgb), 0.075) 0%,
        rgba(var(--primary-rgb), 0.075) 100%

and

      var(--tertiary-hover) 0%,
      var(--tertiary) 100%

with:

      background-color: #ededed; 0%,
      background-color: #ededed; 100%

and

      background-color: #313131; 0%,
      background-color: #099dd7; 100%

I start getting a lot of errors like:
rrrr

but when I do what Visual Studio says to fix them, it still has errors. If I don’t try to change the var’s to “background-color” then what you said (if I followed it correctly) still didn’t change the background.
EDIT: Figured out the proper scss format ( I think) below…

But what I did to follow what you said was:
-Add <div class="background-container"></div> to body of baseof.html.
-Add @import "background"; to style.scss above the “main” import, so it looks like:

@import "background";
@import "main";

-Create a _background.scss in assets/scss.
-Put this in the _background.scss file:

@import "_variables";

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

That gave me no change on the site’s background. My variable colors I added are:

$rgba-color: rgba(237, 237, 237, 1);
$tertiary2: #313131;
$tertiary3hover: #099dd7;
$varsecondary: #303030;

The body section of my baseof.html looks like:

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

    </body>

irkode · March 28, 2024, 3:49pm

how did @jmooring call it “conceptional disconnection”

you are far beyond simple customizing stuff and this is just a hack - you will have to elaborate it for example for working with the light mode, adjusting colors…

that won’t get far without improving your skills on CSS, SCCS, Bulma, HTML tags…
plug and play code snippets somewhere won’t help on the long run

In fact my code will just crop of of the lower side of the page, but you might get a starting point. and see how to customize

Your Theme adds it’s own div containers (many) to the output so you for sure will have to study the nested classes think about class selectors and inheritance

add class to body means:

/layouts/_default/baseof.html

<!DOCTYPE html>
<html lang="{{ .Site.LanguageCode }}">
 {{- partial "head.html" . -}}
 <body class="background-container">
    {{- partial "header.html" . -}}
    <main>{{- block "main" . }}{{- end }}</main>
    {{- partial "footer.html" . -}}
 </body>
</html>

/assets/scss/style.scss

@import "normalize";
@import "background";
@import "main";
...   <- thats the rest of the original file

and move gradient to container class no html html tag selectors

/assets/scss/_background.

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

cheers

chrillek · March 28, 2024, 3:52pm

You _must _ learn about HTML and CSS. Adding an empty div at the top of your page will perhaps create invalid HTML but certainly not set the background for your page to anything (as you’ve noticed).
All that is not really related to Hugo – you must understand HTML and CSS to achieve what you want. Perhaps foregoing a theme completely and developing your own design would be easier (and you’d learn a lot that way).

4e5rhwrt · March 28, 2024, 3:53pm

Oh wow, thanks. All I needed to change was the baseof.html part and it works fine. Thank you so much.
<body class="background-container">

4e5rhwrt · March 28, 2024, 4:04pm

Oh wait, so it made the swirly design with the background colors, but it is using grey and white and not the blue/grey for some reason.

wwww

In the code you gave here:

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

I have the “var(–tertiary” parts set as:

        var($tertiary3hover) 0%,
        var($tertiary2) 100%

Those variables are:

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

so why is grey/white showing when white isn’t even defined anywhere here now? I have with also tried messing with the “0%” and “100%” parts too.

More importantly, adding <body class="background-container"> literally takes out my blog posts.

When I add that code, it totally wipes that section out.

irkode · March 28, 2024, 4:14pm

As I said. I gracefully leave that to the reader.

4e5rhwrt · March 28, 2024, 4:15pm

Edited my post above. The <body class="background-container"> is actually wiping out the site.

jmooring · March 28, 2024, 4:19pm

Please take this discussion to Stack Overflow or similar. You are struggling with CSS, not Hugo.

Topic		Replies	Views
Background image--how to? support	8	3870	May 10, 2022
Help - Header Background not Showing support	1	354	June 28, 2018
Header Image for Home Page? header\backround image dimensions....? support	3	1687	July 1, 2019
Background image in home section not visible after deploying support	17	4508	February 28, 2020
Background cover image using CSS support	14	1835	July 27, 2023

How do I add a wallpaper to my site page? Cannot figure it out

Related topics