Wowchemy-hugo-modules: Add 'hero' widget that supports background image

[maxheld83]

I was wondering if it would be possible to add a background picture to the sections in home, maybe like in the top section here: http://themes.gohugo.io/theme/agency/

It would be awesome if it could zoom to fill the area automatically, though that would mean it would look awkward if people have really long sections with background images.

[maxheld83]

Or perhaps, if not a background image (that gets messy with texts) a screen-width header image for the sections? (I just love images).

[gcushen]

Academic primarily tries to be a fairly minimal theme/framework, but perhaps an option for background images of some sort could be interesting.

Currently, this can probably be achieved by putting an image in your static/img/ folder and then adding some custom CSS (see Theme/CSS section in Getting Started Guide on Demo/Docs website). The CSS could be something similar to:

.home-section:nth-of-type(even) {
    background-image: url('../img/portrait.jpg');
}

[gcushen]

I think this could be useful to implement either as a special intro/splash widget or as an option for all widgets. If it's an option for all widgets, I would need to experiment a bit as it could cause problems with viewing the content of the widget.

[ghost]

I know this is a bit hacky, but it worked for the main page well enough
and does cover the posts too. It does not cover the projects fully, perhaps
there is some other magic word to use other than article?

I added:

.home-section:nth-of-type(even) {
    background-image: url('../img/background.png');
}
.home-section:nth-of-type(odd) {
    background-image: url('../img/background.png');
}
.article:nth-of-type(even) {
    background-image: url('../img/background.png');
}
.article:nth-of-type(odd) {
    background-image: url('../img/background.png');
}

HTH

[armsp]

@ghost @gcushen what resolution (I mean size and ratio in pixels) is recommended for these background images?

[JOduMonT]

@armsp I had the same question

@ghost @gcushen what resolution (I mean size and ratio in pixels) is recommended for these background images?
in fact in _widgets.scss under .wg-hero the background-size is cover