In my web application i'm using SVG icons, main reason is dat i'm using than for multi-tenant design. I've tried a lot of options but in Internet Explorer almost every version, it doesn't work. It shows op like a o filled block.
Working code : Chrome / Mozilla / Safari
HTML:
<div class="svg_icon" id="icon_business"></div>
CSS:
#icon_business {
-webkit-mask-image: url(/svg/business.svg);
}
.svg_icon {
width: 100%;
height: 80px;
text-align: center;
mask-size: contain;
mask-repeat: no-repeat;
-webkit-mask-position-x: center;
-webkit-mask-size: contain;
-webkit-mask-repeat: no-repeat;
background-color: #00E3A7;
}
Could someone help me? What's the best way to handle this? And is there a way it works with IE 8 +
You should use background image. Also SVGs are not supported in IE8 see here.
This should work for everything above IE8:
#icon_business {
background-image: url('https://mdn.mozillademos.org/files/12676/star.svg');
}
.svg_icon {
display: block;
width: 80px;
height: 80px;
background-size: cover;
background-repeat: no-repeat;
background-position: center;
text-align: center;
background-color: #00E3A7;
}
To target IE8 you could put this in to the top of you HTML file:
<!DOCTYPE html>
<!--[if IE 8 ]> <html lang="en" class="no-js ie8"> <![endif]-->
Then using the class ie8. Use fallback image (png/jpg/gif)
.ie8 #icon_business {
background-image: url('https://mdn.mozillademos.org/files/12676/star.png');
}
Or use some javascript.
Related
I've got some trouble with my code. At the moment I'm working with HTML and CSS and got some problems with my header-banner-picture. It isn't responsive and I don't know why.
hmtl
<header id="header-banner"></header>
css
#header-banner {
width: 100%;
height: 0;
padding-top: 20.83%;
background:url("../img/header.jpg") no-repeat;
background-size: contain;
}
I'm also open for a JavaScript solution, but I really don't know why it's not working.
I' looking forward to hearing from you,
Fred
<html>
<header id="header-banner"></header>
<style>
#header-banner {
width: 100%;
height: 0;
padding-top: 20.83%;
background: url("../img/header.jpg") no-repeat;
background-size: contain;
}
</style>
</html>
my background on my div is not loading properly on iphone when using safari or chrome.it is completely responsive in Mozilla however in safari and chrome it still loads as a 100%width and 100%height.
it is the background image of the "sect" div.
this is my html
<div class="sect">
<H1>ALESH</h1>
<h2>This is me</h2>
<FORM METHOD="LINK" ACTION="Artbook.html">
<INPUT TYPE="submit" VALUE="explore my work" class="button1">
</FORM>
</div>
this is my css for pc
html, body {
height: 100%;
background-color: white;
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
background-size: cover;
}
.sect {
height: 100%;
width: 100%;
background-position: absolute;
background: url("homepage/photos/b1.jpg") no-repeat center center scroll;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
-o-background-size: cover;
padding: 0;
left: 0;
Right: 0;
margin: auto;
top: -2px;
overflow: hidden;
}
I do have a separe css file for "max device width: 480px".
however nothing works do you please know where could be a mistake ?
add this tag in the head tag
<meta name="viewport" content="width=device-width, initial-scale=1">
I had something similar:
the background image was not beeing displayed correctly on Safari & Safari mobile.
The problem is about
background-attachment: fixed
This is a bit tricky for mobile browsers.
For me I just had to leave that out.
Sometimes event the positioning is not available. So try without.
Maybe helpful for you:
Fixed background on iOS
Hope that helps.
Additional:
Also found this on Stack about that issue.
I faced my logo placement issue in IE for Vis-a-vis website. The logo looks fine in all browser except IE. So, I tried below code to fix, but no luck. Looking forward to get a best solution.
<!--[if !IE]><!-->
<style>
div.logo img {
margin-left:28%;
}
</style>
<!--<![endif]-->
<!--[if IE]><!-->
<style>
div.logo img {
margin-left:10%;
}
</style>
<!--<![endif]-->
Thanks
A few things are rendering incorrectly in Internet Explorer (not to sure why). So try increasing the size of your .wrap class and slightly increasing the left margin on the logo.
New CSS:
div.logo img {
margin-top: -10% !important;
margin-left: 29% !important;
background-image: url(img/logo-bg.png);
background-repeat: no-repeat;
background-size: cover;
padding: 45px 59px;
background-position: center center;
}
div.wrap {
max-width: 916px;
margin: 0 auto;
}
EDIT:
READ HERE. Using a conditional statement, like what you have does, to target IE10 and above will not work. Targeting IE9 and below is not accessible via this method. To target IE10 and above, you must use Javascript/jQuery or a specific CSS media query like below:
#media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
div.logo img {
margin-top: -10% !important;
margin-left: 29% !important;
background-image: url(img/logo-bg.png);
background-repeat: no-repeat;
background-size: cover;
padding: 45px 59px;
background-position: center center;
}
div.wrap {
max-width: 916px;
margin: 0 auto;
}
}
I am using the following CSS for Retina images and it works perfectly in FF, Chrome, Safari but not in IE.
Is there a fix for IE for using background-size - and if so, how could I implement it using my current code?
CSS:
.arrow-big-right {
display: block;
width: 42px;
height: 48px;
margin-bottom: 1.8em;
background-image: url(arrow-big-right.png);
background-repeat: no-repeat;
background-size: 42px 48px;
}
HTML
<div class="arrow-big-right"></div>
Can someone explain how I fix this for IE?
Many thanks for any help :-)
IE8 and below simply don't support background-size so you're either going to have to use the AlphaImageLoader Filter which has been supported since IE5.5:
.arrow-big-right {
display: block;
width: 42px;
height: 48px;
margin-bottom: 1.8em;
background-image: url(arrow-big-right.png);
background-repeat: no-repeat;
background-size: 42px 48px;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader( src='arrow-big-right.png', sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader( src='arrow-big-right.png', sizingMethod='scale')";
}
Or use some method of targeting IE versions via CSS to apply an alternative to your background for IE8 and below users.
It's also worth noting, as Matt McDonald points out, that you may see two images as a result of using this technique. This is caused by the IE filter adding a background image in addition to, instead of replacing, the standard background image. To resolve this, target IE via css using your preferred method (here's a method, my personal favourite) and remove the standard background-image for IE8 and below.
Using the first technique from Paul Irish's blog post to do this, you could use the following:
.arrow-big-right {
display: block;
width: 42px;
height: 48px;
margin-bottom: 1.8em;
background-image: url(arrow-big-right.png);
background-repeat: no-repeat;
background-size: 42px 48px;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader( src='arrow-big-right.png', sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader( src='arrow-big-right.png', sizingMethod='scale')";
}
.ie6 .arrow-big-right,
.ie7 .arrow-big-right,
.ie8 .arrow-big-right {
background-image: none;
}
I have an issue with background-position in mobile safari. It works fine on other desktop browsers, but not on iPhone or iPad.
body {
background-color: #000000;
background-image: url('images/background_top.png');
background-repeat: no-repeat;
background-position: center top;
overflow: auto;
padding: 0px;
margin: 0px;
font-family: "Arial";
}
#header {
width: 1030px;
height: 215px;
margin-left: auto;
margin-right: auto;
margin-top: 85px;
background-image: url('images/header.png');
}
#main-content {
width: 1000px;
height: auto;
margin-left: auto;
margin-right: auto;
padding-left: 15px;
padding-right: 15px;
padding-top: 15px;
padding-bottom: 15px;
background-image: url('images/content_bg.png');
background-repeat: repeat-y;
}
#footer {
width: 100%;
height: 343px;
background-image: url('images/background_bottom.png');
background-position: center;
background-repeat: no-repeat;
}
Both "background_top.png" and "background_bottom.png" are shifted too far to the left. I've googled around, and as far as I can tell, background-position IS supported in mobile safari. I've also tried every combination of keywords ("top", "center", etc.), px, and %. Any thoughts?
Thanks!
Update: here's the markup in the .html file, which displays the design & layout fine in other browsers: (I also updated the above css)
<html lang="en">
<head>
<title>Title</title>
<link rel="Stylesheet" type="text/css" href="styles.css" />
</head>
<body>
<div id="header"></div>
<div id="main-content"></div>
<div id="footer"></div>
</body>
</html>
Both background images are very wide (~2000px) so as to take up space on any sized browser.
P.S. I know that there's probably a few more efficient CSS shortcuts I could be using, but for now I like having the code organized like I have it for visibility.
The iPhone/Webkit browser cannot center align background images when placed in the body tag. The only way around this is to remove the background image from your body tag and use an additional DIV as a wrapper.
#wrapper {
background-color: #000000;
background-image: url('images/background_top.png');
background-repeat: no-repeat;
background-position: center top;
overflow: auto;
}
<html lang="en">
<head>
<title>Title</title>
<link rel="Stylesheet" type="text/css" href="styles.css" />
</head>
<body>
<div id="wrapper">
<div id="header"></div>
<div id="main-content"></div>
<div id="footer"></div>
</div>
</body>
</html>
It'll work with
background-position-x: 50%;
background-position-y: 0%;
and still add
background-position: center top;
for other browsers.
Apparently, when you "scroll" on an iPhone / iPad, you're not scrolling the page in the same way as you do in a desktop browser. What you're doing is more like moving the whole page within a viewport. (I'm sure someone will correct me if I'm using the wrong terminology here.)
This means that background-position: fixed is still "supported" but has no real effect, since the whole page is moving within the viewport rather than the page content scrolling within the page.
Create a wrapper ID to place in the body, then include the following CSS:
#background_wrap {
z-index: -1;
position: fixed;
top: 0;
left: 0;
height: 100%;
width: 100%;
background-size: cover;
background-image: url('../images/compressed/background-mobile.png');
background-repeat: no-repeat;
background-attachment: scroll;
}
Just ensure that none of your content goes within the div otherwise the whole page will be fixed with no scrolling.
I have this problem and I'm addressing it by getting rid of my fixed footer using a separate style as mentioned here: How to target CSS for iPad but exclude Safari 4 desktop using a media query?