Ok, so I have a background image using the background-size: cover. Now I know IE does not like it. So I am trying to implement some of the methods it discusses on this page: http://css-tricks.com/perfect-full-page-background-image/ using a CSS file for IE. I want my background-size:cover to stay the same for all browsers but IE and then an IE CSS to kick in for IE browsers so it has the same look and feel. The solutions I tried are not working. Please help. My portfolio page url is: http://spenry.mydevryportfolio.com/portfolio/
The header/background image HTML (I added the Div and IMG here to kick in for my CSS IE but in other browsers I have in my regular style sheet to hide the contents of this div because in other browsers my image is displayed through my CSS below as a background-size cover)
<article class="fullheight">
<div id="bg">
<img src="builds/images/gallery/web_photo.jpg" alt="Girl shooting an arrow with her bow">
</div>
<div class="hgroup">
<h1>Bowpen Designs</h1>
<h2>Aim Your Sites</h2>
<p><a href="#about"><img src="builds/images/misc/arrow.png" alt="down arrow"></a></p>
</div> <!-- hgroup div -->
</article> <!-- fullheight -->
CSS:
header .fullheight {
background:url(../images/gallery/web_photo.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
display: -webkit-flex;
display: flex;
-webkit-align-items: center;
align-items: center;
-webkit-justify-content: center;
justify-content: center;
}
#bg {
display: none;
}
header .fullheight .hgroup {
padding: 100px 0;
}
header .fullheight .hgroup h1 {
color: #FFFFFF;
font-size: 5em;
font-weight: 900;
line-height: 1.15em;
text-shadow: #000000 0 0 20px;
text-align: center;
}
@media (max-width: 650px) {
header .fullheight .hgroup h1 {
font-size: 2.5em;
}
}
header .fullheight .hgroup h2 {
display: block;
color: #FFFFFF;
width: 60%;
max-width: 300px;
margin: 0 auto;
text-align: center;
border: 1px solid #FFFFFF;
margin-top: 15px;
padding: 10px;
font-size: 1.3em;
background: rgba(18, 64, 133, 0.5);
}
header .fullheight .hgroup p {
text-align: center;
}
header .fullheight .hgroup p img {
padding-top: 50px;
max-width: 50px;
}
Here is the CSS for my IE CSS - I've attempted two of the different methods here from that site but I should probably delete one. But neither worked by themselves in IE as I tried both. I must be doing something wrong.
#bg {
position: fixed;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
}
#bg img {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
min-width: 50%;
min-height: 50%;
}
.fullheight {
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/gallery/web_photo.jpg',
sizingMethod='scale');
-ms-filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/gallery/web_photo.jpg', sizingMethod='scale');
}
Hopefully this will help you. I had a project, which required a background image and I too wanted it to work in all browsers. Here is how I got mine working
css:
}