Prevent the background image from extending behind the header and footer sections

I am struggling with the formatting of a webpage that features a header and footer. Currently, my background image extends behind both the header and footer, cutting off approximately one-quarter of the top and bottom of the image. Below is the CSS code I am using for the background image:

background-image: url('http://codegamer.net/images/majestic/patterns/lol2.jpg');
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;

My goal is to adjust the positioning of the image so that it starts below the header and ends above the footer, allowing the full image to be visible.

htmlcss

Answer №1

1- Eliminate those attributes from the body section.

2- Construct a fresh division that encompasses the <div id="container">, as illustrated below:

HTML

 <div id="container-background">
   <div id="container">...</div>
 </div>

3- Implement the subsequent attributes to your recent division:

CSS

#container-background {
  background-image: url('http://codegamer.net/images/majestic/patterns/lol2.jpg');
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
}

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

Why is the session variable in PHP failing to store the value?

Could you assist me with the following PHP code snippet? I'm trying to ensure that when the update function is called, the session variable 't' increments its value. However, every time I run the code, the output remains at Value: 1. What ad ...

phpjqueryhtml

React isn't updating the on-change value despite changes being made

In my React application, there is a file called EditTodos.js that is responsible for updating the to-do list. When I click on the "Edit" button, it triggers a pop-up modal component. import React, { useState } from "react"; import { Button, Modal } from " ...

javascripthtmlreactjsbootstrap-4

Display a specific element only if another element exceeds a specified height

A snippet of HTML code is given below: <span class="day-number">{{day-number}}</span> <div class="event-box"> <div class="event-container"> </div> <div class="more-events">more ...</div> </div> The .e ...

javascriptjqueryhtmlcss

problems with hovering over radio buttons in Internet Explorer 9

Encountering a curious issue in IE9: When hovering over my top level wrapper div, the first radio button seems to be triggered as though it's being hovered over. This means that even if the last radio input is selected, clicking anywhere within the wr ...

javascripthtmlcss

What is the updated technique for creating a full-width HTML section in 2023?

In most web designs, the content is typically "contained" to be centered and limited by a maximum width: <!DOCTYPE html> <html> <body> <div id="container" style="width: 1000px; margin: 0 auto;"> ...

htmlcss

How to Use JavaScript Function to Rotate an Entire Webpage

For my final project in a web design class, we were tasked with creating a website that showcases our skills. I've completed the assignment and now I want to add some interesting features to make it stand out. I'm interested in using -webkit-tra ...

javascripthtmlcssrotation

"Utilize jQuery to superimpose an image on top of

I'm attempting to create a feature where clicking on an image will reveal text underneath, similar to how retailmenot.com displays coupon codes. In addition, when the image is clicked, users should be directed to an external URL. Here is an example o ...

javascriptjqueryhtml

Is it possible to create a webpage where the header and footer remain static, while the content in the body can be dynamically changed

I am in the process of creating a webpage where main.html will load a page with a static header and footer that remains unchanged when navigation links are clicked. I'd like to achieve this using Javascript, with the body content being sourced from an ...

javascripthtmlcss

Levitating with Cascading Style Sheets

Looking for some assistance to troubleshoot my code. I am trying to make the hover color apply only to the navigation bar and not affect the pictures. I attempted to solve this by specifying .a.main-nav:hover { ...}, but it ended up removing the hover effe ...

htmlcsshover

Angular ui-router redirection without altering the ui-view contents

Here's the code snippet from my app.js: // Setting up states using $stateProvider $stateProvider .state('/', { url: "/", views: { "top": { temp ...

htmlangularjsrouterangular-ui-router

Attempting to position a centrally aligned div block containing images towards the left side

I'm having an issue with aligning multiple images on my webpage. I want them to be left justified when the page is resized, while still keeping the div block centered. Currently, they are all being centered: See below: Here is the HTML and CSS code ...

htmlcss

I am trying to collapse the table header but I am having trouble doing so

@import url(https://fonts.googleapis.com/css?family=Roboto:400,500,700,300,100); @import url(https://fonts.googleapis.com/css?family=Roboto:400,500,700,300,100); body { bac ...

javascripthtmlcssbootstrap-4html-table

Building a Responsive Page with Bootstrap 4

I'm currently working on a design page with 2 boxes on the left side and 3 boxes on the right. It looks great on desktop, but I want the boxes to display individually on mobile devices and I'm having trouble figuring it out. Here is my code: < ...

cssbootstrap-4

Bringing in Unique Fonts with Flask and Tailwind CSS

I'm currently developing a web application using Flask and Tailwind CSS, but I am facing an issue with importing custom fonts. Despite successfully building the CSS file, the HTML template fails to display the font as intended. How can I ensure that m ...

pythonhtmlflaskjinja2tailwind-css

Discover the contents within #document utilizing PUPPETEER

Can someone assist me as I am new here? I am trying to retrieve elements from a virtual reference #document in HTML using Puppeteer, but every time I attempt it, I receive an error stating that the element does not exist. Here are some examples: HTML &l ...

htmlnode.jspuppeteer

Tips for looping through a table and opening the tab that meets a specific criterion

I am looking to cycle through a table in order to extract the values of "GST Invoice No." and access the "View Invoice" section for only those invoices whose third digit is a 2. from selenium import webdriver from selenium.webdriver.common.by import By fro ...

pythonhtmlseleniumselenium-webdriver

Adding spacing breakpoints in Material-UI 5 sx properties

Currently in the process of updating my components to utilize the latest MUI version. I have been converting old classes into the sx props and I find this new styling method to be more readable in my opinion. However, one thing that concerns me is handl ...

cssreactjsmaterial-ui

Manipulating CSS content property in React using Material UI

I am trying to set content: "" on my i element: "& i::before": { content: "" }, "& i::after": { content: "" }, However, the style is not being applied and I am seeing an ...

cssreactjsmaterial-ui

Learn how to align elements in the Toolbar component using the package "@mui/material" version "^5.11.3"

Recently, I came across this example on their website: https://codesandbox.io/s/0f50jf?file=/demo.js I've been attempting to align all toolbar elements in the center using: sx= {{ justifyContent: 'center', alignItems: 'center&apo ...

cssreactjsmaterial-ui

Is there a common issue in web browsers? Neglecting the position relative attribute on 'tbody', 'tr', and 'td' elements?

Trying to absolutely position elements within tbody, tr, and td may not work in certain browsers. While it behaves as expected in Firefox, it does not work properly in IE, Edge, and Chrome. If you apply position: relative to tbody, tr, or td, it will be i ...

htmlcsscss-positioncss-tables