Help with length of background image

HTML-CSS
1

Working on a tribute page. Can someone help figure out how to make the background image (guitars) not show up below the rest of the content on the bottom of the page. It only shows up on an i-pad device. Thanks!

https://codepen.io/barker716/full/wvwrbXe

2

Hi @Codeman543,

Try setting your height: 100% for your html, body, and main tags in the css.

Edit: It looks like that messes up the regular browser view. Hmm… let me play around with it a bit more.

3

Thanks, that gives me some stuff to play around with.

4

Hey @Codeman543,

I got it working using DevTools. I noticed you changed the #main’s height to 300%, which makes the page look a bit long.

Try this:
Make sure the height: 100% is set on the html and body tags in your css.

In your css, add something like this —

#main {
    height: auto !important;
    min-height: 100%;
    ...
}

If you want to know how I arrive to this, comment out the above #main {…}, and try opening the chrome DevTools (or just right click and inspect elements). Click on the cursor icon on the top left (“Select an element in the page to inspect it”), and try to find the <main> section of the page and compare it to the <html> and <body> section. You’ll see that your #main section doesn’t take up the whole height of the browser/view, whereas the html and body tags do take up the whole screen.

5

Oh wow, that’s really helpful. Thanks so much. That’s a neat trick, the inspect elements button. I hadn’t figured that out yet.