background-image

问题 I'm trying to set an image as a background for the main body DIV. The image needs to scale to fit the div and be vertically and horizontally centred . Overflow can be hidden on all sides. Within the div, there needs to be a 25px padding on all sides, then the inner div has a background colour with a 0.2 opacity. Within that div is the component area where the articles are published, again, with a 25px padding on all sides. You can see the problem I am having here: http://betelec.ergonomiq.net

问题 In other topics I've found that IE/FF doesn't print background images by default. Now that's a shame, because background images add some possibilities that are very difficult to reproduce with classical <img> tags: You can align them both horizontally and vertically You can crop them if they are larger than the target element (which also enables the idea of CSS sprites) Now, it's not impossible to do, but it will require me to have different HTML layouts for printing and normal page, and the

问题 I need to attach multiple backgrounds to an element via CSS and I can't use :before/:after . I'm wondering what the correct syntax to use multiple CSS background image is. There is a bunch of suggested ways I found, like here or here, but I can get neither of these: background: url(…) 0 0 repeat, url(…) 5px 5px no-repeat #FFF; background: url(…) 600px 10px no-repeat, url(…) 10px 10px no-repeat; to work. This is what I currently have: background-image: rgba(0, 0, 0, 0.4) url("img/icons-18

问题 I've looked at many other posts and I think I'm using the exact syntax suggested. However, I'm not getting the images to show up. I have a jsfiddle. Is it a jsfiddle issue? It's also not working on a website I'm working on. <div id="divtest">Hello</div> <img id="imgtest" /> <img id="imgreal" src="http://www.premiumbeat.com/blog/wpcontent/uploads/2012/12/free.jpeg" /> var string = "url('http://www.premiumbeat.com/blog/wpcontent/uploads/2012/12/free.jpeg')"; alert(string) document

问题 I'm making a responsive website with some parallax images and the very first image is meant to be a cycling image, like an image slider. I am using jquery Cool kitten for its responsiveness. The related jquery plugins i have loaded are: <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script> <script type="text/javascript" src="js/jquery-ui.js"></script> The css for the div is: #slide2 { background-image:url(../images/darkmap.png); height:700px; } I have found that using HTML

问题 I'm working with Qt 4.7 , I set a QWidget's background-image CSS an image from my qrc. The problem is the image is High res , and only the upper left part of it is showing , I can't get it to scale down to fit. In CSS3 I saw a "background-size : contain" property but I fear it doesn't work in Qt 4.7. Couldn't find a way to make the image fit the window. Any ideas ? I don't mind doing it programmatically . Thanks Solved: http://www.developer.nokia.com/Community/Wiki/Archived:Load,_Resize_image

问题 I have been having a tonne of issues with a site I'm developing. Even download to slow page loads and such. But the biggest issue I'm having is the behaviour of fixed position elements. First of all the nav is supposed to stay fixed at all times, but it doens't. It does however appear in the middle of the page if you reload whilst you are scrolled. Very odd. Live site here Second of all the background is supposed to stay fixed yet it does not. Nav code <div class="navwrapper"> <nav id="top">

问题 Ok I want to know what is the best practice for performance regarding CSS background images and http requests. 1. Use many different 1px png background images resulting in several individual http requests OR 2. Use one large image sprite with big gradient block chunks for use as background image. This will increase file size but save on http requests. Love to hear you opinions... 回答1: I think it would be better to use data:uri technique for small images (like 1px-backgrounds). background: url

问题 Using ASP.Net, I have a server control for which i would like to add the inline css style "background-image:none". However, when i call: writer.AddStyleAttribute("background-image", "none"); The following inline style is generated (and tries to resolve the url "none"): background-image:url(none) Is there a special syntax I can use to set the background image to none inline? 回答1: Looking at the code for the HTMLTextWriter and CssTextWriter classes in .NET Reflector, the only thing I can think

问题 It's easy to stretch a png background image: .stretched-logo-bg { background: url("../img/curve.png") center center no-repeat; background-size: 100% 100%; } this won't work with an SVG background though .stretched-logo-bg { background: url("../img/curve.svg") center center no-repeat; background-size: 100% 100%; } it won't get stretched, it will maintain its aspect ratio and just center. At least in Chrome 52 回答1: If you need to override the preserveAspectRatio of the SVG you are displaying