background-image

I am newbie。 How to changing my background-image css property using Mootools? Example, on page load: <div id="yourElement"></div> <script type="text/javascript"> window.addEvent('domready', function() { $('yourElement').setStyle('background-image', 'url(path/to/your/image)'); }); </script> The MooTools docs for Element.Style should be able to answer this one for you. window.addEvents({ // fire when the DOM is loaded domready: function(){ // path to the image var pathToBackgroundImage = '/path/to/the/image.jpg'; // set the background-image $(document.body).setStyle('background-image','url(' +

I have beloved CSS part effecting for a image .split-banner .right-cl:hover img { -webkit-transform: scale(1.1); transform: scale(1.1); } I need to apply above CSS to background image contain in a div element How can I do that? Change background-size on hover. To mimic scale(1.1) use 110% . div { width: 560px; height: 400px; background: url('http://kenwheeler.github.io/slick/img/fonz1.png') center center no-repeat; } div:hover { background-size: 110%; } <div></div> 来源： https://stackoverflow.com/questions/42616579/css-transform-scale-to-background-image

I'm trying to make a button using three background images so that we can pull in translations for the the text of the button and expand nicely. We'll probably add a base style for IE8 but our designer wants us to use this style and we couldn't recreate it nicely with pure CSS3. Here are the images: Here's the HTML (just a simple button, but thought I should put it anyway: <button class="back clickable" aria-label="Back" onclick="javascript:history.back();">Back</button> I've already tried a couple of things; I'll paste the CSS of both attempts. Attempt 1: Using Pseudo-selectors http://jsfiddle

I'm trying to pull together some kind of code that will randomize the background image on my blogger blog. My programming skills are scant, but I'm willing to try suggestions out. I remember achieving s/th similar in Wordpress, by having a file of php-code stored inside a folder of images and then calling that php file - as if it was an image - from within CSS. But from what I read, blogger doesn't recognize php, so I guess I'll have to try out some javascript (?) <script type="text/javascript"> var image= new Array() image[0]="Image01URL" image[1]="Image02URL" image[2]="Image03URL" image[3]=

I would like to create some buttons with dynamic width using CSS sprites and background-position but I'm not sure if what I want is possible.. I would like the button to have a left-side, middle, and right-side, with the middle repeating as required. Ideally I would like this to be made up of one image of 11px wide so the left and right sides are both 5px wide and the middle is 1px repeated. Is there some way I can define in CSS to use the one centre pixel of the image and repeat if for the required (unknown) width? Normally I've used two images to achieve similar results - one for the sides

i use exact this code: body { background-image:url('gradient2.png'); } found on w3 school its simple i got the pic in same folder, i did everything and i dont know why i cant insert images in css. The html tag is working. I had the same problem 3-4 months ago, and now working again with html and still, not working. The pic just wont show. this is my full css: * { margin: 0; padding: 0; } body { background: url("pagebg2.jpg") repeat left top; font: normal 10pt Arial,Helvetica,sans-serif; } #center{ box-shadow: 1px 1px 11px 1px rgba(0, 0, 0, 1); border: 3px solid rgba(0, 0, 0,0.8); background

I have a Collapsible set in my jQuery mobile app , the problem is that when I added a background image for the Page as I expand , close the collapsible the background image is stretch and moves with collapsibles , When i removed these lines from my css : background-repeat: no-repeat; background-size: 100% 100%; this prolem has solved but this has caused another big problem which is that when I expand a collapsible and then close it the background will shrink " move to up with the collapsibe "and the page part beneath this collapsible becomes without a background "transparent " this happens on

I'm trying to get width and height of element's background-image. When you click on it, it should show it inside the element ("200 300" in this case). HTML: <div id='test'></div> CSS: #test { width: 100px; height: 100px; background-image: url(http://placehold.it/200x300); } JavaScript: $('#test').on('click', function () { $(this).text(getDimensions($(this))); }); var getDimensions = function(item) { var img = new Image(); //Create new image img.src = item.css('background-image').replace(/url\(|\)$/ig, ''); //Source = clicked element background-image return img.width + ' ' + img.height; /