Header Image for Home Page? header\backround image dimensions....?


I’m brand new to Hugo from Jekyll via Github Pages.

I’m trying to make a header image for my home page… I see that I can add a background image for the Hero widget… so I do that… but it’s boggling my mind how to make it display “correctly”… as in fill the hero widget.

I tried 16:9 I tried measuring on my screen the dimensions of the widget and resizing my image, but nothing works!

Tell me how I’m doing :slight_smile: (at least now it shows within the widget at all) what is the background image of the hero widget trying to “stick” to? because it’s not the hero widget.

I even looked to the issues but no answers there:

I’ve found a hack where I made the canvas 16:9 and place the image I want up near the top…

would be nice to find a way to make the widget expand to the image size, as I don’t intend to add any text (which is how the section size is determined).

[EDIT: except the local server and production are not the same :(…]

It seems using a “Slider” widget is what you want. Here is a cutout from its front-matter:

# Slide height (optional).
# E.g. `500px` for 500 pixels or `calc(100vh - 70px)` for full screen.
height = ""
1 Like

heyyy! Thank you! I’ve been thinking on other things lately, but I’ll be glad to try this out!