background-image

Is it possible to repeat a background image, but specify a number of pixels before the next repeat starts. i.e. background: url(img.png) [after 40px] repeat-x; I don't want to add empty space to the image. background-repeat: space; background-repeat: round; // round(520 / 100) = round(5.2) = 5 The browser will render five images in the space but adjust the image width to 104px (520px / 5). The image is made wider to fit the container. Full details here or read Background Size property 来源： https://stackoverflow.com/questions/15199863/can-you-create-space-between-background-image-repeats

I am making a chessboard in javascript. The chessboard's squares (buttons) were originally designed to be 60px by 60px, but now they are 40px by 40px. button { width:40px; height:40px; border: 0 } However, some of the pieces that were designed for this earlier chessboard are still 60px by 60px. Is there any way in Javascript to make the images shrink proportionally to fit the square size? Currently, the images fit the square size, but do not shrink, so when I say, square.style.backgroundImage = imgLink; // square is the button, imgLink is "WhiteKing.jpg" for example. I get pieces like this -

I've got a very strange bug in chrome recently that is when you load the page first time, or in incognito mode that none of the background images show. when you then F5 the page, the background images all load in. When you inspect the css it shows the image url in the css panel, however when you mouse over the url it doesn't display a tool tip with a preview of the image. Neither when you check the downloaded resources are there even any mention of the background-images downloading. you then refresh the page and it works fine, tool-tip of the css url even shows a preview. The bug only randomly

I'm setting a background image to an element with Stellar JS and trying to achieve a centered image that moves in parallax. However when I try to use the standard approach I realize that the background-position is updated by stellar which then overrides the centering (I'm assuming that's what's overriding it). I've created a fiddle to explain the situation. http://jsfiddle.net/captDaylight/wvuQm/1/ Is there any way to have the image remain centered on scroll? (stack is making me to accompany this post with code, although it's insignificant in this case, the example on the fiddle is pretty

Quick question on progressive JPG backgrounds, if anyone knows. It appears that Firefox ignores the "progressiveness" of JPEGs if they are set as CSS backgrounds and waits until the image is fully loaded until displaying. I have Chrome and IE loading the background images progressively but Firefox just pops them in at full quality. I'm seeing the proof in front of me , but finding little to no info on it online. Just unanswered forum questions here and there. Anyone know anything about this? Is it a bug Mozilla know about or what is going on? Edit: Test case provided by easwee http://sample

We have a page design that works great in every PC browser that I have tried, but goes strange when viewed with an iPhone or iPod Touch. The problem is something to do with a centred background image thats very tall: #content_container { background-image:url('content-background.jpg'); background-position:top center; background-repeat:no-repeat; width:1020px; height:auto; } The content-background.jpg image is very tall (3000 pixels) and is designed to be 'revealed' as the DIV it is in grows due to content. You'll have to look at the page and full CSS to understand, so I've stripped everything

I'm working on a responsive design that requires the header graphic to scale with the width of the viewport. I've gone for an svg thinking that this would scale well. (I test for svg support in the full site, and replace a gif with the svg). In Firefox (13.0 on Windows 7) it's not antialiasing it at small sizes. It occassionally looks good at some sizes, and does if I fix the dimensions, but I want to avoid doing that. Chrome and Safari do anti-alias the image, and it looks good. I'm setting the background-size: 100% 100% to scale to the container, I've tried things like cover as well, but