Resizing an image within a div with automatic adjustment, centered and aligned to the bottom position

I'm really struggling to understand this concept and not making much progress. I have a background image that automatically scales to fit the window size. In front of it, I want to center an image fixed to the bottom of the page, while still being scalable. Here is the CSS code I am currently using:

        #guys img{
            width:35%;
            margin-left:auto;
            margin-right:auto;
            bottom:0px;
            position: fixed;
        }

And here is how I am implementing the DIV:

    <div id="guys">
        <img src="img/boys.png" alt="">
    </div>

The issue is that the image ends up fixed at the bottom of the page and is scalable, but I can never get it centered as well. Any suggestions or thoughts? I would greatly appreciate any help!

csshtmlpositionmarginautoscaling

Answer №1

If your image is already contained within a div, simply adjust the positioning of the div and set it to margin auto with the same width as your image. This should resolve any display issues you're experiencing.

        #people{
        position:relative;
        margin:auto;
        width:45%;

    }       
       #people img{
        width:45%;
        bottom:0px;
        position: fixed;

    }

Answer №2

Once you apply a fixed position to an element, the margin auto functionality ceases to work.

Instead, you can try setting the left value of the img to 50% (aligning the center of the page with the left side of the image) and then applying a margin-left of -17.5%, which will center the image on the page.

To see an example, check out my jsfiddle.

Snippet:

#centeredBottom {

    left: 50%;
    margin-left: -17.5%; /* Half of the width */

    position: fixed;
    width:35%;
    margin-left:auto;
    margin-right:auto;
    bottom:0;
    position: fixed;
    display: inline-block;
    height: 20px;
    background: #00FF00;
}

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

Ways to eliminate class from HTML code

Trying to detect if a navigational element has a specific class upon click. If it has the class, remove it; if not, add it. The goal is to display an active state on the dropdown button while the dropdown is open. The active state should be removed when a ...

javascripthtmljquerycss

The fixed left div and scrollable right div are experiencing issues with their alignment

I am having an issue with a section where the left div is fixed and the right div is scrollable. However, the content of the right div scrolls even before the scroll top reaches the section. My goal is for the right div to scroll only when it reaches the t ...

javascripthtmljquerycssflexbox

Achieving optimal performance with scoped CSS in Vue.js

As I work on creating a new app using VueJs, I have noticed the implementation of "css scoped" as shown below: <style scoped> .example { color: red; } </style> <template> <div class="example">hi</div> </template> ...

javascriptcssvue.jsatomic

What are the steps for adding information to a MySQL database with GWT, HTML, and either JDBC or Hibernate?

I have been working with GWT (Google Web Toolkit) version 2.5.1 and successfully developed a sample application to display the username and password. However, I am now facing challenges in inserting these values into a MySQL database table using JDBC or Hi ...

mysqlhtmlhibernategwt-rpc

Utilizing nested createHtmlOutputFromFile in Google Apps Script HtmlService to generate jQuery code

Embarking on a new journey, I am diving headfirst into the world of JQuery WebApp with Google Apps Script. Every day is filled with new discoveries and excitement as I immerse myself in learning to piece things together. Starting off with some examples an ...

jqueryhtmlgoogle-apps-script

Troubleshooting: Android compatibility issues with dynamic source for HTML 5 video

My HTML5 video with dynamic source loaded using JavaScript is functioning properly in a web browser but encountering issues within an Android PhoneGap build application. Take a look at the code snippet below: JavaScript code: $('#video_player' ...

javascriptandroidhtmlphonegap-build

Disabling a chosen option within a dropdown menu

`Hello there, I am just starting out with JavaScript and jQuery. Currently, I am developing a web application for ordering food and drinks. I have a dropdown menu for selecting breakfast items and the quantity. When the "add" button is clicked, a dynamic ...

javascriptjqueryhtml

Replicate and $(document).ready()

My form has required fields that need to be completed. To alert users about blank fields, I have implemented the following code: $(document).ready(function() { $('input.required:text').focus(function() { $(this).css({'background ...

javascriptjquerycss

Using the `implode()` function in PHP to concatenate values for a MySQL query

Recently, I ran into an issue while using the implode function in PHP. <?php $insertValues[] = "(default,'{$y}', '{$p}', '{$o}', '{$i}', '{$u}','AMM-40','test')"; $query_status = ...

phpmysqlhtml

Customizing CSS in Angular Components: Taking Control of Style Overrides

I am new to working with Angular and HTML. Currently, I have two different components named componentA and componentB, each having their own .html, .css, and .ts files. In the componentA.css file, I have defined some styles like: .compA-style { font- ...

htmlcssangular

I'm encountering difficulties implementing anchor tags within my single-page application

Currently, I am in the process of learning how to create single page applications with AngularJS using the ui-router module. However, I have encountered an issue where the anchor tag on my main HTML page is not functioning correctly. I am now at a standsti ...

htmlangularjsangular-ui-router

utilizing symbols from a vector graphic icon库

There are countless icon images to be found on the internet. Recently, I came across this particular set and now I'm stumped on how to actually utilize them. Despite my efforts to find tutorials online, I have come up short in finding any helpful reso ...

htmlcssvectoricons

Unusual behavior in ReactJS and HTML5 video player observed

I currently have two React presentation components that include HTML5 video tags. The first component, named Homepage, is as follows: export default class Homepage extends React.Component { render() { return( <div className="Homepage"> ...

htmlreactjsvideo

Unfortunately, Safari and iOS do not support the video functionality

I am encountering an issue with my HTML5 sample video not loading in Safari 11 on OSX, but working perfectly fine in Chrome and Firefox. Additionally, the video is not functioning on iOS at all (neither in Safari nor in Chrome). Below is the HTML code: & ...

djangohtmlvideosafarihttp-headers

CSS: Struggling to properly position two flex items

I'm having some trouble with the alignment in my flex container. The title is perfectly centered, but the breadcrumb content is not aligning correctly. Specifically, I want the breadcrumbs to be right-aligned and positioned 25px from the top within t ...

htmlcssflexbox

Vue 3 allows for creating multiple cards with unique contents

I received this outcome: Content duplicated but not cloned as a card element Below is the code snippet <script setup> import { ref } from 'vue'; defineProps({ project: String, }); const projectList = ref([ { img: './src/asse ...

cssvue.jsvue-componentvuejs3

Switch or toggle between colors using CSS and JavaScript

Greetings for taking the time to review this query! I'm currently in the process of designing a login form specifically catered towards students and teachers One key feature I'm incorporating is a switch or toggle button that alternates between ...

javascriptjqueryhtmlcss

Ensuring that the div remains at the top of the page while scrolling

Although this question has been asked previously, I have searched extensively for something similar to this - Incredible Things You can find what I have at Below is the code snippet: <div id="myElement"> <div id="nav"> <a href= ...

jqueryhtmlcssscrollblogger

The Angular material datepicker fails to organize items in a horizontal row

My web application features an Angular Material datepicker, however, I am facing an issue where not all elements are showing up in a row. The view is as follows: Datepicker To prevent any custom CSS from impacting the view, I have removed all customized ...

cssangularangular-materialdatepicker

"What is the best way to access and extract data from a nested json file on an

I've been struggling with this issue for weeks, scouring the Internet for a solution without success. How can I extract and display the year name and course name from my .json file? Do I need to link career.id and year.id to display career year cours ...

javascripthtmlangulartypescriptionic-framework