Member Avatar for a.emara47

I want to put a footer in a page wrap but it doesn't appear at all
i write the markup

<div id="footer">
</div>

and the CSS

#footer {

        min-height: ..... ;
         background: url(images/footer.jpg) no-repeat;
}
  • 3 Contributors
  • 5 Replies
  • 115 Views
  • 14 Hours Discussion Span
  • Latest Post Latest Post by G&G Designing

Dani AI

Generated

Quick follow-up tied to the thread: ’s checks about quoting and dimensions and ’s suggestion to use a solid background are good first diagnostics, and confirmed that giving the footer dimensions made the background visible. The typical causes for a background that “doesn’t appear” are a zero-sized box (empty element with no height/padding), a broken URL (paths in CSS are relative to the stylesheet), the rule being overridden, or float/positioning issues that hide or collapse the element.

Useful troubleshooting checklist

  • Confirm the selector is actually applied: inspect the element and view the computed box model (width/height/padding/border).
  • Verify the image loads in the Network panel and that the URL is correct relative to the CSS file.
  • Reveal the box visually with a temporary outline or border to see whether it has area:
#footer { outline: 2px dashed #f06; }
  • If nearby elements are floated, the footer can collapse or be overlapped; contain floats with a clearfix:
.clearfix::after {
  content: "";
  display: table;
  clear: both;
}

Modern, more robust approach (responsive): avoid relying on a fixed width. Using a page wrapper with flexbox makes the footer behave predictably and lets the footer hold a background that scales:

html, body { height: 100%; margin: 0; }
.site { min-height: 100vh; display: flex; flex-direction: column; }
main { flex: 1; }
footer {
  background-image: url('/images/footer.jpg');
  background-size: cover;
  background-position: center;
}

Notes and references: prefer padding or an explicit height to give the footer vertical space instead of a fixed width when building responsive layouts; clear browser cache after fixes. For details on how min-height and the CSS box model affect painting, see MDN: min-height. For a resilient sticky-footer pattern, see MDN: Flexbox.

Recommended Answers

All 5 Replies

Member Avatar for Arkinder

background: url('images/footer.jpg') no-repeat; Note the single quotes.

Make sure that you're using the correct file path, then try giving it a set width and height. If it's still not appearing, then another element is affecting it.

Regards
Arkinder

Member Avatar for G&G Designing

also try doing

background-color: #000;

to see if the sections displaying, When i code up a design, i always set random solid colors to make sure i get the layout all setup

Member Avatar for a.emara47

background: url('images/footer.jpg') no-repeat; Note the single quotes.

Make sure that you're using the correct file path, then try giving it a set width and height. If it's still not appearing, then another element is affecting it.

Regards
Arkinder

Thanks the problem wasn't about quotes but as you said i set a width and it worked

Thank you

Member Avatar for a.emara47

also try doing

background-color: #000;

to see if the sections displaying, When i code up a design, i always set random solid colors to make sure i get the layout all setup

I tried your method but it didn't work but anyway thank you for your try

Edited by a.emara47 because: n/a
Member Avatar for G&G Designing

I tried your method but it didn't work but anyway thank you for your try

I wasn't really trying to solve your problem, i was more giving you a tip since i figured the other guy fixed it.

Anyhow, use the edit button when replying so you don't do more than 1 post, <-- another tip ^_^

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.