Hero Images problem with smarthone

Backlight 4 & 5 Support
#1

Hi all,
I use the following code to integrate a hero image with an album title:

<div class="hero-image">
<div
class="background-image"
style="
background-image: -webkit-image-set(
url(https://oliver-blum.com/backlight/designer/page/image/40) 1x, url(https://oliver-blum.com/backlight/designer/page/image/40) 2x
);
background-image: image-set(
url(https://oliver-blum.com/backlight/designer/page/image/40) 1x, url(https://oliver-blum.com/backlight/designer/page/image/40) 2x
);">
<h2 class="hero-image--album-title">CIUTAT DE LES ARTS I LES CIÈNCIES</h2>
</div></div>

The problem is that the album title appears on some smartphones but not on others.
I would like the album title not to be visible on the smartphone.

Where is the problem?

Link to my site: https://oliver-blum.com

Best regards,
Oliver

#2

If you want it not to be visible on phones, then use a stylesheet to create a media query that will hide the background image at your preferred breakpoint.

@media screen and ( min-width: 640px ) {
  .background-image {
    background-image: none !important;
  }
}
#3

Hi Matt,

thank you for your help and sorry for the misunderstanding.
I just want to hide the album title of the hero image on the smartphone and have found a solution thanks to your example:

@media screen and ( max-width: 640px ) {
.hero-image .hero-image--album-title {
  display: none;
}
  }

Best regards
Oliver

1 Like