What is the best way to display a background image at the top of a webpage and ensure it fills the entire visible area of the screen?

I'm a beginner in the world of development, and I've been given a challenging task to tackle.

The assignment is to create a one-page website with navigation links for 'About Us' and 'Contact Us'. Upon clicking these links, the user's screen should smoothly scroll down to the corresponding sections on the page. I have successfully set this up.

However, here's where I need some assistance:

I want to use a background image that covers the full width and height of the user's screen, ensuring that the second section remains hidden even on larger screens.

This is how my elements are currently organized: 

<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>

Initially, Part 1 along with the header is visible to the user.

Question:

I'm looking for guidance on how to set a background image that only displays in Part 1 while covering the entire width and height of the user's screen, regardless of its size. I believe JQuery or specific CSS configurations are needed, but I'm unsure where to begin.

What steps can I take to achieve this?

jqueryhtmlcss

Answer №1

 .section1{
    background: url(http://someurl.com/someimg.png);
    background-size: cover;
    width:100%;
    height:100vh;
 }

Adjust the background size to cover the entire div and set the div to occupy full height and width of the screen

Answer №2

CSS:

.section1 {
    background: url(background-image.jpg) no-repeat center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    width: 100%;
}

JS: utilizing jquery

$(window).resize(function () {
    $(".section1").css("min-height", $(window).height());    
}); 
$(document).ready(function () {
    $(".section1").css("min-height", $(window).height());
});

Check out updated demo here

Updated: Modified the background size of .section using background-size set to cover and centered the background view. Also, utilized jquery to dynamically set the minimum height of .section to match the window height for a responsive layout.

Answer №3

Web Development Example

<div id="wrapper">

  <div class="header">
    <div class="header-wrapper">
      <img src="logo.jpg" class="logo"/> 

      <a href="#" onClick="scrollContent('about')" class="about">About</a>
      <a href="#" onClick="scrollContent('contact')" class="contact">Contact</a>
    </div>
  </div>

  <div class="part1">
    <div class="part1-wrapper">
        <!-- some content -->
    </div>
  </div>

  <div class="part2 about" id="about">
    <div class="part2-wrapper">
      <!-- About us -->
    </div>
  </div>

  <div class="part3 contactus" id="contact">
    <div class="part3-wrapper">
       <!-- Contact us -->
    </div>
  </div>

</div>

CSS Styles

#wrapper {
  padding-top: 35px;
}
.header {
  background: #666;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 35px;
  z-index: 9999;
}
.header a {
  float: left;
  margin: 8px 18px 0 0;
  font-family: Verdana;
  font-size: 14px;
  text-decoration: none;
  letter-spacing: 1px;
  color: #fff;

  transition: color 0.2s ease-in;
}
.header a:hover {
  color: #ddd;
}
.logo {
  float: left;
  margin-right: 30px;
}
.part1,
.part2,
.part3 {
  position: relative;
  width: 100%;
 }
.part1 {
  background: #aaa;
}
.part2 {
  background: #ccc;
}
.part3 {
  background: #eee;
}
.part1-wrapper,
.part2-wrapper,
.part3-wrapper {
  width: 960px;
  margin: 0 auto;
  padding: 10px;
}

jQuery Functions

function scrollContent(id) {
  $( 'html, body' ).stop().animate({ scrollTop: $( '#' + id ).offset().top }, 1200 );
}

$(function () {

  var parts = $('.part1, .part2, .part3');

  parts
    .css({
      height: $(window).innerHeight(),
      width: $(window).innerWidth() 
    });

});

Sample - http://jsfiddle.net/mdesdev/VJxeH/

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Selecting table cells in JQuery excluding the first and last row or column

Can a jQuery selector expression be used to specifically target all 'inner' table cells (<td> elements) in a table, excluding those found in the first and last row as well as column? ...

jqueryjquery-selectors

Unique lightbox effect with multiple layers

Currently, I am working on implementing a lightbox effect to showcase images to the user using a GridView. Upon clicking an image, a new layer should appear above the current page displaying a larger version of the image along with some description. Althou ...

jqueryhtmlcss

Modal - sending data through URL

I am trying to create a modal that will open another view using a URL in script, but instead it just opens a blank pop-up and doesn't redirect to the URL. I have attempted various approaches, but none seem to be working. Adding <div class="modal-b ...

jqueryhtmlmodel-view-controllermodal-dialog

Execute a JavaScript function from the backend depending on a specific condition

In my .aspx file, I have a javascript method that I want to call from code-behind under a specific condition: function confirmboxAndHideMessage() { // HideMessage(); var response = confirm("Are you sure?"); if (response == true) { docu ...

c#javascriptjqueryasp.net

An even flexbox grid featuring content of varying sizes and dividers

I am currently in the process of working on a .psd template and utilizing Bootstrap 4. I have encountered an issue with one section that contains multiple rows and columns with varying content. The main problem is with one column where the text inside the ...

htmltwitter-bootstrapcssflexbox

Is the strange z-index behavior causing issues with mouse interactions a bug or a standard occurrence?

Whenever I attempt to adjust the z-index on my webpage to rearrange the layering of overlapping divs, I always encounter an issue where the lower div becomes unresponsive to mouse events. Currently, my setup includes: <div class="leftcolumn"> <d ...

htmlcssfirefoxgoogle-chromez-index

Pinchin opts for alternative methods over utilizing the Hammer library for calls

After downloading Hammers.js version-1.0.10, I have been trying to call the 'pinch in' function from the JavaScript file but it is not executing. I suspect there may be a problem with the library as I have tried downloading another one, but the s ...

javascriptjqueryhammer.js

The div element nested within the button is not visible

Fiddle I am trying to create a unique social button design that resembles the custom Google+ sign-in button: However, I encountered an issue where the second div element (to hold the right part of the button) is not displaying as expected: Here is the c ...

javascriptjqueryhtmlcss

Ways to confirm the validation of radio buttons in a form and implement CSS

I am having trouble adding validation to a form with radio buttons displayed as labels. I want to show a red border around the radios/labels or outer div when a radio button hasn't been checked before the user submits the form. I have attempted this ...

javascripthtmljquerycssforms

Exploring methods for comparing AJAX and PHP values within an AJAX success function

const salesId = $('#assign_sales_id').val(); $('#'+id).children('td[data-target=sales_id]').text(salesId); I am interested in verifying if the selected name from users matches the ID: id = '$('#assign_sales_id' ...

phpjqueryajax

Tips on adjusting the text color of the material radio button

Looking for some assistance here. I'm working with a small piece of code that combines Material UI and Angular. I have a radio button group where the text color is not changing, despite setting the SCSS value to #262D34. <mat-radio-group aria-label ...

cssangularmaterial-ui

Utilize function invocation in JavaScript to prevent data from being duplicated

https://i.sstatic.net/I2S1d.png https://i.sstatic.net/xG0BT.png https://i.sstatic.net/1XinH.png Code HTML <ul class="nav nav-pills mytab"> <li class="nav-item"> <a class="nav-link active" ...

javascripthtmljquerydatatable

Is it possible to translate database results into writing using Jquery?

Seeking assistance in creating a real-time search function that fetches information from my database. The goal is to show search results below the input field and have them update automatically as the user types. Any tutorial recommendations or guidance ...

phpjquerymysqlajax

Clicking on the expand button will render the content inside the <p:panel>

My current frontend using JSF loads an excessive amount of data, not always necessary for the user. This data is categorized by tags and I want it to be rendered dynamically with a click on an expand panel: <p:panel header="#{myBean.someStringT ...

javascriptjqueryjsfprimefacesfrontend

Establishing a class for wp_nav_menu

Is there a way to transform the following code: <ul class="ulStyle"> <li class="liStyle"> <div class="first"> <div class="second"> menu1 </div> </div> </li> </ul> into wp_nav_menu? I'm struggling with ...

phpcsswordpressnavigationhtml-lists

Navigate through previous and next siblings in jQuery until a difference is found

Here's the issue: I have a div with multiple siblings positioned before and after it. For example: <div id="parent"> <div class="invalid"></div><!-- break iteration here !--> <div class="operand"></div> <div cl ...

jqueryhtmlcss

SheetJS is experiencing difficulties parsing dates correctly

Need help exporting an HTML table to an Excel file using the SheetJS library. Here's my code snippet: var table = document.getElementById("tableToExport"); var ws = XLSX.utils.table_to_sheet(table, { sheet: "Raport Odorizare", da ...

javascriptjqueryexcelexport-to-excelsheetjs

The popup is unable to remain in the center of the screen because the background page keeps scrolling back to the top

Whenever I click a button to open a popup window, the page unexpectedly scrolls to the top. It's frustrating because if I'm at the bottom of the page and press the 'submit' button, the popup doesn't display in the center as intende ...

javascriptjqueryhtmlcssjquery-mobile

The route function is not being executed

I'm currently developing a straightforward restaurant web application that utilizes a mongo-db database to manage the menu items. The problem lies with my client js file, which is supposed to utilize a routing function to access the database and retri ...

javascripthtmlserver

Incorporating invisible surprises into a fixed menu that reveal themselves as you scroll

I am working on implementing a top navigation and a sticky sub-navigation feature. The goal is to have the sticky nav become the top nav when the user scrolls down the page, similar to the functionality on this website - The issue I'm facing is with ...

javascriptjquerycsstwitter-bootstrapvisual-studio