Fade only background-image in body element not all in website in CSS and jQuery

Question

I try make jQuery script to change transparend (opacity) in body's background-image but he change everything what is inside body element.

This is my code:

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Responsive and faded Full Background Image</title>
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <meta name="author" content="">
  <meta name="description" content="">
  <link href="http://fonts.googleapis.com/css?family=Kotta+One|Cantarell:400,700" rel="stylesheet" type="text/css">
  <link href='http://fonts.googleapis.com/css?family=Merriweather:400,300' rel='stylesheet' type='text/css'>
  <!--[if lt IE 9]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
  <![endif]-->

  <link rel="stylesheet" href="responsive-full-background-image.css">

</head>
<body>
    <div id="scroll-pos"></div>

    <header>
      <svg><path d="M62.146,49.999L92.364,19.78c1.159-1.159,1.159-3.037,0-4.195l-7.95-7.95c-1.158-1.158-3.036-1.158-4.195,0L50,37.854  L19.781,7.635c-1.158-1.158-3.037-1.158-4.196,0l-7.95,7.95c-1.159,1.158-1.159,3.036,0,4.195l30.219,30.219L7.636,80.219  c-1.16,1.159-1.16,3.037,0,4.195l7.949,7.95c1.159,1.159,3.038,1.159,4.196,0L50,62.146l30.218,30.218  c1.159,1.159,3.037,1.159,4.195,0l7.95-7.95c1.159-1.158,1.159-3.036,0-4.195L62.146,49.999z"></path></svg>
    </header>

    <main>
      <article>
        <h1>Odd Future street art hoodie readymade.</h1>
        <p>Ethical pug hella church-key forage seitan, cred American Apparel typewriter Tumblr fap fixie. Etsy synth meh raw denim lomo seitan. Thundercats kale chips swag, aesthetic Pitchfork readymade flannel slow-carb Cosby sweater authentic food truck.</p>
      </article>
    </main>

    <main>
      <article>
        <h1>High Life Bushwick hoodie occupy letterpress direct trade +1.</h1>
        <p>Raw denim leggings Shoreditch freegan, banh mi Echo Park Wes Anderson brunch sartorial. Blue Bottle Schlitz pour-over direct trade irony, literally gastropub next level mustache Cosby sweater tote bag viral locavore.</p>
      </article>
    </main>

</body>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
  <script>
    $(window).scroll(function(){
      var fromtop = $(document).scrollTop();
      $('body').css({opacity: 1 - fromtop / ($(window).height() + 500)});
    });
    </script>
</html>

and css file

    body {
  background-color: #222;
  color: white;
  font-family: Merriweather;
  font-size: 0.9em;
  line-height: 1.8em;
  margin: 0;
}

body::after {
  content: "";
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  position: fixed;
  z-index: -1; 
  background-image: url(images/background-photo.jpg);
  background-position: center center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
  transform: translatez(0);
}

header {
  overflow: hidden;
  height: 50%;
  width: 100%;
}

html, body {
  height: 100%;
}

header, main {
  padding: 30px;
}

h1 {
  color: white;
}

svg {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -50px;
  margin-top: -50px;
  width: 100px;
  height: 100px;
}

path {
  fill: white;
  opacity: 0.7;
}

main {
  display: table;
  height: 70%;
  width: 100%;
}

article {
  display: table-cell;
  position: relative;
  vertical-align: middle;
}

h1, p {
  max-width: 500px;
  margin-left: auto;
  margin-right: auto;

}
/* For mobile devices */
@media only screen and (max-width: 767px) {
  body {
    background-image: url(images/background-photo-mobile-devices.jpg);
  }
}

What am I doing wrong?

score 0 · Answer 1 · edited May 23 '17 at 12:05

First: It's better to create a div (with the background) to wrap everything, to prevent errors from using the body tag

Second: You could simple use the background syntax

background: color position/size repeat origin clip attachment image|initial|inherit;

background: url(images/background-photo.jpg) center no-repeat fixed;

Then, you can find the aswer for your problem here: Set opacity of background image without affecting child elements

score 0 · Answer 2 · answered Jan 14 '15 at 06:39

0

Fiddel Demo

Try this

 $(window).scroll(function(){
      var fromtop = $(document).scrollTop();
     $('body').css({'background-image': 'url(http://vaughnroyko.com/jsfiddle/back.png)'}).css({opacity: 1 - fromtop / ($(window).height() + 500)});
    });

answered Jan 14 '15 at 06:39

SimarjeetSingh Panghlia

2,200
13
14

it does not work so well, does not add transparency but adds a second transparent background. (btw, is an interesting effect but that's not what I mean :P) [screenshot](http://i61.tinypic.com/1zmf4on.jpg) – Hopyz Jan 14 '15 at 07:04

Fade only background-image in body element not all in website in CSS and jQuery

2 Answers2