I want my theme to use images as backgrounds. I know how to use CSS

1

I need to use an image as a background using CSS.

2

It’s as simple as this:

.class
  {
    background-image: url("/path-to-image.png");
  }
3

I see, Thanks.
I would also like to ask what the ff

I am reading a book where it uses:

{{ $css := resources.Get "css/style.css" }}
<link rel="stylesheet" href="{{ "css/style.css" | relURL }}">

Or

<link rel="stylesheet" href="{{ "css/style.css" | relURL }}">

Which should I use?

4

It depends on you. You can do one of the following:

<html>
  <head>
    <style>
      .class
        {
          background-image: url("/path-to-image.png");
        }
    </style>
 </head>
</html>

Or in your assets/css/styles.css:

.class
  {
    background-image: url("/path-to-image.png");
  }

The code that you’ve posted is only required if you use the second method. If you use the first method, you won’t need any more configuration.

But to explain the code you’ve posted:

{{ $css := resources.Get "css/style.css" }}: Defines a variable named css and stores the path of your CSS file as a value

<link rel="stylesheet" href="{{ "css/style.css" | relURL }}">: Is actually loading the CSS file.

This should help.

5

May I know where “/” points to? Is it in the “assets” folder?

6

If you store it in assets, you’ll need to set a variable to access it. However, I don’t think that’s a good option for images that are not going to be processed. So, any content that should not be processed goes in static folder. Contents of static are mapped as-is to website’s path. Image in static/image.png will be available as it as at website.com/image.png.

7

What If I place it in the themes “static” folder? How do I reference it?

8

I’m sorry, I have never tried that. But, in what use case do you need to access a file from theme’s static folder? Even if you’re using a theme, you should be able to edit it to set the path relative to your domain, that is, your static folder.

9

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.