Is the footer missing from view?

I tried to replicate my header code for the footer, but it doesn't seem to be displaying. I've double-checked everything and can't figure out why it's not working. Maybe there is a typo somewhere.

Below are the two sets of code:

Header

<div class="head">
 <div class="centerimg">
 <img src="images/logo.png" width="96" height="82">
 </div>
    .head {background-image:url('images/header_bg.png'); top repeat-x; height: 182px;}

Footer

<div class="footer">
</div>

.footer {background-image:url('images/footer_bg.png'); bottom repeat-x; height: 110px;}

Why does the header display properly while the footer doesn't show up?

htmlcssheaderfooter

Answer №1

Several web browsers may not support the use of empty <div> tags, potentially resulting in the footer failing to display correctly on your browser.

Answer №2

Your code implementation seems to have some errors, especially with defining the .head and .footer classes. The order in which you are setting the 'position' and 'attachment' properties in your CSS shorthand is also incorrect. For more information on this topic, you can refer to this link. I recommend adding the following code inside your HTML head tags:

<style type="text/css">
  .head {background: transparent url('images/header_bg.png') repeat-x 0px 0px; height: 182px;}
  .footer {background:transparent url('images/footer_bg.png') repeat-x 0px 0px; height: 110px;}
</style>

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

Hello there! Could you please provide some guidance on how to insert a photo onto a website using Django?

How can I implement a feature that allows users to choose a photo for a product from within the system or enter a URL to use as the image? The selected image should be displayed in the product list along with other relevant information. I have written the ...

htmldjangoimageformsdjango-models

Issues with Ajax response causing PHP and HTML submit button to not function properly

When I have an input on my webpage that is linked with AJAX, it searches for a name in the database and returns the result as an HTML form with values from the database. However, the submit button within the form is not functioning properly. Here is a sni ...

phpjqueryhtmlajaxsubmit

Side Panel Extending Off Screen Upon Resizing

I'm encountering an issue with the sidebar on my HTML page. The problem arises when I click the 'Upload Data' button, causing the sidebar's header to extend beyond the screen if I resize the window. The only way to fix this is by refres ...

javascripthtmlcssbootstrap-4sidebar

The structure of the figure tag for HTML5 validation

Could you please confirm if the Figure tag is correctly used in the html structure? Regarding html5 validation, can I use this structure? <a href="#"> <figure> <img src="" class="img-responsive" alt=""> <figcaption> ...

csshtml

To style the input box, apply the CSS properties "filter: alpha(opacity=70);" and "background-image: url(image.png);"

Individual functionality for both the form and css has been achieved, but when trying to implement them together, they do not work as intended. This integration is specifically for a windows sidebar gadget. Here is the structure of the form: <form nam ...

javascriptcssfilterbackground-imageopacity

Refresh a row in real-time by utilizing a modal with JavaScript or jQuery

Is there a way to dynamically edit and update a previously submitted row (category name) in a table? I am able to edit a row by clicking on an edit button and displaying a modal with the current value. However, I am facing a challenge when trying to submit ...

javascripthtmljquerymodal-dialog

Safari causing margin problems

Encountering a margin problem specifically with Safari that I'm having trouble debugging. While everything functions properly in Firefox, Chrome, IE, etc., Safari presents issues. My content div is positioned just below the header, but in Safari, it o ...

csssafarimargin

Is there a way to arrange the navigation items to appear on the right side upon toggler click?

I've been trying to get the nav-items to align on the right side, but so far using the ms-auto class from Bootstrap isn't giving me the desired result. <html lang="en"> <head> <!-- Required meta tags --> < ...

htmlcssbootstrap-5

Simple Jquery image rotator generating two galleries side by side

Currently, I am encountering an issue where I am unable to configure the Jquery rotator from Easy Jquery Auto Image Rotator and script source Google jquery.min.js I attempted to give the second gallery a different class and duplicated the js script. ...

javascriptjqueryhtmlcss

Having trouble with the footer in CSS? Seeking assistance

GOAL: I am seeking to adjust the placement of the footer based on various factors. More details can be found below: 1) The objective is to position the footer at the bottom of the screen when there is minimal content (or only 1 or 2 lines) on the page. Th ...

htmlcssfooter

Nav links in Bootstrap are seriously misplaced

My navigation bar, created with Bootstrap 4 CSS, consists of 3 links and a brand logo. Despite my expectations of all elements aligning properly, they appear disorganized and not in line. Please see the current layout here: https://i.sstatic.net/OeKcf.pn ...

htmlcsstwitter-bootstrapalignmenttwitter-bootstrap-4

Creating visually stunning full-width sections with graphic backgrounds using Bootstrap

Trying to bring a unique design concept to life, courtesy of my talented graphic designer. However, this sleek look is proving to be quite the challenge as I navigate through bootstrap implementation. We are focusing on a call to action section that perfe ...

htmlcsstwitter-bootstrap

Is there any HTML code that is able to implement a currency format identical to the one we've customized in Google Sheets/Google Apps Script

I am currently working with a Google Sheet table that consists of 2 columns. The second column contains charges which can vary based on user input through a Google Form and are summed up using GAS. To view an example, click here. The data from this Googl ...

javascripthtmlcssgoogle-apps-scriptnumber-formatting

How can I ensure that the content within a div does not overflow and that horizontal scrolling is enabled? What is the correct way

After designing my profile page, I encountered a problem related to horizontal scrolling caused by overflow. Despite trying various solutions like adjusting the width of .profilePg, I haven't been able to resolve this issue without disrupting the over ...

htmlcssoverflow

Tips for positioning the footer at the bottom of the page

During the process of constructing a new website, I included a footer that is neatly positioned at the bottom of my screen. https://i.sstatic.net/HgAbY.png However, I noticed that on pages with minimal content, the footer does not remain fixed at the bott ...

htmlcsstwitter-bootstrap

html issue with d3.js rendering images: works in firefox, but not in chrome

I am currently experiencing an issue with a D3 graphic that runs successfully in Firefox but fails to render in Chrome when using an HTML and JSON file. Upon checking the console, I see the following error message: d3.v3.min.js:1 Access to XMLHttpReque ...

javascripthtmljsongoogle-chromed3.js

Is it possible to remove strings within HTML elements?

{% for term in terms %} <div class="term term-count-{{loop.index}}"> <b>{{ term }}</b>: &nbsp;&nbsp; {{ terms[term] }} &nbsp;&nbsp; </div> {% endfor %} 'terms' is a dictionary w ...

pythonhtmlcssflaskjinja2

What is the best way to ensure that `col-sm-4` takes up the full space previously occupied by `col-sm-5` when it is hidden

In tablet mode, I am concealing my col-sm-5 using the class hidden-sm. <div class="row"> <div class="col-sm-4"> </div> <div class="col-sm-5"> </div> <div class="col-sm-3"> </div> </div& ...

csstwitter-bootstraptwitter-bootstrap-3

ng-class in Angular seems to be functioning properly on <td> elements, but is not

When using this HTML inside an ng-repeat, there is a difference in behavior: This part works fine: <tr> <td ng-class="info.lastInMonth">{{ info.date_formatted }}</td> ... But this section does not work as expected: <tr ng ...

htmlcssangularjshtml-table

Styling Html.ActionLink is not supported

I'm struggling to style my links properly when combining CSS and Bootstrap with MVC. It seems like @Html.ActionLink is needed for redirection, but styling remains a challenge. Is there a way to style it effectively? When using pure CSS, everything wo ...

cssasp.netasp.net-mvcmodel-view-controllerstyling