Need help with background photo

HTML-CSS
#1

Tell us what’s happening:
I am trying to enlarge this background photo but it keeps getting cut off. In my html code, I incorporated the background photo into the div tag with the id= “backtitle.” I placed the url and I am trying to adjust the height in its css code. Any help is appreciated! Thank you!

Your code so far
Here is the link and I am using google chrome: https://codepen.io/bk124/pen/WNxgeNv

Challenge: Build a Tribute Page

Link to the challenge:

#2

try adding this to the backtitle CSS:

background-size: cover;
background-repeat: no-repeat;

#3

This will help but it’s not a good idea in my humble opinion to stretch the picture which have only 570px width… You should choose an other picture.

Don’t forget the ; at the end of the URL picture

#backtitle {
background-image: url(https://i.postimg.cc/rwhF8XNL/Christopher-Reeve.jpg)   
}
1 Like
#4

@bk200 Welcome to the FreeCodeCamp Forums! These projects can be tricky but it is all about pushing yourself and learning. I tweaked the codepen a little bit and found this as a solution. #backtitle { background-image: url(https://i.postimg.cc/rwhF8XNL/Christopher-Reeve.jpg); background-size: cover; bakcground-repeat: no-repeat; }
Although this does produce a stretched out image and doesn’t look the best. I would recommend what @nicolas Said and it would probably be best to get a bigger picture but that code could provide a fix. Happy Coding! :smile:

#5