Make a website: jumbotron background-image responsive problem

#1

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
#2

Hello Lizzy!

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

5 Likes
#3

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.

#4

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
#5

Glad you figured it out on your own.

There is no parameter for width set.

4 Likes