background image doesn't always center as it should

Question

I am making a website for my final project and right now working on final touches. I wrote it using bootstrap and used the grid : .col-sm Now I am making sure it looks the same at all screen resolution.

I entered the site via my LG4 and this was the view:

but when view site on my PC using chrome mobile resolution it appears more similar to the way I want:

This is the css:

#index-wrap{
    background: url('pic/start.jpg') ;

    margin-bottom: 0;
    min-height: 50%;
    background-repeat: no-repeat;
    background-position: center center;
    -webkit-background-size: cover;
    background-size: cover;

    /*now:*/
     background-attachment: fixed;
}

.jumbotron {
    background-color: transparent; 
    color: #0E76BD; 
    text-align: center;
    height: 100vh;

}

And these are the dives hierarchy:

<div id="index-wrap">
    <div class="jumbotron">

-----Site Content ------

    </div>
</div>

How I fix this?

did you try remove background-attachment: fixed;? – tech2017 Jun 19 '17 at 17:35 — tech2017, Jun 19 '17 at 17:35

score 0 · Answer 1 · answered Jun 19 '17 at 20:20

0

Use background-size:cover as a fallback for

background-size: 100vw auto;

It will scale the background width to the width of the viewport, so the image doesn't clip horizontally on any device that supports viewport units (93% of devices).

answered Jun 19 '17 at 20:20

Afrophysics

579
3
14

score 0 · Accepted Answer · answered Jun 20 '17 at 12:05

In the end , I cropped the Image and displayed different images in each device:

@

media(max-width:767px){

   #index-wrap{
      background: url('pic/start2.jpg') ;
      margin-bottom: 0;
      min-height: 50%;
      background-repeat: no-repeat;
      background-position: center center;
      webkit-background-size: cover;
      background-size: cover;
   }

    .vertical-center > .container {
       max-width: 90%;
       min-height: 80%;
       display: inline-block;
       vertical-align: middle;  /* vertical alignment of the inline element */                       
       font: 16px/1 "Helvetica Neue", Helvetica, Arial, sans-serif;
    }
}

And in default view:

   #index-wrap{
      background: url('pic/start.jpg') ;
      margin-bottom: 0;
      min-height: 50%;
      background-repeat: no-repeat;
      background-position: center center;
     -webkit-background-size: cover;
      background-size: cover;
   }

   .jumbotron {
      background-color: transparent; 
      color: #0E76BD; 
       text-align: center;
       height: 100vh;
   }

    .vertical-center {
        width:100%;
        min-height: 80%;
        text-align: center; 
        font: 0/0 a;         
    }

    .vertical-center:before { 
        content: " ";
        display: inline-block;
        vertical-align: middle;    /* vertical alignment of the inline element */
        height: 100%;
    }

    .vertical-center > .container {
        max-width: 100%;
        min-height: 75%;
        display: inline-block;
        vertical-align: middle;  
        font: 16px/1 "Helvetica Neue", Helvetica, Arial, sans-serif;
    }

And this is the html hierarchy:

<div id="index-wrap" >
   <div class="jumbotron vertical-center" >
      <div class="container">
.....
      </div>
   </div>
</div>

Its not very elegant, but it does the trick. I took the solution from here and changed the URL and container max width and height.

background image doesn't always center as it should

2 Answers2