I'm using SVG files as backgrounds for my HTML elements. It works fine in all major browsers. The problem is my site needs to also work and look correctly in Internet Explorer 9. In IE9 the SVG backgrounds are always "moved" to the right and cut, like below:
The element above is a close link of a modal. Structure and styles of the close link:
HTML
CSS
.aq-modal-close {
display: block;
width: 12px;
height: 12px;
background: url('../img/modal_close.svg') no-repeat 0 0 scroll;
background-size: 12px 12px;
float: right;
margin-top: 5px;
}
The SVG file is bigger than it should, so I use background-size to adjust it. Other SVGs are used the same way. Any ideas what might be wrong? Again, this happens only in IE9.
You can add a background-position with negative values:
DEMO
.close {
display: block;
width: 52px;
height: 52px;
background: url('image.svg') no-repeat 0 0 scroll;
background-size: 52px;
background-position: -10px 0px;
border: 1px solid black;
}
As #zeidanbm stated in the comment above, the answer to the problem was in an old post: Background-size with SVG squished in IE9-10.
Basically, the designer followed the instructions and the SVGs are displayed correctly now in IE9, as background images.
Related
I have the image in the correct folder but I want to add a text box on top of an image and I was told the best way to do it is make the image a background image, but when I followed a tutorial it never appeared?
anyway here is my html
<div class="module">
<h2>blah blah</h2>
</div>
and my CSS
.module {
margin: 10px;
width: 1530px;
height: 717px;
display:block;
background: url('C:\Users\Jason\Desktop\champions\images\shop.png');
background-size: cover;
position: relative;
}
h2 {
position: absolute;
bottom: 100px;
left: 100px;
background: rgba(0, 0, 0, 0.75);
padding: 4px 8px;
color: white;
margin: 0;
font: 14px PTSans;
}
the image is full width of the screen so I am using container-fluid in bootstrap and the text box will be in the middle of the image.
You may call the local file as background like this:
background: url("file://PATH-TO/file.jpg");
Keep in mind that the string inside parentheses should provide a URL to the file.
Also, you have the option to put a path in it.
background: url("PATH-TO/file.jpg");
Change the backlashes. From this...
background: url('C:\Users\Jason\Desktop\champions\images\shop.png');
To this
background: url('C:/Users/Jason/Desktop/champions/images/shop.png');
Cheers.
It looks fine of your css. Try to use firefox or chrome debugger to check if the background image can be loaded or not. Try to change the value of the background-size. Sometimes the background image is too large that you can only see part of it (which may be completely white) on the screen.
Your path is wrong
try this: url('images/shop.png') - if your css is in champions
I will like to get help please with an issue I got in both IE11 and Opera with CSS SVG sprite.
For some reason both of these browsers are showing the SVG in a very wrong way and some times even not at all.
Here's my code which works great on Chrome, Safari and Firefox:
.item {
width: 50px;
height: 50px;
float: left;
margin-right: 40px;
background: #eee url('1.svg') no-repeat 0 0;
}
.item.i1 {
background-position: 5% 40%;
background-size: 440%;
}
.item.i2 {
background-position: 43.3% 40%;
background-size: 417%;
}
.item.i3 {
background-position: 82.6% 40%;
background-size: 404%;
}
A live jsfiddle demo: http://jsfiddle.net/DBH29/
Am I missing something? if not and my code is fine, and there's no way to fix it, then how can I make a CSS fallback to an image (PNG) or how to detect it with Modernizr please?
possible related to: SVG in Opera using CSS background-image with scaling , in short to work with Opera 12:
"Removing the width and height attributes in the svg"
For some reason images are being displayed as a thin line in IE 8 and earlier and i cannot work out why this could be. I'm using CSS to re-size the images for the homepage, the reason for me using CSS to re-size the images is because the thumnails are being generated by Wordpress.
This is what it looks like in IE...
How it looks in Firefox and all other browsers...
The CSS i'm using to size the images...
.home .attachment-home-post-thumbnail {
box-shadow: none;
height: 125px;
margin-right: 8px;
margin-top: 8px;
width: 140px;
}
Any ideas?
I've been working on a site with a large circular logo in the header. The logo is an anchor tag set up as follows:
<a id="siteLogo" href="#" shape="circle" coords="157,155,147"><i>Site Logo</i></a>
Relevant CSS follows:
i {
visibility: hidden; }
#siteLogo {
background-image: url(../imgs/sprites_main2.png);
background-position: 1000px 1000px;
background-repeat: no-repeat;
border: none;
border-radius: 100%;
display: block;
height: 294px;
left: 10px;
position: relative;
top: 8px;
width: 294px; }
#siteLogo:hover {
background-position: -15px -324px; }
Setting the shape and coords attributes on the anchor tag will give me a link with a circular clickable (opposed to the normal square) area in Opera and Firefox. Chrome, Safari, and IE do not support theses attributes on anchor tags. I did some checking and it seems that HTML5 also does not support these attributes (correct me if I am wrong).
The question I pose to the community is simple. Is there anyway I can achieve a similar result as above that is HTML5 compliant and supported by the major browsers (I can live without IE support) without using an image map or adding any image tags to my HTML?
Javascript or jQuery solutions are acceptable.
I would suggest using padding property to increase the size of clickable area..
This may be a little late, but you can use a <div>, etc, with rounded corners. E.g.
<div style="border-radius:50px; border:1px solid black;
width:100px; height:100px;"
onclick="merry_go()">Stuff goes here</div>
gets you a 100px circle.
I have anchor element with CSS class.
All browser show the BG-image well, except IE 7 (it won't show the image at all). (I added the _attributes since I saw thats what is used in other sites).
When using IE Developr tools in IE7 it says background-image: none... Thanks
color: #FFFFFF;
cursor: pointer;
height: 102px;
left: 0;
margin-left: -7px;
position: fixed;
text-indent: -9999px;
top: 25%;
width: 35px;
z-index: 9998;
background-color: #279cff;
border-color: #279cff;
border-style: outset outset outset none;
border-width: 1px 1px 1px medium;
background-repeat: no-repeat;
height:170px;
background-image: url(../images/1.png);
background-position: 11px;
If the background has alpha transparency you won't be able to see that in IE6 properly because it doesn't render PNGs well. Either switch to gifs OR stop supporting ie6 :P
The underscore is a hack for CSS attribute to work only on 6, don't use it but use different CSS for IE.
IE6 doesn't handle very well with png. try to use jpg and it will probably work.
If not, try to float or display: block the element to see if it shows the background.
If your starting with _property it is for IE6 hacking. It will work only IE6. For IE6 use _property for IE7 use #property