HTML5 images not aligning correctly with same css

Question

I am trying to align two images in two divs. These are the two images, they are the same size, resolution, and the aligning is perfect when doing it in photoshop:

But when I reference them in my index.html like so:

<!-- Intro Header -->
<div class="intro">
    <div class="intro-body">
        <div class="container">
            <div class="row">
                <div class="col-md-8 col-md-offset-2">
                    <h2>ssss</h1>
                </div>
            </div>
        </div>
    </div>
</div>

<!-------acerca---------->

<div id="acerca" class="acerca">
    <div class="acerca-body">
        <div class="container">
            <div class="row">
                <div class="col-md-8 col-md-offset-2">
                    <h2>Acerca de Cssss</h2>
                </div>
            </div>
        </div>
    </div>
</div>

With the exact same css classes:

.intro {
display: table;
width: 100%;
height: auto;
padding: 100px 0;
text-align: center;
color: #fff;
background: url(http://i.imgur.com/jDhQ6PP.jpg?1) no-repeat bottom center scroll;
background-color: #000;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
-o-background-size: cover;
}

.intro .intro-body {
    display: table-cell;
    vertical-align: middle;
}

.intro .intro-body .brand-heading {
    font-size: 40px;
}

.intro .intro-body .intro-text {
    font-size: 18px;
}


.acerca {
    display: table;
    width: 100%;
    height: auto;
    padding: 100px 0;
    text-align: center;
    color: #fff;
     background: url(http://i.imgur.com/raMFNcc.png?1) no-repeat bottom center scroll;
    background-color: #000;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    -o-background-size: cover;
}

.acerca .acerca-body {
    display: table-cell;
    vertical-align: middle;
}

.acerca .acerca-body .brand-heading {
    font-size: 40px;
}

.acerca .acerca-body .acerca-text {
    font-size: 18px;
}

And the images do not align as you can see in this picture:

I can't post images because of lacking reputation points, this is only my second question.

Do anyone know how to align them? Thanks.

JSfiddle: https://jsfiddle.net/uyo35tuf/

Answer 1

Look like you want use

background-size: 100% 100%;

Cover it is not the same

https://developer.mozilla.org/en-US/docs/Web/CSS/background-size

cover This keyword specifies that the background image should be scaled to be as small as possible while ensuring both its dimensions are greater than or equal to the corresponding dimensions of the background positioning area.

I found a very useful explanation about: http://blog.vjeux.com/2013/image/css-container-and-cover.html

And you don´t need prefix http://shouldiprefix.com/#background-image-options

As well I propose to you a solution:

CSS

html, body{
    height:100%;
    padding:0;
    margin:0;
}
body{
    display:flex;
    flex-direction: column;
}

.intro, .acerca{
    flex:1;
    width: 100%;
    color: #fff; 

    display: flex;
    align-items: center;
    justify-content: center;
}

.intro {
    background: url(http://i.imgur.com/jDhQ6PP.jpg?1) no-repeat 0 0;
    background-size: 100% 100%;
}

.acerca {
    background: url(http://i.imgur.com/raMFNcc.png?1) no-repeat 0 0;
    background-size: 100% 100%;
}

h1 {
    font-size: 40px;
}

h2 {
    font-size: 18px;
}

HTML

<div class="intro">
        <h1>ssss</h1>
</div>

<div id="acerca" class="acerca">
       <h2>Acerca de Cssss</h2>
</div>

You have a example here with the proper prefixs. http://jsfiddle.net/luarmr/y33yc91z/2/

Answer 2

With the help of Raul's suggestion, I played around the code and got the output as needed. 100% 100% will make the image render as it is and responsive as well.

Also replace height: auto with height: 50vh. It tells the browser to occupy 50% of the view port height. Thus it makes 100vh for the two divs.

.intro {
  display: table;
  width: 100%;
  height: 50vh;
  padding: 100px 0;
  text-align: center;
  color: #fff;
  background: url(http://i.imgur.com/jDhQ6PP.jpg?1) no-repeat bottom center scroll;
  background-color: #000;
  -webkit-background-size: 100% 100%;
  -moz-background-size: 100% 100%;
  background-size: 100% 100%;
  -o-background-size: 100% 100%;
}
.intro .intro-body {
  display: table-cell;
  vertical-align: middle;
}
.intro .intro-body .brand-heading {
  font-size: 40px;
}
.intro .intro-body .intro-text {
  font-size: 18px;
}
.acerca {
  display: table;
  width: 100%;
  height: 50vh;
  padding: 100px 0;
  text-align: center;
  color: #fff;
  background: url(http://i.imgur.com/raMFNcc.png?1) no-repeat bottom center scroll;
  background-color: #000;
  -webkit-background-size: 100% 100%;
  -moz-background-size: 100% 100%;
  background-size: 100% 100%;
  -o-background-size: 100% 100%;
}
.acerca .acerca-body {
  display: table-cell;
  vertical-align: middle;
}
.acerca .acerca-body .brand-heading {
  font-size: 40px;
}
.acerca .acerca-body .acerca-text {
  font-size: 18px;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<!-- Intro Header -->
<div class="intro">
  <div class="intro-body">
    <div class="container">
      <div class="row">
        <div class="col-md-8 col-md-offset-2">
          <h2>ssss</h1>
                </div>
            </div>
        </div>
    </div>
</div>

<!-------acerca---------->

<div id="acerca" class="acerca">
    <div class="acerca-body">
        <div class="container">
            <div class="row">
                <div class="col-md-8 col-md-offset-2">
                    <h2>Acerca de Cssss</h2>
        </div>
      </div>
    </div>
  </div>
</div>