Menu
I have a div #service_wrap it has an image that should cover 100%width of the page it works fine in firefox,chrome and edge. But IE 11 it centers the image and does not cover the div
What is the IE equivalent of background-size: cover;
css
#service_wrap{
padding:0;
margin:0;
width:100%;
height:750px;
max-height:750px;
display:table;
background: url(../images/service_header.jpg) no-repeat center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
html
<div id="service_wrap" >
<div id="service_top" >
<h1>WE WORK CLOSELY WITH OUR PARTNERS TO GET YOU THE BEST SERVICE.</h1>
<h2>Click on a service below to learn more about how we partner with each one.</h2>
</div><!--service_top-->
<div id="service_bottom" >
<div class="services_holder">
<a href=""><div class="service1"></div></a><!--service1-->
<a href=""><div class="service2"></div></a><!--service2-->
<a href=""><div class="service3"></div></a><!--service3-->
<a href=""><div class="service4"></div></a><!--service4-->
<a href=""><div class="service5"></div></a><!--service5-->
<a href=""><div class="service6"></div></a><!--service4-->
<a href=""><div class="service7"></div></a><!--service5-->
</div><!--services_holder-->
</div><!--service_bottom-->
</div><!--service_wrap-->
If you insert the code below into a webpage on IE11 it does not use the full width
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>this is a title</title>
<link rel="stylesheet" href="css/partners.css" type="text/css" />
<link rel="stylesheet" href="css/style.css" type="text/css" />
<style>
#service_wrap{
background: url(http://test.finelinewow.com/images/partner_header.jpg) no-repeat center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
</style>
</head>
<body>
<!----------------------------------------------------------------service---------------------------------------------------------------->
<div id="service_wrap" >
<div id="service_top" >
<h1>WE WORK CLOSELY WITH OUR PARTNERS TO GET YOU THE BEST SERVICE.</h1>
<h2>Click on a service below to learn more about how we partner with each one.</h2>
</div><!--service_top-->
<div id="service_bottom" >
<div class="services_holder">
<a href="#liberty_towing"><div class="service1"></div></a><!--service1-->
<a href="#auto_palace"><div class="service2"></div></a><!--service2-->
<a href="#discount_auto"><div class="service3"></div></a><!--service3-->
<a href="#speedy_car"><div class="service4"></div></a><!--service4-->
<a href="#solid_insurance"><div class="service5"></div></a><!--service5-->
<a href="#sevan_auto"><div class="service6"></div></a><!--service4-->
<a href="#gray_gables"><div class="service7"></div></a><!--service5-->
</div><!--services_holder-->
</div><!--service_bottom-->
</div><!--service_wrap-->
<!----------------------------------------------------------------/service---------------------------------------------------------------->
</body>
</html>
879
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
fixed the issue. Code would work on local machine,jfiddle and codepen but when uploading the site the above code needed to be added to display correctly.
172
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With