Skip to content

Instantly share code, notes, and snippets.

@yang-wei
Last active June 6, 2024 06:56
Show Gist options
  • Save yang-wei/9114967 to your computer and use it in GitHub Desktop.
Save yang-wei/9114967 to your computer and use it in GitHub Desktop.
Full size background image using CSS cover in mobile devices
html {
background: url(image url) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
height: 100%;
overflow: hidden;
}
@imaluka
Copy link

imaluka commented Apr 13, 2018

thank you so much, this helped a lot, saved me some time

@Jhowam
Copy link

Jhowam commented Jun 8, 2018

thanks bro! :)

@ljcucc
Copy link

ljcucc commented Jul 17, 2018

Really thanks!
it work perfect!

@mackesa
Copy link

mackesa commented Jul 26, 2018

Thanks! Perfect

@caprica-Six
Copy link

Very nice, thanks a lot!!!

@TheCoderSingh
Copy link

Thank you so much

@machacsr
Copy link

Thank you so much! Perfect!

@Lussier115
Copy link

Thanks works great !!

@AbdQaadir
Copy link

I don't know why this doesn't work for me.

@pratikm97
Copy link

Thanks works great !!

@ColtonBeery
Copy link

Works great, thanks so much.

@alacroixAskin
Copy link

Works great with a color but when I tried with a linear-gradient color it doesn't works as expected.
I tried with :
background: linear-gradient(360deg, #000 0%, #fff 200%) no-repeat center center fixed;

@gabsdocompiuter
Copy link

Thanks, works great!

@artik
Copy link

artik commented Jun 18, 2019

Mate, thanks a lot! Works perfectly!

@waslaw89
Copy link

Thanks a lot, It works great!

@jacobbeatty
Copy link

jacobbeatty commented Sep 2, 2019

Hi, this works but overflow:hidden makes me unable to scroll? Any solutions? @yang-wei

A temporary solution I used to solve this problem is specifying overflow for overflow-x and overflow-y separately.

overflow-x: hidden overflow-y: scroll

@joey2031
Copy link

I tried that method and on the bottom of my website there is some white space. Does this work with any image? NOTE: I am using a portrait image, is that fine?

@gpc91
Copy link

gpc91 commented Aug 13, 2021

Fantastic, thank you.

@josuedrivera
Copy link

love u =)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment