background-image

I have this jquery code that changes the image of the background on click: $('a.note').click(function(){ $('#full').css('background-image','img/1.jpg'); }); However, it's not changing. Is there something I'm missing? You need to include the url() part of the background-image property. $('#full').css('background-image','url(img/1.jpg)'); 来源： https://stackoverflow.com/questions/4578714/changing-background-image-using-jquery

I want to set a background-image but with an specific distance between the repetitions. For example, I have this image to become a background-image : And I want to fix the repetitions in a pattern like this: Check the JSFiddle playground I'm looking for a CSS3 clean solution, not JS, not extra elements, and so forth. If I have to use very modern CSS3 (un-supported) tricks is ok. I guess the ship has pretty much sailed, but still there is a solution based on data-URI. You can generate an SVG containing your image which has a size greater than the image (e.g. to make the margin 60px just make a

I have a sidebar widget that has an image background. Over this is a search input form. I don't want the input to show before the image has loaded. Is there a way to attach an load event handler to CSS background images like normal img elements/objects? I know this could be done on a normal image, but I'd like to keep it as a CSS background because the image is part of a sprite. I am using jQuery, so solutions using jQuery or plain DOM JS are equally good. You could load the same image using the DOM / a hidden image and bind to the load event on that. The browser's caching should take care of

I want to load 4 images from background showing a load bar to the client and when the images will be downloaded i want to set them as background images to 4 div blocks. I am looking for something like this. var myImages = new Array(); for(var i = 0; i < 4; i++) myImages[i] = new Image(); //load images using the src attribute //and execute an on load event function where to do something like this. var div0 = document.getElementById('theDivId'); div0.style.backgroundImage = myImage[index]; Is there any way to set a background image using an Image javascript object? You can do something close to

I want to change background dynamically in JS and my set of images is in base64 encoded. I try: document.getElementById("bg_image").style.backgroundImage = "url('http://amigo.com/300107-2853.jpg')"; with perfect result, yet I fail to do the same with: document.getElementById("bg_image").style.backgroundImage = "url('data:image/png;base64,iVBORw0KGgoAAAAAAAAyCAYAAAAUYybjAAAgAElE...')"; nor document.getElementById("bg_image").style.backgroundImage = "data:image/png;base64,iVBORw0KGgoAAAAAAAAyCAYAAAAUYybjAAAgAElE..."; Is there any way to do it? Ezequiel Gorbatik I tried to do the same as you,

I'm trying to animate the background-position of a div, slowly, but without it having jerky movement. You can see the result of my current efforts here: http://jsfiddle.net/5pVr4/2/ @-webkit-keyframes MOVE-BG { from { background-position: 0% 0% } to { background-position: 187% 0% } } #content { width: 100%; height: 300px; background: url(http://www.gstatic.com/webp/gallery/1.jpg) 0% 0% repeat; text-align: center; font-size: 26px; color: #000; -webkit-animation-name: MOVE-BG; -webkit-animation-duration: 100s; -webkit-animation-timing-function: linear; -webkit-animation-iteration-count: infinite