So the problem I am having is the webpage is not loading the background image Following image address does not seem to load so page background stay's pitch black and nothing can be read because of it.
Edit: Here is my full css code.
#intro {
position: relative;
padding-bottom: 102px;
min-height: 900px;
width: 100%;
background: #161415
background-image: url("http://example.com/images/38697eae8ca030cd1f8cd11d752249ef.jpg"); no-repeat center center;
background-size: cover !important;
-webkit-background-size: cover !important;
}
this is what my index.html looks like.
<!DOCTYPE html>
<!--[if lt IE 8 ]><html class="no-js ie ie7" lang="en"> <![endif]-->
<!--[if IE 8 ]><html class="no-js ie ie8" lang="en"> <![endif]-->
<!--[if (gte IE 8)|!(IE)]><!--><html class="no-js" lang="en"> <!--<![endif]-->
<head>
<!--- Basic Page Needs
================================================== -->
<meta charset="utf-8">
<title>Coming soon</title>
<meta name="description" content="">
<meta name="author" content="">
<!-- Mobile Specific Metas
================================================== -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<!-- CSS
================================================== -->
<link rel="stylesheet" href="http://example.com/new/css/default.css">
<link rel="stylesheet" href="http://example.com/new/css/layout.css">
<link rel="stylesheet" href="http://example.com/new/css/media-queries.css">
<!-- Script
================================================== -->
<script src="http://example.com/new/js/modernizr.js"></script>
<!-- Favicons
================================================== -->
<link rel="shortcut icon" href="example.com/new/favicon.png" >
</head>
<body>
<div id="preloader">
<div id="status">
<img src="http://example.com/new/images/preloader.gif" height="64" width="64" alt="">
</div>
</div>
<!-- Intro Section
================================================== -->
<section id="intro">
<header class="row">
<div id="logo" >
<a href="#" >
<img src="http://185.27.134.27/login_logo/ce7c43a1c5602d942c279e478e4c7823.jpg" alt="Zoon">
</a>
</div>
<nav id="nav-wrap">
<a class="menu-btn" href="#nav-wrap" title="Show navigation">Show navigation</a>
<a class="menu-btn" href="#" title="Hide navigation">Hide navigation</a>
<ul id="nav" class="nav">
<li class="current"><a href="http://example.com" target="_blank">Home</a></li>
<li><a href="http://example.com/whyus.php" target="_blank">About</a></li>
</ul> <!-- end #nav -->
</nav> <!-- end #nav-wrap -->
</header> <!-- Header End -->
<div id="main" class="row">
<div class="twelve columns">
<p>Attention if you are the website owner you are seeing this page because you have not yet uploaded or installed a website if you are having problems please contact support through your cpanel or you may login below to edit your website.</p>
<!-- Begin MailChimp Signup Form -->
<div id="mc_embed_signup">
</div>
<form action="http://cpanel.example.com/login.php" method="post" name="login" >
<label for="mod_login_username">Cpanel Username:<input name="uname" id="mod_login_username" type="text" class="inputbox" alt="username" size="10" /></label>
<label for="mod_login_password">Password:<input type="password" id="mod_login_password" name="passwd" class="inputbox" size="10" alt="password" /></label>
<input type="submit" name="Submit" class="button" value="Login" />
<a href="http://cpanel.example.com/lostpassword.php">Lost your password?</a>
</div>
</div> <!-- main end -->
</section> <!-- end intro section -->
<!-- About Section
================================================== -->
<section id="about">
<div class="row section-header">
<div class="twelve columns">
<div class="icon-wrap">
<i class="fa fa-group"></i>
</div>
</div>
</div> <!-- end section-header -->
<div class="row section-content">
<div class="six columns">
</div>
<div class="six columns">
</div>
</div> <!-- end section-content -->
<div class="row section-content">
<div class="six columns">
</div>
<div class="six columns">
</div>
</div> <!-- end section-content -->
<div id="call-to-action">
<div class="row section-ads">
<div class="twelve columns">
<div class="action">
</div>
</div>
</div> <!-- end section-ads -->
</div> <!-- end call-to-action -->
</section> <!-- About Section End-->
<!-- Location Section
================================================== -->
<section id="location">
<div class="contacts">
<div class="row contact-details">
<div class="columns">
</div>
<div class="columns">
</div>
<div class="columns end">
</div>
</div> <!-- end contact-details -->
</div> <!-- end contacts -->
</section> <!-- end location section -->
<!-- footer
================================================== -->
<footer>
<div class="row">
<div class="twelve columns">
<ul class="copyright">
<li>© Copyright 2016 Coming soon</li>
</ul>
</div>
</div>
<div id="go-top"><a class="smoothscroll" title="Back to Top" href="#intro"><i class="icon-up-open"></i></a></div>
</footer> <!-- Footer End-->
<!-- Java Script
================================================== -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="http://empire-webhosting.com/new/js/jquery-1.10.2.min.js"></script>')</script>
<script type="text/javascript" src="http://example.com/new/js/jquery-migrate-1.2.1.min.js"></script>
<script src="http://maps.google.com/maps/api/js?sensor=true" type="text/javascript"></script>
<script src="http://example.com/new/js/gmaps.js"></script>
<script src="http://example.com/new/js/waypoints.js"></script>
<script src="http://example.com/new/js/jquery.countdown.js"></script>
<script src="http://example.com/new/js/jquery.placeholder.js"></script>
<script src="http://example.com/new/js/backstretch.js"></script>
<script src="http://example.com/new/js/init.js"></script>
</body>
</html>
