Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

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
229,644 Points
Steven Parker
Steven Parker
229,644 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
229,644 Points
Steven Parker
Steven Parker
229,644 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
229,644 Points
Steven Parker
Steven Parker
229,644 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
229,644 Points
Steven Parker
Steven Parker
229,644 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.