Cover image not setting up in safari and ie 9

Question

I need to set cover background image of main section. The code is Working fine in all browsers except safari and ie9.

Following is the code:

css

.main{ 
background:#202020 url(../images/video-bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
float:left; width:100%;
padding-bottom:120px;
height:100vh;
min-height:100%;
max-height:100%;
top:0px;
bottom:0px;
}

html

<div class="main">
<!--[Start] Header-->
<header>
    <nav class="navbar navbar-default navbar-fixed-top">
        <div class="container-fluid">
            <div class="navbar-header">
                <a href="#" class="navbar-brand">Degetal Agency</a>
            </div>

            <div id="navbar">
                <ul class="nav navbar-nav navbar-right">
                    <li><a href="">Projects</a></li>
                    <li><a href="">Studio</a></li>
                    <li><a href="">Approach</a></li>
                    <li><a href="">Blog</a></li>
                    <li><a href="">Contact</a></li>
                </ul>   
            </div>
        </div>  
    </nav>

    <div class="col-xs-12">
        <div class="container-75">
            <div class="text-center">
                <div class="vcenter">
                    <h1>Digital solutions led by clarity, simplicity & honesty</h1>
                </div>  
                <div class="clearfix"></div>
                <a class="font18" href="javascript:void(0);">Learn More</a>
            </div>
        </div>          
    </div>
</header>
<!--[End] Header-->
</div>

Please help me fix the issue in safari and ie.

Your feedback is really appreciated.

this may be works for you https://css-tricks.com/perfect-full-page-background-image/ or http://stackoverflow.com/questions/18447082/css-background-size-property-cross-browser-solution — Roy Sonasish, Jun 18 '15 at 12:38
I have checked this url https://css-tricks.com/examples/FullPageBackgroundImage/progressive.php its working fine in ie9 and safari — Roy Sonasish, Jun 18 '15 at 12:47
I need to make on header section as cover. Ex: http://weareadaptable.com/ — puneet dixit, Jun 18 '15 at 12:55

score 0 · Answer 1 · answered Jun 18 '15 at 13:04

0

Rather than using cover, try using 100% auto or auto 100% based on screen orientation.

answered Jun 18 '15 at 13:04

JordyvD

1,565
1
18
45

Cover image not setting up in safari and ie 9

1 Answers1