Photoshop Question posted in
The official user guide can be found here.

HTML5 images not aligning correctly with same css – Photoshop

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:
enter image description here

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:
enter image description here

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/

Tags:

2

Answers


  1. 0

    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/

    Login or Signup to reply.
  2. 0

    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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search