CODEWITHSUNDEEP
htmlcssbackground-image
Thomas Morgan
Thomas Morgan

Reputation: 35

How to align three background images side by side

I'm trying to align three background images side by side, ideally with fluidity so that they re-position when my browser window resizes.

I've tried searching for an answer to this problem and thought using CSS properties suited to aligning regular 'img src' elements would work, however they haven't.

Essentially, I have a page with a gallery. Each image has a city name in it's center. Through research, I've decided to assign a background-image property to three separate divs and used the line-height property matching the height of each image so that the city name aligns itself in the center. The background-image technique assists in the alignment of the city name.

Where am I going wrong?

#jumbotron2 {
  height: 500px;
  width: 100%;
}
#city-container {
  width: 100%;
  height: 100%;
}
.london-square {
  height: 400px;
  width: 400px;
  background-image: url("tombnb-images/london-400px.jpg")
}
.newyork-square {
  height: 400px;
  width: 400px;
  background-image: url("tombnb-images/newyork-400px.jpg")
}
.sydney-square {
  height: 400px;
  width: 400px;
  background-image: url("tombnb-images/sydney-400px.jpg")
}
.square p {
  font-family: 'Slabo 27px', serif;
  font-size: 32px;
  color: #FFFFFF;
  line-height: 400px;
  text-align: center;
  text-shadow: 0px 0px 10px black;
}
<div id="jumbotron2">

  <div id="city-container">

    <div class="london-square square">
      <p id="text">London</p>
    </div>

    <div class="newyork-square square">
      <p id="text">New York</p>
    </div>

    <div class="sydney-square square">
      <p id="text">Sydney</p>
    </div>

  </div>

</div>

Upvotes: 2

Views: 1268

Answers (2)

Ryu Roble
Ryu Roble

Reputation: 113

You can use bootstrap. you put your images inside divs.

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
  <div class="col-sm-4">
    <img class="img-thumbnail" src="http://www.nature.org/cs/groups/webcontent/@web/@giftplanning/documents/media/sample-cga-rates-splash-1.jpg">
  </div>
  <div class="col-sm-4">
    <img class="img-thumbnail" src="http://sharedforfree.com/wp-content/uploads/2013/07/cropped-harrimanToday.jpg">
  </div>
  <div class="col-sm-4">
    <img class="img-thumbnail" src="http://pre02.deviantart.net/f34e/th/pre/f/2015/182/4/f/croatia_nature_pack___sample__2___proref_org_by_proref-d8zgrc2.jpg">
  </div>
</div>

Check out this fiddle: jsfiddle example

Upvotes: 1

Marouen Mhiri
Marouen Mhiri

Reputation: 1667

if you use a percentage width of your divs you have to float them too. I recommand using this:

#city-container {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    flex-warp: wrap;
}

Upvotes: 1

Related Questions