What is the best way to set up different background images for the top and bottom of a website?

I'm in the process of creating distinctive background images for the top and bottom sections of my website. After conducting some research, I discovered that I would need to create wrappers and insert content within them. I have successfully completed this step, and the backgrounds are functioning properly, except for the positioning of the bottom one. The bottom background seems to have a fixed position rather than aligning with the absolute bottom of the page. Below is the code I have developed thus far; I appreciate any assistance you can provide.

CSS

body {
 background-color: #0b0e13;
 padding: 0px;
 margin: 0px;
 font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
 font-size: 12px;
 color: #717e8e;
}
.accentbar {
 color: #2d3a4a;
}
#header {
 height: 200px;
 width: 960px;
 margin-right: auto;
 margin-left: auto;
 padding: 0px;
 margin-top: 0px;
 margin-bottom: 0px;
}
#content {
 height: 600px;
 width: 960px;
 margin-right: auto;
 margin-left: auto;
}
#footer {
 width: 960px;
 margin-top: auto;
 margin-right: auto;
 margin-left: auto;
 text-align: center;
 padding: 0px;
 margin-bottom: 0px;
}
#footer .text {
 color: #5a6470;
}
#headbar {
 height: 35px;
 width: 960px;
 padding: 0px;
 margin: 0px;
}
#logo {
 background-image: url(/img/logo.jpg);
 height: 55px;
 background-repeat: no-repeat;
 background-position: center bottom;
 width: 350px;
 margin: 0px;
 float: left;
 padding-top: 37px;
 padding-right: 0px;
 padding-bottom: 0px;
 padding-left: 0px;
}

#navbar {
 height: 65px;
 width: 610px;
 float: right;
 background-repeat: no-repeat;
 padding-top: 35px;
 padding-right: 0px;
 padding-bottom: 0px;
 padding-left: 0px;
}

#wraptop {
 width: 1200px;
 height: 100%;
 padding: 0;
 background-image: url(/img/backs/bg_t.jpg);
 background-repeat: no-repeat;
 background-position: center top;
 margin-top: 0;
 margin-right: auto;
 margin-bottom: 0;
 margin-left: auto;
}
#wrapbot {
 width: 1200px;
 height: 100%;
 padding: 0;
 background-image: url(/img/backs/bg_b.jpg);
 background-repeat: no-repeat;
 background-position: center bottom;
 margin-top: 0;
 margin-right: auto;
 margin-bottom: 0;
 margin-left: auto;
}

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Arbiters of Light</title>
<link href="/css/styles.css" rel="stylesheet" type="text/css" />
<style type="text/css">
</style>
</head>

<body>
<div id="wraptop">
 <div id="wrapbot">
  <div class="header" id="header">
   <div class="headbar" id="headbar">Content for  class "headbar" id "headbar" Goes Here</div>
   <div id="logo"></div>
   <div id="navbar">      
   <img src="/img/nav/abo.jpg" alt="about" width="82" height="60" hspace="0" border="0" /><img src="/img/nav/cha.jpg" alt="charter" width="86" height="60" hspace="0" border="0" /><img src="/img/nav/com.jpg" alt="community" width="97" height="60" hspace="0" border="0" /><img src="/img/nav/for.jpg" alt="forums" width="81" height="60" border="0" /><img src="/img/nav/gal.jpg" alt="gallery" width="78" height="60" border="0" /><img src="/img/nav/res.jpg" alt="resources" width="106" height="60" border="0" /><img src="/img/nav/app.jpg" alt="apply" width="80" height="60" border="0" />
   </div>
  </div><!-- end header -->
  <div class="content" id="content">
  </div><!-- end content -->
  <div class="footer" id="footer">
   <p>PRIVACY - TERMS OF SERVICE - CONTACT - DISCLAIMER<br /></p>
   <p class="text">© 2011 ARBITERS OF LIGHT</p>
  </div><!-- end footer -->
 </div>
</div>
</body>

htmlcssweb

Answer №1

Experiment with CSS3 multi-background:

body {
  background: url(/img/backs/bg_t.jpg) no-repeat center top,
  url(/img/backs/bg_b.jpg) no-repeat center bottom; /* second background */
}

Answer №2

Excuse me, but I'm curious why you have placed your wrapbot within your wrap top div? Wouldn't it be more beneficial to position that div below the wrap top div? This adjustment might resolve any issues you are experiencing. Personally, I typically opt to place an image at the end with a lower z-index to ensure any content on top displays properly. This method has proven successful for me in most cases.

Answer №3

It is important to place the wrapbot div separately at the bottom of the page or code, without nesting it within any other divs. Additionally, ensure that the position of the wrapbot div is set to absolute and positioned like you did with bottom center repeat x.

#bgtop {
 width: 1200px;
 height: 100%;
 padding: 0;
 background-image: url(/img/backs/bg_t.jpg);
 position: absolute;
 background-repeat: x;
 background-position: center top;
 margin-top: 0;
 margin-right: auto;
 margin-bottom: 0;
 margin-left: auto;
 z-index:1;
}
#bgbottom {
 width: 1200px;
 height: 100%;
 padding: 0;
 background-image: url(/img/backs/bg_b.jpg);
 position:absolute;
 background-repeat: x;
 background-position: center bottom;
 margin-top: 0;
 margin-right: auto;
 margin-bottom: 0;
 margin-left: auto;
 z-index:1;
}

The HTML structure could be as follows:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Arbiters of Light</title>
<link href="/css/styles.css" rel="stylesheet" type="text/css" />
<style type="text/css">
</style>
</head>

<body>
<div id="bgtop">
</div>

  <div class="header" id="header">
   <div class="headbar" id="headbar">Content for class "headbar" id "headbar" Goes Here</div>
   <div id="logo"></div>
   <div id="navbar">      
   <img src="/img/nav/abo.jpg" alt="about" width="82" height="60" hspace="0" border="0" /><img src="/img/nav/cha.jpg" alt="charter" width="86" height="60" hspace="0" border="0" /><img src="/img/nav/com.jpg" alt="community" width="97" height="60" hspace="0" border="0" /><img src="/img/nav/for.jpg" alt="forums" width="81" height="60" border="0" /><img src="/img/nav/gal.jpg" alt="gallery" width="78" height="60" border="0" /><img src="/img/nav/res.jpg" alt="resources" width="106" height="60" border="0" /><img src="/img/nav/app.jpg" alt="apply" width="80" height="60" border="0" />
   </div>
  </div><!-- end header -->
  <div class="content" id="content">
  </div><!-- end content -->

  <div class="footer" id="footer">
   <p>PRIVACY - TERMS OF SERVICE - CONTACT - DISCLAIMER<br /></p>
   <p class="text">© 2011 ARBITERS OF LIGHT</p>
  </div><!-- end footer -->

<div id="bgbottom">
</div>
</body>

In fact, calling them bgtop and bgbottom instead of wraptop would be more appropriate since they do not necessarily need to wrap anything in particular.

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

Modifying column layout within an HTML webpage

I'm seeking advice on modifying a code. I'd like to keep it the same as it is now, but with one change - I want to decrease the width of the main video box and add another one beside it with an iframe code for a chatbox. Here's the current c ...

javascripthtml

Tips for efficiently implementing AJAX requests for multiple forms within a single webpage

Previously, I had a form where clicking submit would hide the form and display the result on a div with classname=dig. However, after adding more forms, all the forms started submitting at the same time instead of individually. How can I fix this issue in ...

javascriptjqueryhtmlajax

Tips for eliminating the entire link from the footer section

Whenever a link is hovered over, a white box displaying the full URL appears at the bottom left of the browser. Is there a way to remove this feature from my website? I appreciate any assistance with this issue. Thank you! ...

htmlcssbrowserhyperlink

Preventing parent properties from overriding descendants is a key part of maintaining a hierarchical

I found a css file online that I'm using for a website I'm building, but I am only incorporating certain components from it. The issue is that the global styles in this css file are overriding all the global styles on my website. My solution was ...

htmlcsscss-selectors

Angular Dashboard Framework with a personalized editing menu option

I am currently using the Angular Dashboard Framework (sdorra) and I would like to customize the edit menu. https://i.sstatic.net/I9jDI.png By default, clicking on the menu allows me to add a widget, edit the dashboard, save, and discard changes as shown ...

javascripthtmlangularjsdashboard

JavaScript is failing to pass the argument value

Whenever I attempt to pass a value on an onclick=function('') function, the value does not seem to get passed correctly while ($row = mysqli_fetch_array($result)) { $id = $row['id']; echo '<a href="#" onclick="DeleteUse ...

javascriptphpjqueryhtmlajax

Automatically log users out of Django and update the backend after a period of inactivity without requiring any additional requests

In my Django project, I am working on a simple multiplayer system where I need to update the isCurrentlyActive value in a user-related model automatically and then log them out. I tried using middleware following a solution from this post, which works well ...

javascripthtmlcssdjango

Unable to display divs in a stacked format using Bootstrap 5

I need help aligning div's vertically on the page. Currently, all my elements are displaying next to each other instead of stacking one below the other. body { height: 100vh; } <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi ...

javascripthtmlcssalignmentbootstrap-5

Include the HTTP header in a GET request for an HTML hyperlink

Within my HTML code, I am using an <a> tag that will trigger a 302 redirect when clicked. However, I need to incorporate some HTTP headers into this GET request. Is there a way to achieve this without including the headers in the href attribute? Tha ...

javascriptjqueryhtmlajax

Encountering problems when attempting to effectively filter a list of products using data

<div id="prod"> <div class="content" data-brand="Andrew" data-price="1000" data-store="JCPenny">Andrew</div><br /> <div class="content" data-brand="Hill" d ...

javascripthtmljquerycheckbox

extract the value from the chosen option in a web element

I'm struggling to retrieve the selected option value in my web component so that users can easily access it. It seems like the issue lies within the shadow root. __loadOptions() { const SELECT = this.shadowRoot.querySelector('select'); ...

javascripthtmlweb-componentshadow-domlit-element

Adjusting the height of table rows based on the content within the <td> element

I am facing a challenge with a table that includes rows with 2 columns - one for images and the other for text. The issue arises when resizing large images in one column, causing the row to take its height from the image cell rather than the text cell. Sin ...

javascriptjqueryhtmlcssinternet-explorer-8

Steps for showcasing the data entered in the input box

I am looking to enhance my skills in working with Angular and JavaScript. I would greatly appreciate any feedback on the issue I am facing here. My goal is for the text box input to display: "hello {name} , would you like to play a game? However, curr ...

javascripthtmlangularjs

How can I implement a jQuery slide down effect for a specific individual instance?

Whenever I click on the "Share your thoughts" button, the comments block slides down for every section instead of just the particular section I clicked on. Is there a way to make it so that only a single block slides down when the button is clicked, regard ...

javascriptjqueryhtmlcss

Updating an element within a for loop using Angular TypeScript

I'm trying to figure out how to update the value of an HTML DOM element that is bound from a TypeScript file in each iteration of a for loop, rather than at the end of the loop. I want to see all values as the loop is running. For example, imagine I ...

htmlangulartypescript

Assigning multiple identifiers to a single element

Multiple posts have emphasized the importance of using an ID only once. But, I'm facing a situation where I need to pass 2 PHP variables to my JavaScript. I initially thought of using document.getElementById, but since IDs must be unique, this approa ...

javascriptjqueryhtmlajax

Using Django to add JSON data to the request.Post object

I need to insert my JSON object into the Django request Here is my HTML code: <form method="post" action="/IE/changePassword/" > <table> <tr> <td><h4>Mobile Number : </h4></td> <td><inp ...

pythonhtmljsondjangorequest

Exploring a new method for AJAX loading when handling large amounts of data into multiple div elements

As I continue my learning journey with html and jquery, I have been exploring ways to replicate monitoring systems (SCADA) into web-based systems. During this process, I discovered openseadragon as a MAP system similar to google maps that allows for overla ...

javascriptjqueryhtml

Is there a way to align an image alongside text in CSS with Bootstrap 4?

I am working on creating a box that displays the profile photo of a user along with their nickname on the right side. To achieve this, I have attempted various approaches while utilizing Bootstrap 4: My initial attempt involved using columns, but it did n ...

htmlcsstwitter-bootstrapbootstrap-4

When deploying a website with the default Hugo theme on Netlify, I encountered a strange issue where the webpage appeared blank. Sur

After coming across a question similar to mine about creating a static page using blogdown with the same Hugo theme as the main site on Stack Overflow, I still find myself struggling to understand the solution provided. As an absolute beginner, I am curren ...

htmlrstudionetlifyhugoblogdown