0

I have a webpage with a parallax scrolling effect where the CSS property height: auto; isn't working in any of the classes for any of the three background images. When I use height: auto; the image disappears. The dimensions of the three uploaded images are each w = 1280px and h = 800px. If I use height: 641px then the images scale down proportionally to w = 1025px and h = 641px. If I use a different height then the width is still 1025px but the height changes to what is in the CSS. The three CSS classes are:

.bgimg-1 {
  background-image: url("https://c2.staticflickr.com/8/7321/27335183304_11cd309852_b.jpg");
  max-width: 100%;
  height: 641px;
}
.bgimg-2 {
  background-image: url("https://c2.staticflickr.com/8/7632/27335194304_72890c2d62_b.jpg");
  max-width: 100%;
  height: 641px;
}
.bgimg-3 {
  background-image: url("https://c2.staticflickr.com/8/7436/27947379025_844956bcf0_b.jpg");
  max-width: 100%;
  height: 641px;
}

The page and its HTML and CSS using height: 641px; can be viewed at http://codepen.io/mlswartz/full/NrpzpN/. This needs to be fixed so that it's properly image responsive. I'm using Bootstrap 3.3.6 and Font-awesome 4.6.3. The monitor I'm using has a 5:4 aspect ratio with a screen resolution of 1280 x 1024.

dippas
  • 58,591
  • 15
  • 114
  • 126
Michael Swartz
  • 858
  • 2
  • 15
  • 27

2 Answers2

3

you can use height:50vh or any value with vh instead 

body,
html {
  height: 100%;
  margin: 0;
}
h1 {
  text-align: center;
  font-size: 3.5em;
  color: #FF0000;
}
h2 {
  font-size: 1.5em;
}
a {
  color: #FF0000;
}
a:hover {
  color: #00FF00;
}
.row {
  display: flex;
}
.side-panels {
  background-image: url("https://c2.staticflickr.com/8/7676/27334382193_951bb3afa6_m.jpg");
  background-attachment: fixed;
}
#navigation {
  position: fixed;
  top: 0px;
  width: 100%;
  background-color: #000000;
  color: #FF0000;
}
#footer {
  position: fixed;
  bottom: 0;
  width: 100%;
  background-color: #000000;
  color: #FF0000;
}
.social-buttons {
  position: absolute;
  top: 22%;
}
.bgimg-1,
.bgimg-2,
.bgimg-3 {
  position: relative;
  background-attachment: fixed;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  max-width: 100%;
  height: 50vh
}
.bgimg-1 {
  background-image: url("https://c2.staticflickr.com/8/7321/27335183304_11cd309852_b.jpg");
}
.bgimg-2 {
  background-image: url("https://c2.staticflickr.com/8/7632/27335194304_72890c2d62_b.jpg");
}
.bgimg-3 {
  background-image: url("https://c2.staticflickr.com/8/7436/27947379025_844956bcf0_b.jpg");
}
.about-me-box {
  position: absolute;
  width: 80%;
  margin-top: 11.3%;
  margin-left: 8.5%;
  opacity: 0.7;
}
.about-me-text {
  background-color: white;
  font-size: 1.5em;
  color: #000000;
  text-align: justify;
  padding: 5% 6% 5% 6%;
}
.portfolio-box {
  position: absolute;
  margin-top: -.38%;
  margin-left: 16%;
}
.project-boxes {
  margin-right: 5.5%;
  margin-bottom: 7%;
  margin-left: 9.5%;
  opacity: 0.95;
}
.contact-box {
  position: absolute;
  width: 80%;
  margin-top: 5.08%;
  margin-left: 8.55%;
}
.get-info-box {
  background-color: white;
  position: absolute;
  width: 80%;
  margin-left: 10%;
  padding: 4.5% 5% 3% 5%;
  opacity: 0.92;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
  <div class="row">
    <div class="col-xs-1 side-panels"></div>
    <div class="col-xs-10">
      <div class="bgimg-1" id="about-me">
        <div class="col-xs-12">
          <div class="about-me-box">
            <h1>&lt;about-me\&gt;</h1>
            <div class="about-me-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
              irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur
              adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis</div>
          </div>
          <!-- end 'about-me-box' -->
        </div>
        <!-- end 'col-xs-12' -->
      </div>
      <!-- end 'bgimg-1' -->
      <div class="bgimg-2" id="portfolio">
        <div class="col-xs-12">
          <div class="portfolio-box">
            <h1>&lt;portfolio\&gt;</h1>
            <div class="row">
              <div>
                <div style="text-align: left;">
                  <img src="https://c2.staticflickr.com/8/7352/27913553156_b94863e654.jpg" class="img-responsive project-boxes">
                </div>
                <div style="text-align: left;">
                  <img src="https://c2.staticflickr.com/8/7546/27335393704_3f3da88521.jpg" class="img-responsive project-boxes">
                </div>
              </div>
              <div>
                <div style="text-align: center;">
                  <img src="https://c2.staticflickr.com/8/7439/27335383754_7893f67c47.jpg" class="img-responsive project-boxes">
                </div>
                <div style="text-align: center;">
                  <img src="https://c2.staticflickr.com/8/7369/27335397614_c57a904d58.jpg" class="img-responsive project-boxes">
                </div>
              </div>
              <div>
                <div style="text-align: right;">
                  <img src="https://c2.staticflickr.com/8/7654/27335389644_a229e24a25.jpg" class="img-responsive project-boxes">
                </div>
                <div style="text-align: right;">
                  <img src="https://c2.staticflickr.com/8/7384/27668437480_3241364329.jpg" class="img-responsive project-boxes">
                </div>
              </div>
            </div>
            <!-- end 'row' -->
          </div>
          <!-- 'portfolio-box' -->
        </div>
        <!-- end 'col-xs-12' -->
      </div>
      <!-- end 'bgimg-2' -->
      <div class="bgimg-3" id="contact">
        <div class="col-xs-12">
          <div class="contact-box">
            <h1>&lt;contact-me\&gt;</h1>
            <div class="get-info-box">
              <form>
                <div class="form-group">
                  <input type="text" id="name" name="user_name" class="form-control" placeholder="Name (required)" required/>
                </div>
                <div class="form-group">
                  <input type="email" id="email" name="user_email" class="form-control" placeholder="Email address (required)" required/>
                </div>
                <div class="form-group">
                  <input type="text" id="phone" name="user_phone" class="form-control" placeholder="Phone number (optional)" maxlength="14" />
                </div>
                <div class="form-group">
                  <textarea type="text" id="comment" name="user_comment" class="form-control" placeholder="Type your comment here (required) 500 characters max" required rows="7" maxlength="500"></textarea>
                </div>
                <button class="btn btn-primary pull-right" type="submit">
                  <i class="fa fa-paper-plane"></i> Submit
                </button>
              </form>
            </div>
            <!-- end 'get-info-box' -->
          </div>
          <!-- end 'contact-box' -->
        </div>
        <!-- 'col-xs-12' -->
      </div>
      <!-- end 'bgimg-3' -->
      <div class="bgimg-1"></div>
    </div>
    <!-- end 'col-xs-10' -->
    <div class="col-xs-1 side-panels"></div>
  </div>
  <!-- end 'row' -->
</div>
<!-- end 'container-fluid' -->
<div class="container-fluid" id="navigation">
  <div class="row">
    <div class="col-xs-6">
      <h2 id="myName" style="color: #FF0000;">&lt;michael-swartz\&gt;</h2>
    </div>
    <div class="col-xs-2"><a href="#about-me"><h2>About Me</h2></a>
    </div>
    <div class="col-xs-2"><a href="#portfolio"><h2>Portfolio</h2></a>
    </div>
    <div class="col-xs-2"><a href="#contact"><h2>Contact</h2></a>
    </div>
  </div>
</div>
<div class="container-fluid" id="footer">
  <div class="row">
    <div class="col-xs-4">
      <h2 id="myName" style="color: #FF0000;">&lt;social-media-links\&gt;</h2>
    </div>
    <div class="col-xs-1">
      <a href="http://www.facebook.com" target="_blank"><i class="fa fa-facebook fa-2x social-buttons"></i></a>
    </div>
    <div class="col-xs-1" class="social-buttons">
      <a href="http://www.freecodecamp.com" target="_blank"><i class="fa fa-fire fa-2x social-buttons"></i></a>
    </div>
    <div class="col-xs-1">
      <a href="http://www.github.com" target="_blank"><i class="fa fa-github fa-2x social-buttons"></i></a>
    </div>
    <div class="col-xs-1" class="social-buttons">
      <a href="http://www.linkedin.com" target="_blank"><i class="fa fa-linkedin fa-2x social-buttons"></i></a>
    </div>
    <div class="col-xs-1">
      <a href="http://www.pinterest.com" target="_blank"><i class="fa fa-pinterest fa-2x social-buttons"></i></a>
    </div>
    <div class="col-xs-1" class="social-buttons">
      <a href="https://stackoverflow.com/users/1476365/michael-swartz" target="_blank"><i class="fa fa-stack-overflow fa-2x social-buttons"></i></a>
    </div>
    <div class="col-xs-1">
      <a href="http://www.tumblr.com" target="_blank"><i class="fa fa-tumblr fa-2x social-buttons"></i></a>
    </div>
    <div class="col-xs-1">
      <a href="http://www.twitter.com" target="_blank"><i class="fa fa-twitter fa-2x social-buttons"></i></a>
    </div>
  </div>
</div>
<!-- end 'container-fluid' -->
dippas
  • 58,591
  • 15
  • 114
  • 126
  • I already tried that. Using `height:100%` causes the background image to blow up out of proportion. I don't want that, I want the background images to stay in their original proportion and still be image responsive for smaller devices. – Michael Swartz Jun 29 '16 at 14:12
  • can you share your live link? – dippas Jun 29 '16 at 14:13
  • the only link for this is the codepen in my original post. – Michael Swartz Jun 29 '16 at 14:20
  • Using `height: [num]vh` doesn't keep the background image in it's original proportion. – Michael Swartz Jun 29 '16 at 14:36
  • 1
    It won't keep just because you are using `cover`, take a look at this [codepen](http://codepen.io/anon/pen/QEpoPJ) – dippas Jun 29 '16 at 14:49
  • I went to w3Schools and took a much closer look at `background-size: cover;`. I now see why what I want won't work. Right now I'm not sure what I'm going to do but we can stop working on this. – Michael Swartz Jun 29 '16 at 15:13
  • Don't use w3schools as your place for info, use W3C or MDN instead – dippas Jun 29 '16 at 15:15
  • [Note: I deleted my prior response to @dippas and have re-written it as follows. The information in my prior post was wrong so it needs to be corrected.] I'm marking this as the answer. Your solution for the class `.bgimg-1, .bgimg-2, .bgimg-3 {}` and the three classes `.bgimg-1{}` `.bgimg-2{}` and `.bgimg-3{}` works. I don't know how this will scale down on smaller screens but for now this works for me. – Michael Swartz Jun 29 '16 at 20:47
1

CSS2

If you need to make the image bigger, you must edit the image itself in an image editor.

If you use the img tag, you can change the size, but that would not give you the desired result if you need the image to be background for some other content (and it will not repeat itself like you seems to want)...

CSS3 unleash the powers

This is possible to do in CSS3 with background-size.

All modern browsers support this, so unless you need to support old browsers, this is the way to do it.

Supported browsers:

Mozilla Firefox 4.0+ (Gecko 2.0+), Microsoft Internet Explorer 9.0+, Opera 10.0+, Safari 4.1+ (webkit 532) and Chrome 3.0+.

.bgimg-1, .bgimg-2, .bgimg-3 {
    /* width: will stretch to width of element, height: 641px */
    background-size: 100% 641px;
}
Sherly Febrianti
  • 1,097
  • 15
  • 33
  • I don't necessarily want the images to get bigger. I want them to stay in their original proportions when being image responsive for smaller screens. Also, as far as I can see, using `background-size` as you've posted it is no different than using `max-width: 100%;` and `height: 641px;`. – Michael Swartz Jun 29 '16 at 14:17
  • @MichaelSwartz Do you know What is the difference of **"background-size"** and **"max-width & height"**? Let me tell you clearly. **Background-size** is your background image's size, whereas **max-width and height** is used for your image with tag. I think you should re-read my answer carefully. – Sherly Febrianti Jul 11 '16 at 02:55
  • @MichaelSwartz what did you use? css2 or css3? – Sherly Febrianti Jul 11 '16 at 02:57