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

Using Themes
1

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: https://www.crediblecorvid.com

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.

2

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

3

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.

69c69
< <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
4

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

[design.background]
  image_parallax = true  # Use a fun parallax-like fixed background effect? true/false
5

I found a way (via stackoverflow) to get something good to happen on mobile/iOS: in _widgets.css (to be found in themes\academic\assets\scss\academic) you’ll find:

.parallax {
  height: 100%;
  background-attachment: fixed;
}

and after this I added a new section, to try to get some kind of sensible background image behaviour:

@media (hover: none) {
	.parallax {
	  height: auto;
	  background-attachment: scroll;
	  background-size: contain;
	  background-repeat: repeat;
	}
}

(the “hover:none” matches to touchscreen devices, ie a pretty close match to mobile, BTW)

And this means that my site does get the lovely parallax effect on desktop browsers, but a more mundane scrolling background on mobile.

(However: FWIW I was trying to get my background image to just repeat at its own normal size, but in fact, whatever CSS I try here, I always get “one image per Home screen section” - so, a longer section will have a more zoomed background image! It looks kind of funky so I left it like that, but it would be nice if someone who knows more CSS (or more Academic) than I do could find a way to fix that :slight_smile: