Tips for keeping the background image anchored to the bottom of your browser

I am looking to make sure that the footer image on my website remains at the bottom of the browser when the page content is short.

The CSS code currently being used for this is:

#site-container {width:100%; background:url(.../site-bg-foot.jpg) no-repeat left bottom;}

This code works perfectly for longer pages, but I am struggling to find a solution for shorter ones. I have tried various tutorials without success. Is there a specific property I can add to the existing code in order to keep the image anchored at the bottom?

Thank you

htmlcsswordpressfootersticky-footer

Answer №1

Give this a shot:

position: fixed;
bottom: 0;

This code can help you style the footer in your CSS file.

If you're looking for more options, I suggest checking out this article. Here's a general idea of how it works:

HTML

<body>
    <div id="wrapper">
        <div id="header"></div>
        <div id="content"></div>
        <div id="footer"></div>
    </div>
</body>

CSS

html,
body {
    margin:0;
    padding:0;
    height:100%;
}
#wrapper {
    min-height:100%;
    position:relative;
}
#header {
    padding:10px;
    background:#5ee;
}
#content {
    padding:10px;
    padding-bottom:80px;   /* Height of the footer element */
}
#footer {
    width:100%;
    height:80px;
    position:absolute;
    bottom:0;
    left:0;
    background:#ee5;
}

Answer №2

Check out this jsfiddle link for a solution to your issue.

To address the problem, I included the following CSS properties: position:fixed; and bottom:0; in the .footer class.

Here is the sample HTML code:

<div class="content">
<p>Lorem ipsum dolor sit amet.</p>
</div>

<div class="footer">Curabitur interdum, lorem quis feugiat interdum.
</div>

And here is the accompanying CSS code:

body {
    margin: 0;
}

.content {
    width: 100%;    
    margin-bottom: 1em;
}

.footer {
    position: fixed;
    bottom: 0;
    height: 50px;
    width: 100%;
    background-color: #e5e5e5;
}

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

An image spanning two columns on a page with three columns

I am currently utilizing Foundation 4 for my website design. I am attempting to create an image that spans over 2 columns in a 3-column layout using the Foundation grid system. Here is how I envision it: https://i.sstatic.net/m7InR.jpg I am wondering if ...

csszurb-foundation

Locate the HTML code following an AJAX response

JavaScript code snippet: $("#category select").change(function(){ var category = $('select option:selected').html(); $.ajax({ type:"Post", url:"collectiepost.php", data:"category="+category, cache:"false" ...

jqueryhtmlajax

Is there a way to update a field request without the need to refresh the page?

I am currently working on a form that includes several fields, with the first one being an ID number input field. This ID is associated with another model for verification purposes. I have created a function called get_employee_name, which retrieves the em ...

html

JQuery is not able to render Hindi content properly

I am attempting to showcase some Hindi words using JQuery because these are essential contents that need to be displayed on every page of the website. Please note that this is a static website built with HTML and JQuery/JavaScript. Below is my JS file: in ...

javascriptjqueryhtml

Header should elegantly glide up and down as the user scrolls through the page

I've implemented a top div on my page that houses contact details and social media links. I've managed to hide it during scrolling and make it reappear when reaching the top of the page. However, I'm hoping to smoothen this transition with a ...

javascriptjqueryhtmlcssbootstrap-4

Navigating between various arrays

I'm struggling to create a basic slideshow using the JavaScript code below, but it doesn't seem to be functioning correctly. I have meticulously checked for any errors in spelling and made sure all elements are correctly linked to my HTML. JavaS ...

javascripthtmlarraysslideshow

Struggling to get custom button hover styles to work in React?

In the React project I'm working on, there is a button that has been configured in the following manner. <label style={styles.label}> <input style={styles.input} type="file" accept="image/*" onChange={this.onUpload} /& ...

cssreactjsbuttonhover

I am interested in creating a class that will produce functions as its instances

Looking to create a TypeScript class with instances that act as functions? More specifically, each function in the class should return an HTMLelement. Here's an example of what I'm aiming for: function generateDiv() { const div = document.crea ...

javascripthtmltypescript

What could be causing my script to not execute properly?

I have reviewed my script multiple times and I am completely stumped as to why it is not running at all. Any assistance would be greatly appreciated... This is the script in question.... </head> <script type="text/javascript> $(document) ...

jqueryhtml

An issue arose while attempting to retrieve information based on the specified ID within the database

I am facing a challenge that I need help with, I have a webpage that displays questions fetched from a database and I have created a comments section for each question. How can I retrieve comments based on the post_id? I attempted to fetch them as usual bu ...

phphtmlmysqllaravel

Using FlexBox for Vertical Alignment of Elements

Experimenting with FlexBox (for demonstration purposes only). I am facing a challenge in vertically centering text within the parent .top-nav-bar. While using justify-content: space-between, I have successfully aligned two elements horizontally, but I am s ...

cssflexbox

Setting an ElementImpl property explicitly in EMF/GMF/Papyrus outside of the code

I am working with an EMF-model and its generated editor. In this model/editor, there is a connection between Element "Unit"(U) and "Specification"(S). My goal is to have a specific CSS style for S if at least one U satisfies S. Unfortunately, I have not fo ...

javacsseclipse-emfeclipse-gmfpapyrus

The alignment of divs can be disrupted in a Nested Grid system

I am working with a 16 grid system where I have two 8 column divs positioned side by side. In one of the 8 column divs, I am trying to include a 5 column div on the left and two three columns divs stacked on top of each other on the right. I have tried v ...

htmlcss

Content that is partially concealed when scrolling through div elements

I have been searching high and low for similar questions, but to no avail. So, I am laying out my problem here in the hopes that you could guide me on what I might be doing wrong and how to rectify it. The scenario I am trying to achieve is having two divs ...

csshtmlscrollbar

Issues with div and hyperlinks/forms

I am currently working on creating a left sidebar in my HTML code, but I am still new to this. In the div for the sidebar, I have three buttons. However, Weebly keeps notifying me of an issue with the <a> tag, and the second button's link appear ...

cssclasshtmlbutton

Can Bootstrap be used to create distinct spacing between table rows in a DataTable?

How can I achieve the look of separate table rows as shown in the image provided? I am currently using DataTables and bootstrap 5. I am looking to create visually distinct rows where the background is visible in between each row. Click here to view the i ...

htmlcssdatatablesbootstrap-5

Tips for setting an image as the background on various mobile screen sizes

Is there a way to set an image as a background that will work effectively with multiple different mobile screen resolutions without distorting or cropping the image? For example, if I want the image to display correctly on both iPhone4 and iPhone6 without ...

htmlcssimage

Reduce the size of the header in the Sydney theme for WordPress as you scroll

Currently, I am attempting to reduce the size of the header once scrolling down. My focus is on refining the child theme. Displayed below is a screenshot illustrating the appearance of the header at the top of the page: https://i.stack.imgur.com/wojGf.pn ...

javascriptjquerycsswordpress-theming

Incorporate unique custom posts into the WordPress loop for a touch of randomness

I've been struggling to solve a problem and haven't had much luck. I've searched on Google, Stack Overflow, etc., but all I find are generic answers. Here's the issue: I'm using a standard loop to get my posts <?php if ( have ...

phpwordpress-themingwordpress

Adjusting the width of the header in Wordpress themes like Genesis and Foodie Pro

Struggling with the header appearance on my website. I want the blue section to be full width while keeping the logo and navigation the same width as the content area (1040px). I'm new to Wordpress and unsure how to make this adjustment. Someone sugg ...

csswordpress