I try to display a svg icon on a html page.
On chrome and other browser that works fine but on edge and internet explorer the icon don't appear.
I made it witk mask in css.
body{
background: #000;
}
.default {
background-color: #fff;
width:45px;
height:45px;
}
.icon {
mask:url('./icons/network.svg') no-repeat center center;
-webkit-mask: url('./icons/network.svg') no-repeat center center;
mask-size:90px auto;
}
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="./style.css">
<title>Icons</title>
</head>
<body>
<image class="default icon"></image >
</body>
</html>
On internet explorer it displays a white square ( i think is the default class in css).
Thanks in advance !
According to caniuse.com Internet Explorer does not support mask at all and edge only partially supports this feature. Have a look here: https://caniuse.com/#search=mask
Related
I'd like to have a pattern I made in an embedded SVG appear as the background of an html doc.
<head>
<style>
body{
background-image: url('apattern.svg');
}
</style>
</head>
Basically, SVGs do not work well in body-background as you described in the question, if at all. What I've done is create a fallback option for those browsers that have an issue.
body {
background: url(fallback.png);
background-image: url(image.svg), none;
}
See ... http://css-tricks.com/using-svg/
This question already has answers here:
Why can't I do <img src="C:/localfile.jpg">?
(16 answers)
Closed 4 months ago.
I've got an HTML document hosted on a remote web server. I'm trying to have one of the elements on the web page use an image file from my local file system as its background image. No luck with Chrome, Safari or Firefox (haven't tried IE).
Here's an example of what I've tried so far.
<!DOCTYPE html>
<html>
<head>
<title>Experiment</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style>
html,body { width: 100%; height: 100%; }
</style>
</head>
<body style="background: url('file:///Users/username/Desktop/background.png')">
</body>
</html>
If I inspect the body element using my browser's web inspection tool, and select "Open image in new tab" the image is there. So the browser is fully capable of getting at the image file using the given URL.
Is what I'm trying to pull off at all possible, or is this a security feature of the browser trying to block external domains from accessing the user's local resources?
background: url(../images/backgroundImage.jpg) no-repeat center center fixed;
this should help
It seems you can provide just the local image name, assuming it is in the same folder...
It suffices like:
background-image: url("img1.png")
Jeff Bridgman is correct. All you need is
background: url('pic.jpg')
and this assumes that pic is in the same folder as your html.
Also, Roberto's answer works fine. Tested in Firefox, and IE. Thanks to
Raptor for adding formatting that displays full picture fit to screen,
and without scrollbars...
In a folder f, on the desktop is this html and a picture, pic.jpg, using
your userid. Make those substitutions in the below:
<html>
<head>
<style>
body {
background: url('file:///C:/Users/userid/desktop/f/pic.jpg') no-repeat center center fixed;
background-size: cover; /* for IE9+, Safari 4.1+, Chrome 3.0+, Firefox 3.6+ */
-webkit-background-size: cover; /* for Safari 3.0 - 4.0 , Chrome 1.0 - 3.0 */
-moz-background-size: cover; /* optional for Firefox 3.6 */
-o-background-size: cover; /* for Opera 9.5 */
margin: 0; /* to remove the default white margin of body */
padding: 0; /* to remove the default white margin of body */
overflow: hidden;
}
</style>
</head>
<body>
hello
</body>
</html>
You forgot the C: after the file:///
This works for me
<!DOCTYPE html>
<html>
<head>
<title>Experiment</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style>
html,body { width: 100%; height: 100%; }
</style>
</head>
<body style="background: url('file:///C:/Users/Roby/Pictures/battlefield-3.jpg')">
</body>
</html>
FireFox does not allow to open a local file. But if you want to use this for testing a different image (which is what I just needed to do), you can simply save the whole page locally, and then insert the url(file:///somewhere/file.png) - which works for me.
I was reading this article http://www.sitepoint.com/using-unprefixed-css3-gradients-in-modern-browsers/ .I created this little demo of what this article teaches.
<html>
<head>
<title>Css Gradients</title>
<style>
.demo{
height: 200px;
width: 400px;
margin-bottom: 10px;
background: linear-gradient(to right,red,yellow);
/*background: linear-gradient(23deg,red,yellow);*/
}
#radial{
/*background: radial-gradient(at center,red,yellow);*/
background: radial-gradient(circle closest-corner,red,yellow);
}
</style>
</head>
<body>
<div class="demo"></div>
<div class="demo" id="radial"></div>
</body>
</html>
Now the problem is,Firefox is rendering the background gradient correctly but Google Chrome(version 22) is not rendering the background gradient at all.See the screenshots
At the moment (Chrome 24 / Safari 6) Webkit still have not added support for unprefixed css3 gradients yet.
This is a bit sad, if you consider the fact that even IE10(!) uses unprefixed syntax already.
Reference: http://caniuse.com/#search=grad
I am working on a website which uses scales for showing stats.
I have created background gradients for each scale using CSS3 and the HTML5 meter element as in this tutorial:
HTML5-Meter-Shim
It works on all browsers expect Chrome and Opera, which show the default color.
Is this possible in Chrome and Opera, or is there any other solution?
Here's my work:
http://jsfiddle.net/KRnUd/2/
Use RGB color syntax, background-image instead of background, and meter attributes to get it fully working in Chrome and partially working in Opera:
<!doctype html>
<html lang="en">
<head>
<title>Meter Usage</title>
<style type="text/css">
meter {
display: inline-block;
height: 16px;
width: 200px;
overflow: hidden;
background-color: rgb(237,237,237);
background-image: -webkit-linear-gradient(top, rgb(237,237,237),rgb(187,187,187) 36%,rgb(247,247,247) ); /* Chrome10+,Safari5.1+ */
background-image: -o-linear-gradient(top, rgb(237,237,237),rgb(187,187,187) 36%,rgb(247,247,247) ); /* Opera 11.10+ */
}
</style>
</head>
<body>
<meter min="1024" max="10240" low="2048" high="8192" value="9216"/>
</body>
</html>
The body-Tag of a HTML-File does have a background-image applied:
body {… background: #fff url(./img/bg-body.jpg) no-repeat 0 82; …}
everything works just fine with WebKit (Safari, Chrome…) and even Trident (IE) … BUT the background-image is not showing in Gecko (Firefox) … and if I add the DOCTYPE to the document, it doesn't work anywhere.
<html>
<head>
<style type="text/css">
body {… background: #fff url(./img/bg-body.jpg) no-repeat 0 82; …}
</style>
</head>
<body>
…
</body>
</html>
It does also not work with no divs, no content, no nothing…
Any ideas?
You need to specify the unit for your background position
body{ background: #fff url(./img/bg-body.jpg) no-repeat 0 82px }
it seems to work in webkit without it. But gecko needs a unit. Then it should work.