What is the Hugo way to give an HTML section a background-image ? Inline styling with a resource.Get?

support
1

I’ve tried a myriad different ways and come up blank.
I’ve tried putting the background image in the theme’s static/img folder and calling it in the SCSS.
Now I’m on to putting the background image in assets/img and trying it that way.
Here is my latest effort:

 {{ $bgimage := resources.Get "img/bg.png"}} 
  <section id="triadservices" class="triadservices" style="background-image:url'({{ $bgimage.RelPermalink | safeURL }});'">

VSCode stopped signalling errors when I got this configuration.
I found the | safeSomething from an earlier Discourse discussion. I have no idea which safeURL/HTML/CSS etc. function I really need for this particular application.

If you need to see the current repository I will push it, but I was hoping to get this issue figured out before my next commit. :slight_smile:

Thanks in advance for any assistance!

2

It appears that you can’t use inline styling AND a class on the same element.
I will try taking the inline out of the section and putting it on the wrapping div that has no class. HA!
NOPE - No Joy with that either.
I’m using Bootstrap 5 (if it matters) but I think my issue is getting the image the Hugo way and then USING that image the Hugo way.

EDIT: Repository has been updated with the problem: (removed)

3

It looks like I figured it out on my own:
To put a background in a section with Bootstrap 5.2:
The HTML:

{{ $bgimage := resources.Get "img/bg.png"}} 
  <section id="triadservices" class="triadservices">
    <div class="container" ata-aos="fade-up">
      <div class="bgimage" style="background-image: url('{{$bgimage.RelPermalink | safeURL }}');">
         <div class="color-overlay d-flex justify-content-center align-items-center"> 
******************Everything you want to be over the background image*********
(close the divs and section)

The CSS:

.bgimage {
    background-size: cover;
    min-height: 60vh;
    position: relative;
    color: white;
    text-shadow: 2px 2px 2px 2px rgba(0,0,0,.2);
  }

  .color-overlay {
    position: absolute;
		width: 100%;
		height: 100%;
		background-color: rgba(0,0,0,.2);
  }

  @media (max-width: 768) {
    .bgimage {
      min-height: 30vh;
    }
  }
********************* this is added in the CSS/SCSS to whatever element owns your background img, in our case <section class="triadservices" ************************

I still have some styling to do, but that is all CSS/SCSS and not Hugo.
Yay me!

4

The only HUGO content in this solution is that the images are in Hugo’s static folder.
Apparently this works in your CSS (but is not responsive?).

HTML:

<div id="reps" class="row" data-aos="fade-right">
        <div class="col-lg-12 mt-5 mt-lg-0">
          <div class="justify-items-center">
            <h3>Our nationwide independent rep organization</h3>
          <img src="/img/independent-reps.png" class="image-fluid justify-items-center" alt="Our nationwide independent reps" width="100%" />
        </div>
      </div>
    </div>

CSS/SCSS:

#reps {
  background: url("/img/bg.png");
}
type or paste code here
5

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