Advertisement
schiavassa

Supple custom background image

Jun 9th, 2015
320
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 0.77 KB | None | 0 0
  1. /* Hide the slider */
  2. #top_banner_wrapper {
  3.     display: none;
  4. }
  5.  
  6. /* Apply bg image */
  7. body:before,
  8. body:after {
  9.     content: "";
  10.     position: fixed;
  11.     right: 0;
  12.     top: 0;
  13.     left: 0;
  14.     height: 70vh;
  15. }
  16.  
  17. body:before {
  18.     background: url(http://static.tumblr.com/4901e49e36a898bea54ab0da063e4f35/qqaemog/T1nnpolgb/tumblr_static_20k5vow941fogggkwwskcgggk.jpg) top/cover no-repeat;
  19.     z-index: -2;
  20. }
  21.  
  22. /* Apply fade (gradient) */
  23. body:after {
  24.     background: -webkit-linear-gradient(transparent, #25292b);
  25.     background: linear-gradient(transparent, #25292b);
  26.     z-index: -1;
  27. }
  28.  
  29. /* Apply some margin so the image shows through */
  30. #welcome {
  31.     margin-top: 25vh;
  32. }
  33.  
  34. @media (min-width: 1023px) {
  35.     #welcome {
  36.         margin-top: 50vh;
  37.     }
  38. }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement