When I see my page in the browser google chrome my background image is not seen?

Question

When I see my page in the browser google chrome my background image is not seen?

Navigation

#1 by (0 votes)
#2 by (0 votes)

0

When loading my page in the google chrome browser it is not seen but in the other browsers if and when removing the style of background-attachment: fixed; if it is seen but it does not have the effect that I want to pass behind a rgb and that the image is seen in the background, the image remains static. I repeat this only happens to me in google chrome. The image goes in the background footer the rgb goes in the section which is on top of the footer.

The image if you see in that example because I'm looking at the page on the internet explore but in google chrome you can not see the image.

<div class="contact col-xs-12 col-sm-12 col-md-12 col-lg-12">

  <footer class="" style="width:100%; background-image:url(img/fg.jpg); background-repeat:no-repeat; margin-top:50px; background-size:cover; background-attachment:fixed;">

    <section id="vacio" style=" height:600px;  background-color: rgba(0,0,0,0.5); width:100%;">

      <!--map-->
      <div class=" col-xs-12 col-sm-12 col-md-6 col-lg-6" style="padding-top:13%;">

        <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3598.4883955475957!2d-103.7" width="100%" height="290px" frameborder="0" style="border:0" allowfullscreen></iframe>

      </div>
      <!--map-->

    </section>

  </footer>

</div>

That's how it looks in chrome

html css

asked by ivanrangel 24.07.2018 в 21:57

source

2 answers

0

I ran your example with a local image.

In this case, what was missing is the height of the footer. I leave it at 600px but look which one suits you.

<footer class="" style="width:100%;height:600px; background-image:url(img/fg.jpg); background-repeat:no-repeat; margin-top:50px; background-size:cover; background-attachment:fixed;">

answered by 24.07.2018 в 23:14

The property 'addEventListener' can not be read with a null submit Authentication error with VueJS and Firebase

score 0 · Accepted Answer

Look if your chrome looks like this snippet.

Bootstrap 4.1
Bootstrap 3.3.7
background image loaded from the web

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" />


<body style="padding:20px 0; background:#e43;margin:0">
  <div class="contact col-xs-12 col-sm-12 col-md-12 col-lg-12">
    <footer class="" style="width:100%; background-image:url(https://picsum.photos/1680/945/?random); background-repeat:no-repeat; margin-top:50px; background-size:cover; background-attachment:fixed;">

      <section id="vacio" style=" height:600px;  background-color: rgba(0,0,0,0.5); width:100%;">
        <!--map-->
        <div class=" col-xs-12 col-sm-12 col-md-6 col-lg-6" style="padding-top:13%;">
          <iframe src="https://www.google.com/maps/embed?pb=!1m13!1m8!1m3!1d748.4268550806544!2d2.1770822!3d41.380441!3m2!1i1024!2i768!4f13.1!3m2!1m1!2sPla%C3%A7a+de+George+Orwell!5e0!3m2!1sen!2sar!4v1532468854303" 
            width="100%" height="290px" frameborder="0" style="border:0" allowfullscreen></iframe>
        </div>
        <!--map-->
      </section>
    </footer>
  </div>
</body>