Why does image not appear in mobile (Hugo-Academic)

My site uses the Hugo-Academic theme. The main page has a background image that does not show up in the mobile version. Actually, it looks like it might be showing up but so zoomed in on a small part of the image that it just looks like a mottled grey background.

The site is here:

I think this post is probably relevant, but I don’t know which CSS file I’d need to look at or how to override it to fix this specific issue.

Hiya! The Academic theme was created by @neutreno. It has a dedicated issue queue and community chat.

You may have the same problem I just had. Actually a very small piece of your image is being displayed, but it looks all black. It’s caused by the parallax effect. To fix it, I had to create a layouts/partials directory and copy themes/academic/layouts/partials/widget_page.html into it so that I could modify the line where parallax effects are put on the background image. I removed " {{if $bg.image}}parallax{{end}}" from line 69. That resolved the issue for me.

It was not obvious to me that the developers put in any way to turn off the parallax effect for background images, but I don’t know enough to be sure.

< <section id="{{$hash_id}}" class=“home-section {{printf “wg-%s” (replace $widget “_” “-”)}} {{if $bg.text_color_light}}dark{{end}} {{if $bg.image}}parallax{{end}} {{with $css_classes}}{{.}}{{end}}” {{with $style}}style="{{. | safeCSS}}"{{end}} {{print $extra_attributes | safeHTMLAttr}}>

1 Like

Thank you John but with the latest hugo academic i could not remove the line. Somehow the parallax effect works on every device except Apple iOS devices (iphone and ipad). Somehow Android Chrome/Firefox/whatever and Desktop Browser works but with a background image and the option image_parallax = true the background image does not show up at all on Apple iOS devices :-/ Any idea? I will contact the dedicated hugo community as well

  image_parallax = true  # Use a fun parallax-like fixed background effect? true/false