Styling CSS code to centrally align a background image in the footer of a

Within my MVC app, there is a footer displayed on every page that includes an image. I am looking to align the image in the center if possible. The current CSS code for the footer is as shown below:

footer {
    position:absolute;
    bottom:-150px; /* This places the footer 100px below the bottom of the page*/
    width:70%;
    height:175px;   /* Height of the footer */
    background-image: url("/Images/Footer/Footer3.png");
    background-repeat: no-repeat;
    border-top: 1px solid darkgray;
}

What additional modifications are needed to center the image?

css

Answer №1

To achieve the desired effect, make sure to include the background-position property in your CSS code:

For more information on this topic, check out this resource

footer {
    position:absolute;
    bottom:-150px; /* Adjust as needed */
    width:70%;
    height:175px;   /* Set the height of the footer */
    background-position: center;
    background-image: url("/Images/Footer/Footer3.png");
    background-repeat: no-repeat;
    border-top: 1px solid darkgray;
}

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

Alignment of Bootstrap 5 card text and buttons

I've been diving into the BootStrap 5 Crash Course from this YouTube link: https://www.youtube.com/watch?v=4sosXZsdy-s. The final website from the tutorial can be found here: One specific part focuses on using Cards, but I'm facing an issue wher ...

htmlcssbootstrap-5

Tips for Positioning Sidebar Elements Relative to Content IDs

My goal is to have sidebar elements align with specific id tags in the main content, rather than just stacking up one after another. I want the sidebar elements to align with certain id tags mentioned in the main post content. The image at shows the basic ...

htmlcsssidebar

Could not find the element using the specified cssSelector

I am attempting to locate and interact with this specific div element. <div class="leaflet-marker-icon marker-cluster marker-cluster-small leaflet-clickable leaflet-zoom-animated" style="margin-left: -6px; margin-top: -6px; width: 12px; height: 12px; o ...

csswebdriverselenium-webdriver

After the automation is finished, I am interested in outputting the IMDB rating of a movie or series to the terminal

I prefer using Google search to find the element because I find it easier to navigate compared to IMDB. import selenium.webdriver as webdriver print("This script is designed to retrieve the IMDb rating of a movie or TV series!!!") def get_results(search_ ...

htmlcssseleniumwebweb-crawler

What are the implications of using :root along with the universal selector in CSS to overwrite Bootstrap variables?

As I work on theming my website, which utilizes Bootstrap, I am making adjustments to the Bootstrap variables. Some variables are defined against the :root element in a way that allows me to easily override them: :root { --bs-body-color: red; } Howeve ...

cssbootstrap-5

Card with multiple links and tab-stopping

I'm trying to figure out the best way to navigate through a series of project information cards that include links to a live demo and Github Repo without overwhelming visually impaired users with excessive tab stops. I want the navigation to be seamle ...

htmlcssaccessibility

Tips for creating equal height columns in Bootstrap 4

Working with Bootstrap 4 Beta in an attempt to create two columns that maintain full height regardless of screen size. The code below functions perfectly, ensuring both columns maintain full height across all devices. However, upon inserting the bootstra ...

javascriptjqueryhtmlcsstwitter-bootstrap

Animating drop-right feature in a horizontal navigation menu

I want to design a horizontal menu with an animated effect that activates when hovering over first-level items. Here is the code snippet: .nav { float: right; } .nav ul { list-style: none; padding: 0; margin: 0; } .nav ul li { position: relat ...

css

Semantic UI dropdown field not displaying selected option text

I've encountered an issue while working with React Semantic UI. I'm trying to render a dropdown and have configured it so that the selected option's text should display in the field. However, when I choose an option from the dropdown, instea ...

javascripthtmlcssreactjstsx

Issue of delayed loading of CSS in Vue.js application

My vue PWA is experiencing slow loading of CSS when using Vue Bootstrap and Buefy. I attempted to use V cloak, but it only hides components milliseconds after the raw HTML is briefly displayed without any CSS applied. I am looking for a method to display ...

cssvue.js

Enhance Your YouTube Comment Section with CSS Styling

I am brand new to css html and I'm attempting to create a comment display system similar to that of YouTube using only CSS. My goal is to have an image of the commenter displayed, followed by their username and comment text listed beside it. So far, I ...

htmlcss

What could be causing my sticky positioning to not function properly when I scroll outside of the designated

My website is organized into sections, with each section corresponding to a hyperlink in the navigation menu. I've applied the CSS property position: sticky to my navbar, which works as expected within the section bounds. However, I want my red navbar ...

javascripthtmljquerycss

Issue with CSS style on header with hyperlink

My CSS style includes a hyperlink for the "Title" to quickly navigate back to the home page. However, when I insert a table, this hyperlink gets disabled. /* JavaScript */ .header { position: absolute; height: 85px; right: 0; top: 0; left: 0; padding: ...

htmlcsshyperlink

Having Trouble With Your Font Display?

I am confident that my code is correct. Here's a snippet from what I've done: <!DOCTYPE html> <html> <head> <link rel="stylesheet" href="homepage.css"/> </head> <body> <div id="menu"> &l ...

cssfontsfont-face

The combination of jQuery, using .load method in javascript to prevent scrolling up, making XMLHttpRequest requests, updating .innerHTML elements, and troubleshooting CSS/JS

While utilizing this code, CSS and Javascript are disabled (only HTML loads): function loadContent(limit) { var xhttp = new XMLHttpRequest(); xhttp.onreadystatechange = function() { if (xhttp.readyState == 4 && xhttp.status ...

javascriptjqueryhtmlcssajax

Elevate Your Flipclock.js

I am currently working on a website that utilizes flipclock.js, but I am facing some challenges in enlarging it to occupy more space on the page. Is there anyone who knows how to upscale or increase its size? ...

cssflipclock

`Can you guide me on the proper path for designing this website layout?`

As I embark on creating my first website, I have a specific vision in mind. I want the full display on a computer screen to show all the information and links without any need for scrolling. However, when the window is resized to smaller screens, I would l ...

htmlcss

Steps to include a border around text and center align it:

As a beginner in Html and CSS, I am trying to create a heading with the text "Women safety" and wrap it with a border. However, when I apply the border to the text, it covers the entire width, extending both left and right. I only want the border to be a ...

javascripthtmlcssborder

What is causing this particular area to remain unaffected by the blur effect?

issue I followed a tutorial to create a mouse trailer from this video - https://www.youtube.com/watch?v=kySGqoU7X-s. However, when I tried adding text and other elements inside a div, the blur effect just didn't show up. I attempted using z-index but ...

javascripthtmlcss

Themes in Next.js with a splash of color

Is there a way to implement theming with color picking for elements? Check out the example here. I've explored using CSS variables and changing the document classname, but I'm uncertain if this is the best approach. @tailwind base; @tailwind com ...

cssreactjsnext.jsthemescss-variables