Chrome don't show css background-img-Twitter bootstrap

FedorHostryy
September 21, 2019
172 views
0 votes
2 Answers

My problem is that when I check the page on the internet with Chrome on macOS it doesn’t show background-images from CSS stylesheet. However, when I check it in Coda 2 everything works fine. Moreover it works when I open page in Chrome when I open the html file. Can you just tell what the problem might be, cause I’ve tried nearly everything?

http://avelitest.epizy.com/index.html

P.S.

I think the problem is somewhere in CSS cause at first it was working fine.

CODA 2

CHROME

html, body {
      cursor: url(file:///htdocs/img/aperture3.png), auto !important;         
     }
	
body {
	
  margin: 0 auto;
  max-width: 100%;
 
}
a:link, a:visited, a:hover, a:active {
	
	
}
* {
      box-sizing: border-box;
      margin: 0%;
      padding: 0%;
      font-family: "Darker Grotesque" !important;
}

/*--------------- hero section --------------- */

.video-container {
      position: absolute;
      width: 100%;
      height: 100vh;
      overflow: hidden;
}

video {
      object-fit: cover;
      width: 100vw;
      height: 100vh;
      position: absolute;
      top: 0;
      left: 0;
}

.video-container::after {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100vh;
      background: #1b1b1b;
      opacity: 0.8;
}

.header {
      position: absolute;
      top: 50%;
      left: 40%;
      transform: translate( -60%, 100%);  
        
}

.header h1 {
      color: #d3ae87;
      font-size: 80px !important;
      display: inline;
      transform: translate;
      text-align: center !important;
      padding-right: -200px;
 }

@media(max-width: 900px) {
      .header {
            left: 50%;
      }

      .header h1 {
            font-size: 34px !important;
            text-align: center;
      }
}

a:hover {
	text-decoration: none;
	
}


/*--------------- navigation --------------- */

.nav {
	
      width: 100%;
      height: 80px;
      position: fixed;
      z-index: 2;
      
}

.nav.scrolled {
	  width:100%;
      background-color: #161616 !important;
      transition: background-color 500ms linear;
}

.nav #brand {
      float: left;
      display: block;
      margin-left: 1.5%;
      line-height: 80px;
      font-weight: bold;
      text-transform: uppercase;
      font-size: 40px;

}
.nav #brand a {
      color: #fff;
      font-family: Poppins !important;
      transition: all 500ms ease-out;
}

.nav #brand a:hover {
      text-decoration: none;
     
}

.nav #menu {
      float: left;
      right: 40px;
      position: fixed;
}

.nav #menu li {
      padding-left: 40px;
      display: inline-block;
      font-weight: lighter !important;
      text-transform: uppercase;
      font-size: 14px;
      line-height: 80px;
      position: relative;
      transition: all 500ms ease-out;
}

	 .nav #menu li a {
      font-family: sans-serif !important;
      color: rgb(156, 156, 156);
      transition: all 500ms ease-out;
}

.nav #menu li a:hover {
	  text-shadow: 0 0 2px #d3bc97, 0 0 5px #d3bc97, 0 0 8px #d3bc97, 0 0 10px #d3bc97, 0 0 12px #d3bc97, 0 0 15px #d3bc97;
	  color: white;
      text-decoration: none;
      transition: all 500ms ease-out;      
       -webkit-filter: drop-shadow(0px 0px 20px #d3bc97) ;
       filter: drop-shadow(0px 0px 20px #d3bc97) ;
       
}


#toggle {
      position: absolute;
      right: 40px;
      top: 20px;
      font-weight: 300;
      color: #fff;
      text-transform: uppercase;
      letter-spacing: 2px;
      z-index: 2;
      width: 30px;
      height: 30px;
      float: right;
      transition: all 0.3s ease-out;
      visibility: hidden;
      opacity: 0;
}

.close-btn {
      position: absolute;
      right: 30px;
      font-weight: 300;
      color: #fff;
      text-transform: uppercase;
      letter-spacing: 2px;
      z-index: 2;
      top: -2px;
      line-height: 80px;
}
.countdown {
	text-decoration: none;
	font-weight: 400;
	filter: drop-shadow (0px 0px 5px #f24333); 
	-webkit-filter: drop-shadow(0px 0px 5px #f24333) ;
	text-shadow: 0 0 2px #f24333, 0 0 5px #f24333, 0 0 8px #f24333, 0 0 10px #f24333;
	-webkit-text-shadow:0 0 2px #f24333, 0 0 5px #f24333, 0 0 8px #f24333, 0 0 10px #f24333;
	color:white !important;
	}
#resize {
      z-index: 2;
      top: 0px;
      position: fixed;
      background: #0f0f0f;
      width: 100%;
      height: 100%;
      visibility: hidden;
      opacity: 0;
      transition: all 1s ease-out;
  
}

#resize #menu {
	  
      height: 90px;
      position: absolute;
      left: 45%;
      transform: translateX(-40%);
      text-align: center;
      display: table-cell;
      vertical-align: center;
}

#resize #menu li {
      display: block;
      text-align: center;
      padding: 10px 0;
      font-size: 50px;
      text-transform: uppercase;
      min-height: 50px;
      font-weight: bold;
      transition: all 0.3s ease-out;
}

#resize li:nth-child(1) {
      margin-top: 140px;
}

#resize #menu li a {
      color: #fff;
}

#resize #menu li a:hover {
      text-decoration: none;
}

#resize.active {
	  
      visibility: visible;
      opacity: 1;
}

@media(max-width: 900px) {
      #toggle {
            visibility: visible;
            opacity: 1;
            margin-top: 6px;
            margin-right: 4px;
      }

      nav #brand {
            margin-left: 10px;
      }

      #resize ul li a {
            font-size: 15px;
            font-family: "Poppins" !important;
            font-weight: lighter !important;
            color: rgb(156, 156, 156) !important;
            transition: all 500ms ease-out;
      }

      nav #menu {
            display: none;
      }
}

@media(min-width: 900px) {
      #resize {
            visibility: hidden !important;
      }
}

/*--------------- about section starts  --------------- */

.content {
      position: absolute;
      margin-top: 100vh;
      width: 100%;
}

section {
      padding: 140px 0;
}

.section-index {
      color: #d3ae87;
      font-weight: bolder;
      font-size: 20px;
      font-family: 'Poppins' !important;
}

.section-heading {
      color: grey;
      text-transform: uppercase;
      letter-spacing: 4px;
      font-size: 18px;
}

.section-subheading {
      color: grey;
      margin: 10px 0;
}

.section-info {
      font-size: 24px;
      color: grey;
}

.more {
      margin: 40px 0;
}

button {
      background: none;
      border: .3pt solid rgba(184, 140, 93, 0.7);
      text-transform: uppercase !important;
      font-size: 12px !important;
      letter-spacing: 2px;
      padding: 18px 36px;
      color: black;

}

#btn a {
	text-decoration: none !important;
	color: black;
}

#btn {
	 min-height: 50px;
      padding: 0 30px;
      border-radius: 0;
      font-size: 12px;
      text-transform: uppercase;
      font-family: 'Poppins' !important;
 
}

/*--------------- services section starts  --------------- */

.services {
      background: #161616;
}

.service {
      margin: 30px 0;
}

.icon ion-icon {
      font-size: 36px;
      color: #d3ae87;
}

.icon ion-icon:hover {
    text-shadow: 0 0 2px #d3bc97, 0 0 5px #d3bc97, 0 0 8px #d3bc97, 0 0 10px #d3bc97, 0 0 12px #d3bc97, 0 0 200px #d3bc97;
	filter: drop-shadow (0px 0px 5px #d3bc97);
	-webkit-filter: drop-shadow(0px 0px 5px #d3bc97) ;
	transition: 1s ease-in-out;
}

.icon-title {
      font-size: 28px;
      margin-bottom: 4px;
      color: rgb(182, 182, 182);
      font-weight: lighter;
}

/*--------------- our team section starts  --------------- */

#txt {
	display: inline !important;
	font-size: 15px;
	overflow: hidden;
	
}
.row{
	padding-right: 7%;
}
.team-member, .team-img {
      position: relative;
}

.team-img {
      background: grey;
      height: 400px;
      width: 300px;
      
      
}

.members {
      margin: 0% -15%;
      
}

.team-title {
      margin: 20px 0px;
      margin-right: -200px;      
}

.team-title h5 {
      font-size: 28px;
}

.team-title span {
      font-size: 20px;
}

.team-member {
      overflow: visible;

.team-one {
	
      background: url ("file:///htdocs/img/FEDOR.jpg") no-repeat 50% 50%;
      background-size: cover;
      
      
}

.team-two {
	
      background: url ("file:///htdocs/img/ANDREI.jpg") no-repeat 50% 50%;
      background-size: cover;
     
}

.team-three {
	
	background: url ("file:///htdocs/img/ILJA.jpg") no-repeat 50% 50%;
	background-size: cover;
	
}

/*--------------- newsletter section starts  --------------- */

.newsletter {
      padding: 140px 0;
      background: #161616;
      background: url(file:///htdocs/img/subcribe.jpg);
      background-position: center;
      background-repeat: no-repeat;
      background-size: cover;
      background-attachment: fixed;
}

.newsletter input {
      text-transform: uppercase;
}

.newsletter .news-data {
      max-width: 650px;
      margin: 0 auto;
      text-align: center;
      position: relative;
}

.newsletter h1 {
      color: #fff;
      float: center;
      position: center !important;
      margin-bottom: 40px;
}

.newsletter .form-control {
	float: center;
position: center !important;
      height: 50px;
      border-color: #fff;
      border-radius: 0 !important;
}

.form-control:focus {
      box-shadow: none !important;
      border: none !important;
}

::placeholder {
      letter-spacing: 4px;
}

.newsletter .btn {
      min-height: 50px;
      padding: 0 30px;
      border-radius: 0;
      background: #000;
      color: #fff;
      font-size: 12px;
      font-weight: 600;
      text-transform: uppercase;
      font-family: Poppins !important;
}

/*--------------- contact section starts here --------------- */

#contact-form {
      margin: 5% 0;
}

.contact .icon-title {
      margin-top: 10px;
      color: #000;
}

#contact-form ul {
      list-style: none;
      margin-bottom: 40px;
      border-radius: 0;
}

#contact-form li:last-of-type {
      border-bottom: none;
}

#contact-form label {
      display: block;
      font-size: 22px;
      color: rgb(97, 97, 97);
}

#contact-form input, #contact-form textarea {
      width: 100%;
      padding: 5px;
      border: none;
      resize: vertical;
      background: transparent;
      color: #101010;
      font-weight: bolder;
}

input:focus {
      outline: none !important;
      border: none !important;
}

textarea:focus {
      outline: none !important;
      border: none !important;
}

.textarea {
      border-bottom: 1px solid #c9c9c9;
}

@media(max-width: 900px) {
      #contact-form {
            margin: 5% 0;
            width: 98%;
      }
}



/*--------------- footer section starts here --------------- */

.footer {
      background: #161616;
}



#media, #address, #mail {
      text-align: center !important;
     
}

#mail a:hover {
	text-decoration: none;
}

#media a:link, a:hover, a:visited {
	color:white;
}

.footer .container {
      padding: 160px 0;
}

.footer li, p, h4 {
      font-size: 24px !important;
}

.footer h4 {
      font-weight: lighter;
      color: #fff;
}

.footer p {
      color: grey;
      font-weight: lighter;
}

.footer li {
      font-weight: lighter;
      color: #fff;
      padding-left: 20px;
      font-size: 18px !important;
}

#media ul {
      list-style: none;
}

#media ul li {
      display: inline-block;
}

@media(max-width: 900px) {
      .footer .container {
            width: 92% !important;
      }
}

<!DOCTYPE html>
<html lang="en">
<head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      
      	
		<meta name="description" content="PRODUCTION SHORT DESCRIPTION"/>
		<meta name="keywords" content="AVELI PRODUCTION, VIDEO PRODUCTION, MUSIC VIDEOS, FILMS COMPANY, VIDEO EDITING, VFX COMPANY, AVELI, aveli, filming crew">

      <title>AVELI PRODUCTION</title>

      <!-- stylesheet -->
      <link rel="stylesheet" href="stylesheets/style.css">

      <!-- google fonts -->
      <link href="https://fonts.googleapis.com/css?family=Darker+Grotesque:300,400,500,600,700,800,900&display=swap" rel="stylesheet">

      <!-- bootstrap -->
      <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
      <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

      <!-- icons -->
      <script type="module" src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.esm.js"></script>

      <!-- for on scroll animations -->
      <link rel="stylesheet" href="https://cdn.rawgit.com/daneden/animate.css/v3.1.0/animate.min.css">
      <script src="https://cdn.rawgit.com/matthieua/WOW/1.0.1/dist/wow.min.js"></script> 
    
      
</head>

<body>
     
  
 
            <!--------------- team section starts here --------------->

                <a id="team"></a>

            <section class="team">
	            
	            <div id="teamstar">

                  <div class="container-fluid">

                        <div class="row">
                              <div class="col-md-2"></div>
                              <div class="col-md-2 section-index wow fadeInUp" data-wow-delay="0.3s" style="margin-right: -1.000em;">03</div>
                              <div class="col-md-8 section-heading wow fadeInUp" data-wow-delay="0.4s" style="margin-left:-5.000em; margin-bottom: 3.000em;">Our Founders</div>
                        </div>

                        <div class="row members">

                              <div class="col-md-4"></div>

                              <div class="col-md-3 wow fadeInUp" data-wow-delay="0.5s" style="margin-left: -110px; margin-right: 7px;">
                                    <div class="team-member">
                                          <div class="team-img team-one"></div>
                                    </div>
                                    <div class="team-title">
                                          <h5>Fedir Hostryi</h5>
                                          <span>Founder/Film&SMM Area</span>
                                    </div>
                              </div>

                              <div class="col-md-3 wow fadeInUp" data-wow-delay="0.6s" style="margin-right: 7px;">
                                          <div class="team-member">
                                                <div class="team-img team-two"></div>
                                          </div>
                                          <div class="team-title">
                                                <h5>Andrii Donetskyi</h5>
                                                <span>Co-founder/Film Area</span>
                                          </div>
                                    </div>

								<div class="col-md-3 wow fadeInUp" data-wow-delay="0.7s" style="margin-right:-1000px;">
                                          <div class="team-member">
                                                <div class="team-img team-three"></div>
                                          </div>
                                          <div class="team-title">
                                                <h5>Illia Ivantsov</h5>
                                                <span>Co-founder/SMM Area</span>
                                          </div>
                                    </div>
                        </div>

                        </div>

                  </div>

            </section>
       
            <!--------------- team section ends here --------------->

            <!--------------- newsletter section starts here --------------->

           <section class="newsletter">

                  <div class="container">

                        <div class="row">
                              <div class="col-md-12">
                                    <div class="news-data">
                                    <div class="section-subheading">
                                          <h1 class="wow fadeInUp" data-wow-delay="0.3s">Subscribe to our newsletter</h1>
                                    </div>

                                    <div class="input-group wow fadeInUp" data-wow-delay="0.4s">
                                          <input type="email" class="form-control" placeholder="Enter your email">
                                          <span class="input-group-btn">
                                                <button class="btn" type="submit">Subscribe</button>
                                          </span>
                                    </div>
                                    </div>
                              </div>
                        </div>

                  </div>

           </section>

            <!--------------- newsletter section ends here --------------->

            <!--------------- contact section starts here --------------->

            <a id="contact"></a>

            <section class="contact">

                  <div class="container-fluid">

                        <div class="row">
                              <div class="col-md-2"></div>
                              <div class="col-md-2 section-index wow fadeInUp" data-wow-delay="0.3s">04</div>
                              <div class="col-md-8 section-heading wow fadeInUp" data-wow-delay="0.4s">Contact us</div>
                        </div>

                        <div class="row">
                              <div class="col-md-4"></div>
                              <div class="col-md-6 icon-title wow fadeInUp" data-wow-delay="0.5s">We’re here to help and answer any question you might have. We look forward to hearing from you 🙂</div>
                        </div>

                        <div class="row">
                              <div class="col-md-4"></div>
                              <div class="col-md-6">
                                    <form action="mailto:[email protected]" name="contact-form" id="contact-form" method="POST">

                                          <ul>

                                      <li class="wow fadeInUp" data-wow-delay="0.6s">
                                         <label for="contact-name">Name :</label>
                                                      <div class="textarea">
                                                            <input type="text" name="contact-name" id="contact-name" value="" required>
                                                      </div>
                                                </li>

                                                <br>

                                                <li class="wow fadeInUp" data-wow-delay="0.7s">
                                                      <label for="contact-email">E-mail :</label>
                                                      <div class="textarea">
                                                            <input type="email" name="contact-email" id="contact-email" value="" required>
                                                      </div>
                                                </li>

                                                <br>

                                                <li class="wow fadeInUp" data-wow-delay="0.8s">
                                                     <label for="contact-project">Message :</label> 
                                                     <div class="textarea">
                                                     <textarea name="contact-project" id="contact-project" rows="6" required></textarea>
                                                     </div>
                                                </li>

                                          </ul>

                                          <button type="submit" name="contact-submit" id="contact-submit"  class="send wow fadeInUp" data-wow-delay="0.9s">Send Message</button>

                                    </form>
                              </div>
                        </div>

                  </div>

            </section>

            <!--------------- footer starts here --------------->

            <div class="footer">

                  <div class="container">

                        <div class="info">

                              <div class="row">
                                    <div class="col-md-4 wow fadeInUp" data-wow-delay="0.3s" id="address">
                                          <p>Workarea</p>
                                          <h4>Warszawa</h4>
                                          <h4>Zlota Tower</h4>
                                          <h4>postal code: 00-165</h4>

                                          <br><br>
                                    </div>

                                    <div class="col-md-4 wow fadeInUp" data-wow-delay="0.4s" id="media">
                                          <ul>
                                                <li>
                                                <a href="//www.facebook.com/fedor.hostryy"> 
	                                            <ion-icon name="logo-facebook"></ion-icon>   
                                                </a>
                                                </li>

                                                <li>
                                                <a href="//www.facebook.com/fedor.hostryy"> 
	                                            <ion-icon name="logo-instagram"></ion-icon>
                                                </a>
	                                            </li>
	                                                

                                                <li>
                                                <a href="//www.facebook.com/fedor.hostryy"> 
                                                <ion-icon name="logo-twitter"></ion-icon>
                                                </a>
                                                </li>

                                                <li>
                                                <a href="//www.facebook.com/fedor.hostryy"> </a>
                                                <ion-icon name="logo-youtube"></ion-icon>
                                                <a href="//www.facebook.com/fedor.hostryy"></a>
                                                </li>
                                          </ul>

                                          <br><br>
                                    </div>

                                    <div class="col-md-4 wow fadeInUp" data-wow-delay="0.5s" id="mail">
                                          <p>Feel Free to Contact Us</p>
                                          
	  <a href="mailto:[email protected]"><h4>[email protected]</h4></a>

                                          <br><br>
                                    </div>
                              </div>

                        </div>

                  </div>

            </div>

            <!--------------- footer ends here --------------->

            </div>

      </div>
      

 <script>
	 // audio starts here
var audio = document.getElementById("bckgmusic");
 	audio.autoplay = true;
 	audio.loop = true;
 	audio.volume = 0.1;
    audio.load();
    

document.addEventListener('keydown', function(e) {
  if (e.keyCode == 113) {
    document.getElementById('bckgmusic').pause();
  }
});

	
document.addEventListener('keydown', function(e) {
  if (e.keyCode == 112) {
    document.getElementById('bckgmusic').play();
  }
});


</script>



<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
<script>

// navigation starts here
$("#toggle").click(function() {
            $(this).toggleClass('on');
            $("#resize").toggleClass("active");
      });
      $("#resize ul li a").click(function() {
            $(this).toggleClass('on');
            $("#resize").toggleClass("active");
      });
      $(".close-btn").click(function() {
            $(this).toggleClass('on');
            $("#resize").toggleClass("active");
      });

$(function () {
  $(document).scroll(function () {
    var $nav = $(".nav");
    $nav.toggleClass('scrolled', $(this).scrollTop() > $nav.height());
  });
});

new WOW().init();

// Select all links with hashes
$('a[href*="#"]')
  // Remove links that don't actually link to anything
  .not('[href="#"]')
  .not('[href="#0"]')
  .click(function(event) {
    // On-page links
    if (
      location.pathname.replace(/^//, '') == this.pathname.replace(/^//, '') 
      && 
      location.hostname == this.hostname
    ) {
      // Figure out element to scroll to
      var target = $(this.hash);
      target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
      // Does a scroll target exist?
      if (target.length) {
        // Only prevent default if animation is actually gonna happen
        event.preventDefault();
        $('html, body').animate({
          scrollTop: target.offset().top
        }, 1000, function() {
          // Callback after animation
          // Must change focus!
          var $target = $(target);
          $target.focus();
          if ($target.is(":focus")) { // Checking if the target was focused
            return false;
          } else {
            $target.attr('tabindex','-1'); // Adding tabindex for elements not focusable
            $target.focus(); // Set focus again
          };
        });
      }
    }
  });


</script>
</body>
</html>

Answers

- Fatih
- September 21, 2019 at 4:39 pm
- 0 votes
0
May be you should add the images inside the html file. That would work

Login or Signup to reply.

- AgentP
- September 21, 2019 at 5:04 pm
- 0 votes
0
Well, the problem is you are mentioning file src like this

file:///htdocs/img/ILJA.jpg

but chrome will not recognize it so it is unable to fetch the image for you. So you need to specify the exact path from the root means directory followed by subdirectory and followed by file name for example in windows you have to use C:xampphtdocsimg but you are using it like just htdocsimg

But Coda can recognize it because it is a web development application. And it will know how to get the image just from the subdirectory

I took a look at your site you have a subdirectory called img if you want to mention file name with full url you can do like this http://avelitest.epizy.com/img/your_file_name.jpg this will show the correct output

For example, you can check this link
http://avelitest.epizy.com/img/FEDOR.jpg

and this link will display all images within img directory http://avelitest.epizy.com/img/

Login or Signup to reply.

Please signup or login to give your own answer.

Click here to cancel reply.