Background Gif Multiplied Instead of Full Screen

Store Design
, ,
1

Could someone help me identify why my Website Banner looks like multiplied smaller Gifs Instead of a Major Full Sized one? My own created gif shall be enough to fit in.

Website: www.astroglow.live

2

Hi @AstroGlow :waving_hand: this is because the background property in base.css was given an !important declaration overridewithout consideration to side-effects, !important makes the styles to ignore all the other background- related properties such as background-attachment.

Use the rest of the pertinent background-properties in the background rule shorthand itself when forcing !important i.e.:

background: url(FILENAME) no-repeat fixed !important;

Get rid of the !important declaration when ever possible as it makes it difficult to fix compounding needs (cascading).

Such as not making some users motion sick by using accessibility flags to wrap a static image to replace animation of a wide-forward-motion.

https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion

@media (prefers-reduced-motion) {
  /* styles to apply if a user's device settings are set to reduced motion */
  background: url(FILENAME-STATIC-NO-MOTION) no-repeat fixed !important;
}

For performance also test using video instead.

If you need this customized further contact me for services
Contact info in forum signature.
ALWAYS please provide context, examples: store url, theme name, post url(s) , or any further detail in ALL correspondence.

3

Please update your code to this and check again

body {
    background: url(/cdn/shop/files/Video_sem_titulo_-_Feito_com_Clipchamp_online-video-cutter.com.gif?v=1728835081) !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
    background-position: center center;
    background-attachment: fixed !important;
}