Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

HTML

Posted by Arthur Kakulidis
Arthur Kakulidis
2,657 Points

Whenever I try to add a background image in html, I can only see a small part of it at the very top of my screen.

Whenever I try to add a background image in html, I can only see a small part of it at the very top of my screen. What is going on? I am using bootstrap 4, html and css.

Steven Parker
Steven Parker
221,292 Points
Steven Parker
Steven Parker
221,292 Points

Analysis will likely require inspection of the code modules and resources. Please make a snapshot of your workspace and post the link to it here.

Arthur Kakulidis
Arthur Kakulidis
2,657 Points

Here is my CSS

.bigPic { background-image: url('rs5edit.png'); background-position: 40% 75%; width: 60%; height: auto; background-size: cover;

And this is my HTML

<div class="row-5"> <div class="col-11">

               <div class="bigPic mt-5">
                          <img scr="">
                        </div>
              </div>
Arthur Kakulidis
Arthur Kakulidis
2,657 Points

Thank you, it did work... However, since it is a background image shouldn't the rest of the overlapping with the image? In my case, as the image gets larger, the whole page moves gets larger.

Arthur Kakulidis
Arthur Kakulidis
2,657 Points

I meant to say "shouldn't the content overlap with the background image?". Also the image gets larger using vh.

1 Answer

Steven Parker
Steven Parker
221,292 Points
Steven Parker
Steven Parker
221,292 Points

It would help to have access to the image file, but if that's actually the whole code:

  • the outer div is missing an end tag
  • "scr" is not a valid property name (you probably want "src", but then it shouldn't be empty)
  • there's no content or CSS setting to give the element any significant height
  • the element width is constrained to just over half the window (60%)

For a quick test (but not a solution), instead of "auto", try setting the height to "100vh".

Steven Parker
Steven Parker
221,292 Points
Steven Parker
Steven Parker
221,292 Points

I don't understand the phrase "the rest of the overlapping with the image". And how does the image get larger?

Steven Parker
Steven Parker
221,292 Points
Steven Parker
Steven Parker
221,292 Points

Yes, the 100vh was a way to show how the CSS can make it larger. Your original issue was that it was too small, right?

And there's currently no content in the HTML, but when you add some it should "overlap" (appear on top of) the background.