background-image

In amongst my CSS I have the following: #framecontentTop{ position: absolute; top: 0; left: 120px; right: 0; height: 100px; overflow: hidden; background-image: url(/Users/myname/Website Project/logo.jpg); color: white; } Where the path to the image I want to use as the background-image is /Users/myname/Website Project/logo.jpg However, when I put in my div with the ID framecontentTop, it doesn't show the image (or indeed anything) as the background. There are no other divs in the CSS to conflict with it, and when I set the background for framecontentTop to a colour or keep it as an image but

I need to cover background in my site and I always see lags/slugs on mouse over or any other action. Do you have any idea how to fix this issue? I have a working example here (If I didnt update the code yet) : http://natgeo.geryit.com ul#posters li { background-position: center center; background-repeat: no-repeat; background-size: cover; float: left; height: 170px; position: relative; width: 25%; } It appears webkit doesn't cache the resized image and renders it every time, causing the lag. You're out of luck when it comes to background-size in chrome. I've seen people do it with Javascript /

I've been trying to find a solution for handling SVG elements used as background images via CSS: .icon.arrow-down { background-image: url( 'images/spritesheet.svg#arrow-down' ); } I'm using :target directly in the SVG file in order to target a particular layer (or "group") within the combined SVG spritesheet. <?xml version="1.0" encoding="utf-8" ?> <svg class="icon" id="icon" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="50px" height="50px" viewBox="0 0 50 50"> <defs> <style> rect, line { shape-rendering: crispEdges; } svg

I'm working on a website, where I use image sprites on a button. In every other browser I've tried, except for IE11, the text on my sprite is crisp as it should be, but in IE11, the text gets blurry (See images). The blurry one being IE11 ofc. The width of the sprite is 189px and the height is 378px. I use the following CSS: button { width:189px; height:189px; background-image:url('../images/kontakt-os.png'); background-position: top; cursor:pointer; border-radius: 100px; } button:hover { background-position: bottom; -webkit-box-shadow: 0px 10px 1px 1px rgba(179, 47, 1, 1.0); -moz-box-shadow:

Any idea how I can make background-image with linear-gradient to work on IE 11? The following code works fine on IE 10 but doesn't work on IE 11. background-image: url(IMAGE), -ms-linear-gradient(top, #ffffff, #BEE38F); I can make linear-gradient to work on IE 6-9, 11 using the following filter but background image is not displayed in this case. filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#BEE38F',GradientType=0 ) I'm open to an ideas. Update: Here's the code I currently have. background-image: url(IMAGE), -webkit-gradient(linear, left top, left

I have a div element with text blocks and a parent div in which I have set a background image. Now I want to reduce the opacity of the background image. Please suggest how I can do that. Thanks in advance. EDIT: I am looking to change the way my blog post looks at blogger.com by editing the html content. The html code looks as follows: <div> //my blog post </div> I tried to surround the whole code above with a div element and set opacity of each div separately as below: <div style="background-image:url("image.jpg"); opacity:0.5;"> <div style="opacity:1;"> //my blog post </div> </div> But it is

When I use a SVG image as the tiled background for the body of my page, there is a slight gap between the tiles. If I switch to the PNG version of the file, it does not happen. I am using the latest version of Google Chrome for Mac – version 19.0.1084.56. I haven’t tested Windows because I don’t have that platform. File works as expected in Safari and FF. After a bunch of Google searches and searching here on SO I haven’t found any similar reports. Maybe someone here has a solution. Here is my test code: <!DOCTYPE html> <html> <head> <title>SVG background test</title> <style type="text/css">

It is frequently asked – but I haven’t seen a good answer yet (and I looked). If you set a background image in CSS to a table row- the image will repeat itself in every cell. If you set the position: relative (for the row) and set the background-image: none (for the cells) it solves the problem on IE but not on chrome! I can't use background positioning since there are many calls and their size varies. (And the picture is not symmetrical- It's a fade out from one side. Anybody?? Example for the css code : tr { height: 30px; position:relative;} tr.green { background: url('green_30.png') no