CODEWITHSUNDEEP
htmlcss
Casper
Casper

Reputation: 91

Aligning fullscreen image divs on horizontal scrolling page

I want to make a horizontal scrolling website, with fullscreen image divs. The divs will contain text, which is why I've used background-images. I can’t find a way, to place the divs neatly next to each other.

I’ve tried float and inline-block, but either it didn’t work or the divs didn’t align properly.

I’ve made a jsfiddle to show my code. Objective is to get “A" next to “B".

Here's the fiddle link

<div class="a">Text</div>
<div class="b">Text</div>

Thanks!

UPDATE – height of image must be 100%. More than two divs will be used on the website, and they will all vary in width. Here's a sketch of what I try to achieve

Upvotes: 9

Views: 987

Answers (4)

www139
www139

Reputation: 5227

Updated the day before Christmas :) Use background size (if the position of the image is skewed, you can use background position).

There is actually no possible way to get the image to cover the entire thing without having it get cut off somewhere or skew the proportion of the image (creating a bad, blurry image). Your best bet is to get the image to cover the viewport area with some sides cut off and then center the subject of the image with background-position:x(%);.

Google Drive's "intro" website seems to have the behavior that you are after with the images. Take a good look at the first "panel" and the styles applied with the background image. Is that what you want? It seems pretty close.

To experiment with different background-size behavior, I suggest that you checkout this play-it page http://www.w3schools.com/cssref/playit.asp?filename=playcss_background-size&preval=200px.

Try this :)

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}
#wrapper {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  white-space: nowrap;
  overflow-x: scroll;
  /*remove annoying margin created by display:inline-block;*/
  font-size: 0;
}
.a,
.b {
  width: 100%;
  height: 100%;
  vertical-align: top;
  background-size: contain;
  background-repeat: no-repeat;
  display: inline-block;
  -o-background-size: cover;
  -moz-background-size: cover;
  -webkit-background-size: cover;
  -ms-background-size: cover;
  background-size: cover;
  background-position:center center;
}
.a {
  background-image: url(http://i66.tinypic.com/2wqv7fd.jpg);
}
.b {
  background-image: url(http://i67.tinypic.com/2lborxv.jpg);
}
<body>

  <div id="wrapper">

    <div class="a">Text</div>
    <div class="b">Text</div>

  </div>

</body>

Upvotes: 3

RepeatQuotations
RepeatQuotations

Reputation: 724

Using inline-block without white space relies on the HTML markup not having gaps between two elements. <div class="a">Text</div> <div class="b">Text</div> would result in a space between the two divs.

To achieve a background-image filling the width and height of a div, we can use background-size: 100% 100%; background-position:center;. Alternatively, we can use background-size:cover; if we want the background-image to crop rather than stretch.

UPDATED Fiddle : https://jsfiddle.net/v2wxv73e/2/ 

 #wrapper {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  white-space: nowrap;
  overflow-x: scroll;
}

.a,
.b {
  width:100%;
  height:100%;
  background-size: 100% 100%;
  background-position:center;
  background-repeat: no-repeat;
  display:inline-block;
}

PREVIOUS ANSWER:

Use float:left and width:50%; when #wrapper has width: 200%.

Fiddle : https://jsfiddle.net/v2wxv73e/

Upvotes: 3

Harsh Sanghani
Harsh Sanghani

Reputation: 1712

I solved your issue, Please change your css with following :-

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  white-space:nowrap;
  overflow-x:auto;
}

#wrapper {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  white-space: nowrap;
  overflow-x: scroll;
}

.a,
.b {
  display:inline-block;
  width: 100%;
  height: 100%;
  vertical-align: top;
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

.a {
  background-image: url(http://i66.tinypic.com/2wqv7fd.jpg);
}

.b {
  background-image: url(http://i67.tinypic.com/2lborxv.jpg);
}

It may help you.

Upvotes: 2

Senjuti Mahapatra
Senjuti Mahapatra

Reputation: 2590

Put display:inline-block to your classes .a and .b.

.a,
.b {
  width: 100%;
  height: 100%;
  vertical-align: top;
  background-size: contain;
  background-repeat: no-repeat;
  display:inline-block;
}

Here is the Updated Fiddle

Upvotes: 3

Related Questions