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

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!

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)

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

{{ $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!

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?).


<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%" />


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

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