S. Paw S. Paw - 5 months ago 22
iOS Question

CSS background-image and background differences

I have the following code my background so that the image is slightly opaque.

div#home {
background-size: cover;
color: #404040;
background-image: linear-gradient(to bottom, rgba(0,0,0, 0.45) 0%,rgba(0,0,0, 0.45) 100%), url(/images/sp-bg.jpg);
}


However I want it to be fixed. I tried using
background-attachment
but that doesn't work on iOS Safari so i was looking for alternatives and come across:

background: url(/img.png) no-repeat center center fixed


I am trying to implement that so it works with my opacity bit like:

div#home {
background-size: cover;
color: #404040;
background: linear-gradient(to bottom, rgba(0,0,0, 0.45) 0%,rgba(0,0,0, 0.45) 100%), url(/images/sp-bg.jpg) no-repeat center center fixed;
}


However that zooms my image in a lot more than it should be.

The site is accessible at: http://www.shivampaw.com/

Thanks

Answer

Note, it is best to set background-size after background-image.

You have also to reset it when background-image is reset or updated elsewhere (via a class or id )


From your question, I was not too sure i understand your issue, but if with the gradient you had an issue and not without it, you may use an inset shadow instead :

html {
  height:100%;
  background:url(http://www.shivampaw.com/images/sp-bg.jpg) center center fixed;
  background-size:cover;
  /*box-shadow:inset 0 0 0 3000px rgba(0,0,0,0.225);*/
  box-shadow:inset 50vh 100vw rgba(0,0,0,0.45);
}
body {/* make html scroll */
  height:200%;
}

or set background-size for both bg :

html {
  height: 100%;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.45) 0%, rgba(0, 0, 0, 0.45) 100%) 0 0 scroll no-repeat, url(http://www.shivampaw.com/images/sp-bg.jpg) center center fixed;
  background-size:cover, cover;
}
body {
  /* make html scroll */
  height: 200%;
}

Comments