input {
border-radius: 5px;
border: none;
font: normal 13px "Trebuchet MS";
padding: 0 0 0 30px;
width: 220px;
height: 30px;
margin: 0 auto;
display: block;
background-color: #ccc;
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 250.313 250.313" width="512" height="512" enable-background="new 0 0 250.313 250.313"><path d="M244.186 214.604l-54.379-54.378c-.289-.289-.628-.491-.93-.76 10.7-16.231 16.945-35.66 16.945-56.554 0-56.837-46.075-102.912-102.911-102.912s-102.911 46.075-102.911 102.911c0 56.835 46.074 102.911 102.91 102.911 20.895 0 40.323-6.245 56.554-16.945.269.301.47.64.759.929l54.38 54.38c8.169 8.168 21.413 8.168 29.583 0 8.168-8.169 8.168-21.413 0-29.582zm-141.275-44.458c-37.134 0-67.236-30.102-67.236-67.235 0-37.134 30.103-67.236 67.236-67.236 37.132 0 67.235 30.103 67.235 67.236s-30.103 67.235-67.235 67.235z" fill="#475250" fill-rule="evenodd" clip-rule="evenodd"/></svg>');
background-size: 19px;
background-position: center 10px;
background-repeat: no-repeat;
}
This code should display a input bar with the search icon to 10px from the left and centered vertically, instead it's in the center of the bar and offset vertically. When I change:
background-position: center 10px;
to:
background-position: center left;
It does what I want it to but is missing the 10px padding to the left. Any clue as to what's going on here? I just can't get this working properly.
background-position: 10px center should do it for you.
using center and left is using keywords only, which the browser somehow is able to get right because he can tell that left is not meant as a vertical unit.
Related
Is there a way to set a background css sprites image width?
shop
a{
background-image: url(http://placehold.it/60x60/ff0000/000&text=100)!important;
background-repeat: no-repeat;
display: block;
background-position: -5px -5px;
padding: 0 0 0 30px;
}
https://jsfiddle.net/jb1prcro/
right now the above a tag is 60px width, 30px for the word 'shop', 30px padding left for the cart icon,
because I am using css sprites for the background icons, right now it is showing 60px of that background image instead of just the 30px I want to show.
I also tried background-size: 30px 30px for this A tag, but it doesn't work.
You can use the pseudo-element before:
a{
display: inline-block;
background-position: -5px -5px;
padding: 0 0 0 30px;
height:30px;
vertical-align:middle;
}
a:before {
background-image: url(http://placehold.it/60x60/ff0000/000&text=100)!important;
background-repeat: no-repeat;
width:30px;
height:30px;
display:inline-block;
content:'';
vertical-align:middle;
}
Working example: https://jsfiddle.net/mspinks/jb1prcro/2/
I am not sure what exactly you are trying to achieve, but here's a practical example:
https://jsfiddle.net/ozL0yzuy/
a {
background-image: url(http://placehold.it/60x60/ff0000/000&text=100)!important;
background-repeat: no-repeat;
display: inline-block;
width: 40px;
background-position: -10px -20px;
}
You have to set a width (and actually also a height, which I didn't do in the example) for the element itself (in this case the a tag, which can only be done if its a block or inline-block element). Then you can adjust the background position accordingly.
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>
I'm setting an svg as a background image for a div (set as a table-cell, but now it's not the point). It stretches to fit the space, and that's what I wanted, and I set some padding (IN % units) to keep the text inside the image. Now the problem is that scaling the viewport or just changing the height of the div padding and image height change differently so the text positioning is scrambled. Here is the css code:
#contenuto {
border: 0px solid;
width: 79%;
display: table-cell;
font-size: 1.0em;
padding-top: 1.5%;
padding-bottom: 1.5%;
padding-right: 5%;
padding-left: 7%;
background: url(./pic/template.svg) no-repeat;
background-size: auto 100%;
background-position:center center;
background-origin: border-box;
}
the svg file is properly set I guess:
<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 400 640" preserveAspectRatio="none">
What can I do to fix?
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.
I have the following
.toggle_container .block ul {
margin: 0 0 7px 0;
}
.toggle_container .block li {
list-style-type:none;
color: #232120;
font-size: 1.2em;
line-height:1.2em;
padding: 4px 0px 2px 23px;
background: url(images/red-bullet.gif)no-repeat;
background-position: 3% 45%;
}
The trouble is the image moves downwards if I have more than one line of text in the tag
Thanks<
Where you have:
background-position: 3% 45%;
Try using px values instead of percentages. So change the 3% and 45% to the offset of the image you want, something like 3px 45px.
You could also replace 3% and 45% with 'top left' to fix the position to the top left..
Well Isnt that typical. Done a bit more searching and found the answer, so thought I would answer my own question.
I mixed position percentages and pixels as follows:
background-position: 3% 9px;