StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POHow do I show a background image in the first part of a page and make it cover 100% of the visible part of the screen?
text
Body
copied!<p>I am new to development and have been tasked with a task that seems a bit challenging. </p> <p>I have to create a one page website where in the navigation I have about us and contact us link. When the user clicks on about us the user's screen should scroll to that section on the page and same thing for contact us. I was able to accomplish this. </p> <p>What do I need help with? </p> <p>I am using a background image that I want to cover the user's screen width and height that way the 2nd section isn't shown if a user has a larger screen. </p> <p>This is how I have stuff stacked: </p> <pre><code><div class="header"> <img class="logo" src="/logo.jpg"> <a href="#about" class="link"> <a href="#contact" class="link"> </div> <div class="part1"> some content </div> <div class="part2" aboutus" id="about"> About us </div> <div class="part3 contactus" id="contact> Contact us </div> </code></pre> <p>So Part 1 is the first thing the user sees along with the header. </p> <p><strong>Question:</strong> </p> <p>How do I display a background image that only appears in part1 <strong>and covers the entire width and height of the user's screen regarldess of how small or big it is.</strong> I am sure I need JQuery or some CSS structuring but not sure where to start. </p> <p>What can I do to accomplish this?</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload