I have the following inline SVG defined as a background-image in my css.
div {
border: 1px solid black;
background-image: url("data:image/svg+xml;charset=utf8,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' preserveAspectRatio='none' viewBox='0 0 10 10'> <path d='M2 10 L8 0 L10 0 L10 10' fill='%238A92DF'></path></svg>");
background-repeat: no-repeat;
background-position: center center;
background-size: 100%;
}
It works fine in Chrome, Firefox and Edge, but fails in Internet Explorer 11. Why?
JSfiddle here.
You have to full URL encode your svg.
If you're using VSCode, there is a extension called "URL Encode" that'll do this for you... OR you can easily find one online: https://meyerweb.com/eric/tools/dencoder/
Note that I've also removed the "version" attribute and the ";charset=utf8" part, not sure if needed, but to clear things up...
div {
border: 1px solid black;
background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2010%2010'%3E%3Cpath%20d%3D'M2%2010%20L8%200%20L10%200%20L10%2010'%20fill%3D'%238A92DF'%3E%3C%2Fpath%3E%3C%2Fsvg%3E");
background-repeat: no-repeat;
background-position: center center;
background-size: 100%;
width: 500px;
height: 500px;
}
<div></div>
Related
I have an 256x256 image called myImg.png. I want to make an hr element that uses repeating 16x16 versions of myImg.png.
My CSS so far:
hr#target {
border: 0;
height: 15px;
background-color: #333;
background-image: url(myImg.png);
background-repeat: repeat-x;
overflow: hidden;
}
But this only shows two repetitions of my image at the full 256x256 size where I can only see 15px of it.
How do I make an hr where the background image is a row of small versions of myImg.png?
Use background-size as in:
hr#target {
border: 0;
height: 15px;
background-color: #333;
background-image: url(myImg.png);
background-repeat: repeat-x;
background-size: 16px 16px;
overflow: hidden;
}
As #bjskistad mentioned, you should really be using an image that's already sized correctly.
Image shows fine on Chrome OS X. I also have another SVG (background-image) which is showing, but this one isn't on iOS.
I've read that there are limits for images on iOS devices, but this isn't a particularly big image. Here are the contents of the SVG, exported from Illustrator. Apache seems to be serving the correct content-type: svg+xml.
I've created a pen here – http://codepen.io/anon/pen/GJJWbN
<h1>Logo</h1>
h1 a {
background: url('http://bogglo-beta.liprock.com/img/logo.svg') 0 0 no-repeat;
/* background-size: contain; */
border: solid 1px tomato;
display: inline-block;
height: 58px;
text-indent: -9999px;
width: 180px;
}
Here's a screenshot with the image not showing:
Has anyone experienced this before?
I've been trying to use a SVG file as background for a header on my site, but it doesn't seem to show up in Webkit browsers (I tried Chrome and Safari; on mac). Firefox seems to display it correctly.
Here's my CSS:
header {
overflow: auto;
width: 100%;
height: 80px;
background: url(../img/navbg.svg) no-repeat;
background-size: 100%;
-o-background-size: 100%;
-webkit-background-size: 100%;
-moz-background-size: 100%;
margin: 0 0 20px 0;
padding: 0;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
box-shadow: inset 0 0 1px #fff,
inset 0 1px 0 rgba(255,255,255,.3),
0 1px 2px rgba(0,0,0,.5);
}
Any ideas on how to fix this?
Check this , it may helps you.
http://helephant.com/2009/08/12/svg-images-as-css-backgrounds/
I found an example done in March 2012. With the warning:
"SVG included as CSS can't be scripted and positioning is hard. Therefore only use this method for background illustrations."
Hope this helps: http://tecfa.unige.ch/guides/svg/ex/html5/html5-with-css-background.html
Check if your SVG is missing height & width declarations. Without these, background SVG's won't show in Safari 5.
Well, I have a website and the front page has this image repeated all the way down. While on Chrome, is only repeats once, just like I want it to.
body {
color: #999999;
background-color: #490000;
background:url('http://pigymunk.co.uk/bgasdf2.png') fixed, url('http://pigymunk.co.uk/bgasdf.png') fixed;
background-repeat: no-repeat, repeat;
background-position: left top, left top;
}
You have
background-repeat: no-repeat, repeat;
You can only specify either no-repeat or repeat - not both, e.g.
background-repeat: no-repeat;
Chrome supports CSS3 syntax allowing both but many browsers such as IE consider this invalid as it doesn't support it. (Remember CSS2 is standard, CSS3 is only partially supported)
Updated:
To create a layerd background you need to use layers surprise surprise :).
body {
color: #999999;
background-color: #490000;
background: url('http://pigymunk.co.uk/bgasdf.png');
background-repeat: repeat;
background-position: left top;
}
#logo {
height: 200px;
width: 220px;
background: url('http://pigymunk.co.uk/bgasdf2.png') no-repeat top left;
position: absolute;
top: 0px; left: 0px;
}
HTML:
<body>
<div id="logo"></div>
...
or better yet, don't use a background image for your logo as it won't appear when background images are turned off, e.g. for printing. Crop the image to the correct size for the logo and put it in the html
<body>
<div id="logo"><img src="http://pigymunk.co.uk/bgasdf2.png" alt="Piggymunk logo" /></div>
...
jsfiddle example: http://jsfiddle.net/ytL2w/
This works fine in IE9 for me:
body {
color: #999999;
background-color: #490000;
background: url('http://pigymunk.co.uk/bgasdf2.png') no-repeat fixed left top,
url('http://pigymunk.co.uk/bgasdf.png') repeat fixed left top;
}
Try this:
body {
color: #999999;
background-color: #490000;
background-image:url('http://pigymunk.co.uk/bgasdf2.png');
background-position: fixed;
background-repeat: no-repeat;
}
Is there any way to apply multiple background images using sprites?
something like the below code?
background-image: url("../images/button-sprite.gif"),url("../images/button-sprite.gif");
background-position: right -92px, 0px 0px ;
background-repeat: no-repeat;
font-size: 1em;
margin-right: 5px;
padding-right: 35px;
width:500px;
height:500px
You can have multiple background images
see the EXAMPLE
Here is my css:
.sprite_box
{
background:
url(http://i.imgur.com/On0lt.png) -162px -551px no-repeat,
url(http://i.imgur.com/On0lt.png) -200px -530px no-repeat,
transparent;
height: 24px;
width: 81px;
margin:5px;
}
Read about sprite here
Here you can create sprite image
Here you create css for your sprite image
Yes, you can have multiple background images, but it is limited to box items. There is some info on this at CSS3.info
Yes, you can. The shorthand method is less verbose:
.sprite {
background:
url(http://www.google.com/images/srpr/nav_logo41.png) 0 -243px no-repeat,
url(http://www.google.com/images/srpr/nav_logo41.png) 42px -93px no-repeat,
#ccc;
width: 160px;
}
Note that you can only state one background color, and you state it at the end of the declaration.
See it in aciton http://jsfiddle.net/TMHPh/