Target CSS inline background with jquery

Question

So i'm trying to manipulate my background by fading it out on mouseleave.

But i cannot target it with jquery.

jQuery:

$("html").mouseleave(function(){
    $('#intro').fadeTo('slow',0.67,function(){
            $("#intro").css("background"); //attempting to target bg

    });
});

CSS:

#intro{
   background: url("images/overlay.png"), url("../../images/intro.jpg");
}

how do i target this background?

You might find this helpful: http://stackoverflow.com/questions/3079330/css3-fade-effect — SimianAngel, Aug 21 '16 at 18:40
Thanks for your contribution, however, this isn't what I'm looking to achieve. I'm just trying to target the background. — Joel, Aug 21 '16 at 18:43
Your call to `css()` just gets the value of the background property. If you want to set it, pass on the second argument... — Heretic Monkey, Aug 21 '16 at 18:50
When i do $("#intro").css("background","url(images/intro.jpg)"); it just completely removes the background instead. Would this work? $("#intro").css("background").fadeTo('slow',0.67); — Joel, Aug 21 '16 at 18:55

score 0 · Answer 1 · answered Aug 21 '16 at 19:28

0

$("html").mouseleave(function(){
    $('#intro').fadeTo('slow',0.67,function(){
            $("#intro").css('background-image', 'url(' + imageUrl + ')'); //attempting to target bg

    });
});

answered Aug 21 '16 at 19:28

Bibhuti

19
3

This still targets all of the elements inside of the div. – Joel Aug 21 '16 at 19:36

score 0 · Accepted Answer · 2016-08-22T06:35:31.453

When you call $('#intro').fadeTo you are saying you want to animate the opacity of intro. The third argument of fadeTo is a function that is called once the animation is completed, you can't change the target of fadeTo with it. The opacity of an element always affect its descendants. You can't use fadeTo to achieve what you want.

As a work around, set the background image of intro with the ::after pseudo-element. Initialize its opacity to 0.67 and change it to 1.0 on hover. See the details in this snippet:

body{
    background: #000;
}
#intro{
    position: relative;
    width: 300px ;
    height: 300px ;
}
#intro::after{
    content: "";
    background-image: url(https://upload.wikimedia.org/wikipedia/commons/thumb/e/ec/Mona_Lisa%2C_by_Leonardo_da_Vinci%2C_from_C2RMF_retouched.jpg/550px-Mona_Lisa%2C_by_Leonardo_da_Vinci%2C_from_C2RMF_retouched.jpg);
    opacity: 0.67;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    position: absolute;
    z-index: -1;
    transition: opacity 600ms;
}
#intro:hover::after{
    opacity: 1;
}
#intro p{
    color: #fff;
}
#intro img{
    width: 100px ;
    height: auto ;
}

<div id="intro">
    <p>La Gioconda</p>
    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/ec/Mona_Lisa%2C_by_Leonardo_da_Vinci%2C_from_C2RMF_retouched.jpg/550px-Mona_Lisa%2C_by_Leonardo_da_Vinci%2C_from_C2RMF_retouched.jpg"/>
</div>

Iman Irajian · Answer 3 · 2016-08-22T08:44:03.117

Aprroach1:

$("html").mouseleave(function(){
    
     $('#intro').fadeTo('slow',0.67,function(){
             $("#intro").removeClass().addClass("intro-back2"); //attempting to target bg             
     });
 });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
 <head>
  <title>Test</title>
<style type="text/css">
   .intro-back1{
       background: url("http://www.bhagesh.com/images/portfolio-nature-small.jpg");
   }
   .intro-back2{
       background: url("http://images.all-free-download.com/images/graphicthumb/zwergmanguste_nager_rodent_227139.jpg");
   }  
   #intro{
    width:300px;
    height:300px; 
   }
</style>
 </head>

 <body>
  <div id="intro" class="intro-back1">
  </div>
 </body>
</html>

You can change background when mouseover on #intro

Plus

Approach2:

$("html").mouseleave(function(){
    
     $('#intro').fadeTo('slow',0.67,function(){
             $("#intro").removeClass().addClass("intro-back2"); //attempting to target bg             
     });
 });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
 <head>
  <title>Test</title>
<style type="text/css">
   #opac{
                opacity:0.67;
    width:300px;
                position:relative;
    height:300px;
   }
   .intro-back1{
       background: url("http://www.bhagesh.com/images/portfolio-nature-small.jpg");
   }
   .intro-back2{
       background: url("http://images.all-free-download.com/images/graphicthumb/zwergmanguste_nager_rodent_227139.jpg");
   }  
   #intro{                    
                position:absolute;
    width:300px;
    height:300px; 
   }
</style>
 </head>

 <body>
  <div id="intro" class="intro-back1">
  </div>
  <div id="opac" class="intro-back1">
  </div>
 </body>
</html>

Target CSS inline background with jquery

3 Answers3