Best IT Recipes

Can I fade in a background image (CSS: background-image) using jQuery?

I have a div element with text in it and a background image that is set via the CSS background-image property. Is it possible to fade in the background image via jQuery?

HTML:

 <div>Text</div>

CSS

 div { background-repeat: no-repeat; background-position: center; background-size: contain; background-image: url(http://upload.wikimedia.org/wikipedia/commons/8/84/Konqi_svg.svg); border: 1px solid #666; height: 10em; }

EDIT

I made a fiddle illustrating my script. This basically sets up the initial background-image and a transition and changes the background-image to jQuery. In my testing, there is no animated transition between two images.

EDIT2

My modified fiddle works!

+46
jquery css html5 css3
Sep 06 '11 at 11:59
source share
9 answers

Probably not with jquery, but you can see this example with css3 transitions:

http://css3.bradshawenterprises.com/cfimg/

also see this answer

CSS3 Fade Effect

+17
06 Sep '11 at 12:01
source share

I looked for the eyelids, and finally I put it all together to find my solution. They say you cannot fade in / out of the background image from the html background. This is definitely wrong, as you can understand by running the demo below

CSS

 html, body height: 100%; /* ges Hoehe der Seite -> weitere Hoehenangaben werden relativ hierzu ausgewertet */ overflow: hidden; /* hide scrollbars */ opacity: 1.0; -webkit-transition: background 1.5s linear; -moz-transition: background 1.5s linear; -o-transition: background 1.5s linear; -ms-transition: background 1.5s linear; transition: background 1.5s linear;

Changing the background image of the body can now be easily done using JavaScript:

 switch (dummy) case 1: $(document.body).css({"background-image": "url("+URL_of_pic_One+")"}); waitAWhile(); case 2: $(document.body).css({"background-image": "url("+URL_of_pic_Two+")"}); waitAWhile();
+23
Nov 02 '13 at 13:19
source share

You can specify the opacity value as

 div {opacity: 0.4;}

For IE you can specify

 div { filter:alpha(opacity=10));}

Lower the value - Increase transparency.

+5
Sep 06 2018-11-12T00:
source share

It is impossible to do it this way, but you can impose an opaque div between the div with the background image and text and wipe from it, therefore, make it appear that the background is fading.

+4
Sep 06 '11 at 12:03
source share

This is what worked for mine and its pure css



CSS

 html { padding: 0; margin: 0; width: 100%; height: 100%; } body { padding: 0; margin: 0; width: 100%; height: 100%; } #bg { width: 100%; height: 100%; background: url('/image.jpg/') no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; -webkit-animation: myfirst 5s ; /* Chrome, Safari, Opera */ animation: myfirst 5s ; } /* Chrome, Safari, Opera */ @-webkit-keyframes myfirst { from {opacity: 0.2;} to {opacity: 1;} } /* Standard syntax */ @keyframes myfirst { from {opacity: 0.2;} to {opacity: 1;} }


HTML

 <!DOCTYPE html> <html> <head> <title></title> </head> <body> <div id="bg"> <!-- content here --> </div> <!-- end bg --> </body> </html>
+4
Dec 20 '14 at 10:05
source share

In a modern browser, I prefer a very lightweight approach with a bit of Js and CSS3 ...

 transition: background 300ms ease-in 200ms;

Take a look at this demo:

http://codepen.io/nicolasbonnici/pen/gPVNbr

+2
Feb 18 '16 at 11:12
source share

You can mark the background image in various ways, since Firefox 4 ...

Your CSS:

 .box { background: #CCCCCC; -webkit-transition: background 0.5s linear; -moz-transition: background 0.5s linear; -o-transition: background 0.5s linear; transition: background 0.5s linear; } .box:hover { background: url(path/to/file.png) no-repeat #CCCCCC; }

Your XHTML:

 <div class="box"> Some Text … </div>

And here it is.

+1
Dec 16
source share

JQuery

  $("div").fadeTo(1000 , 1);

CSS

  div { background: url("../images/example.jpg") no-repeat center; opacity:0; Height:100%; }

HTML

 <div></div>
+1
Oct 23 '17 at 16:56
source share

I know I'm late, but I found a way to use jquery that works in every browser (I tested it on chrome, firefox and Ie 9), and fore-ground elements are always displayed instead of the css3 transition property.

create 2 absolute wrapper and use z-index.

First set the elements that should be in the foreground with the highest value of the z-index property, and other elements (all of which are included in the body, like this: body {}) with a lower value of the z-index property than the front ground elements, at least , 2 numbers lower.

HTML part:

  <div class="wrapper" id="wrapper1"></div> <div class="wrapper" id="wrapper2"></div>

css part:

  .fore-groundElements{ //select all fore-ground elements z-index:0; //>=0 } .wrapper{ background-size: cover; width:100%; height:100%; background-size: 100% 100%; position:absolute; } #wrapper1{ z-index:-1; } #wrapper2{ z-index:-2; } body{ height:100%; width:100%; margin:0px; display:cover; z-index:-3 //<=-3 }

than javascript / jquery one:

I needed to change the background image every three seconds, so I used the dial timeout.

this is the code:

  $(document).ready(main); var main = function(){ var imgPath=[imagesPath1,..,...]; // the array in which store the image paths var newWrapper; // the wrapper to display var currentWrapper; //the current displayed wrapper which has to be faded var l=2; // the next image index to be displayed, it is set to 2 because the first two position of the array(first two images) start already setted up var imgNumber= imgPath.length; //to know when the images are over and restart the carousel var currentImg; //the next image path to be displayed $('#wrapper1').css("background-image", 'url'+imgPath[0]); //pre set the first wrapper background images $('#wrapper2').css("background-image", 'url'+imgPath[1]); //pre set the first wrapper background images setInterval(myfunction,3000); //refresh the background image every three seconds function myfunction(){ if(l===imgNumber-1){ //restart the carousel if every single image has already been displayed l=0; }; if(l%2==0||l%2==2){ //set the wrapper that will be displaied after the fadeOut callback function currentWrapper='#wrapper1'; newWrapper='#wrapper2'; }else{ currentWrapper='#wrapper2'; newWrapper='#wrapper1'; }; currentImg=imgPath[l]; $(currentWrapper).fadeOut(1000,function(){ //fade out the current wrapper, so now the back-ground wrapper is fully displayed $(newWrapper).css("z-index", "-1"); //move the shown wrapper in the fore-ground $(currentWrapper).css("z-index","-2"); //move the hidden wrapper in the back ground $(currentWrapper).css("background-image",'url'+currentImg); // sets up the next image that is now shown in the actually hidden background wrapper $(currentWrapper).show(); //shows the background wrapper, which is not visible yet, and it will be shown the next time the setInterval event will be triggered l++; //set the next image index that will be set the next time the setInterval event will be triggered }); }; //end of myFunction } //end of main

Hope my answer is clear if you need to clarify the comment more.

sorry for my English:)

0
Sep 02 '16 at 12:28
source share


More articles:


All Articles