Make a website: jumbotron background-image responsive problem

https://www.codecademy.com/courses/make-a-website/projects/building-a-personal-portfolio

Hi, in this new project I have a problem with the responsiveness of the background image of the jumbotron.
The code was already given by codecademy. I tried it on the local host, on safari, google chrome, firefox also. When I resize the window, you can see the entirety of the image when you have a small screen. Then when you widen the screen you start to loose the bottom part of the image.

Here is the CSS code where I even added codes for all browsers:

body {
font-family: Roboto, sans-serif;
background-image: url(‘https://s3.amazonaws.com/codecademy-content/courses/learn-css-selectors-visual-rules/hypnotize_bg.png’);
}

header {
padding: 20px 0;
}

header .row,
footer .row {
display: flex;
align-items: center;
}

h1 {
font-weight: 700;
margin: 0;
}

nav {
display: flex;
justify-content: flex-end;
}

a {
padding: 0 20px;
margin: 0;
}

.jumbotron {
display: flex;
align-items: center;
background-image: url(‘images/mountain_jumbotron.jpg’);
background-size: cover;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
color: #ffffff;
height: 400px;
}

.jumbotron h2 {
font-size: 60px;
font-weight: 700;
margin: 0;
color: #fff;
}

.jumbotron h3 {
margin: 0 0 20px;
color: #fff;
}

section .row img {
margin: 0 0 30px;
width: 100%;
}

.col-md-6 {
margin: 0 0 30px;
}

.btn.btn-primary {
border-radius: 2px;
border: 0px;
color: #fbd1d5;
background-color: #ffffff;
}

.btn.btn-primary:hover {
color: #ffffff;
background-color: #fbd1d5;
}

.btn-secondary {
background-color: #2a70e0;
color: #ffffff;
margin: 0 0 30px;
}

.portrait {
width: 350px;
height: 300px;
}

figure img {
width: 100%;
height: auto;
}

figure {
margin-bottom: 30px;
}

footer {
font-size: 12px;
padding: 20px 0;
}

footer .col-sm-8 {
display: flex;
justify-content: flex-end;
}

footer ul {
list-style: none;
}

here is the index.html:

<!DOCTYPE html>
My Personal Portfolio

Elisabeth Tasia

About Me Education Experience
<section class="jumbotron">
  <div class="container">
    <div class="row">
      <h2> Programmer</h2>
    </div>
  	<div class="row">
      <h3>CSS, HTML, Javascript, JQuery</h3>
    </div>

  </div>
</section>

<footer class="container">
  <div class="row">
    <p class="col-sm-4">&copy; 2019 Elisabeth Tasia</p>
    <div class="col-sm-2">
      <a href="https://www.linkedin.com/" target="_blank">LinkedIn</a>
    </div>
    <div class="col-sm-2">
      <a href="https://medium.com/" target="_blank">Medium</a>
    </div>
    <div class="col-sm-2">
      <a href="https://github.com/" target="_blank">Github</a>
    </div>
    <div class="col-sm-2">
      <a href="https://tunein.com/podcasts/" target="_blank">Podcast</a>
    </div>
  </div>
</footer>

I don’t understand why with background-image: cover, the image whole image doesn’t appear when I exceed a certain browser window width.

Thanks for the help

1 Like

Hello Lizzy!

Maybe it only shows the whole thing within a certain width. Does it work on a regular screen?

5 Likes

no when I open my window in big, you can’t see the bottom half of the picture.
When you size your screen as a mobile size, you see the whole background image of the jumbotron.
I don’t understand because it is set to
background-size: cover
in the original CSS given by code academy.

got it!
there is the snippet of code that allows the image to be responsive and still seen in its entirety whatever the screen width:
background-position: center
because the default position of the background image is top left!

5 Likes

Glad you figured it out on your own.

There is no parameter for width set.

4 Likes