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

verified that all form checkboxes were selected in angularJS

Hey there, I have a form in AngularJS with multiple checkboxes. When the first checkbox (Check All) is clicked, I want all the checkboxes to be checked. How can I achieve this using Angular for each field loop? Below is a snippet of my code: vm.asas = f ...

htmlangularjsforms

Creating responsive tabs that transition into a drop-down menu for mobile devices is a useful feature for

I am looking to create a responsive tab design that drops down like the example shown below: Desktop/Large Screen View https://i.stack.imgur.com/hiCYz.png Mobile View https://i.stack.imgur.com/gRxLv.png I have written some code for this, but I am unsure ...

javascriptjqueryhtmlcss

Dismiss the pop-up box by clicking outside its borders

I have created a unique homepage featuring pop-up boxes with login fields. The background dims when a pop-up appears, and the user should be able to close the pop-up by clicking outside the box boundaries. Although the function closeOverlay works when the ...

javascripthtml

Tracking activities in Laravel app---How to monitor actions

Is there a way to split the date and time onto one line in my script? I'm having trouble achieving this as shown here: Here is my current script: <div class="tab-pane active" id="tab_overview"> <div ...

phphtmllaravel

Using Python to interact with website dropdown menus without relying on Selenium

Is there a Python library available that can assist me in opening a web page, selecting options from drop-down lists, and performing clicks without relying on Selenium? ...

pythonhtmldropdown

jQuery method for implementing alternating row colors that are not sequential

Starting from scratch here. I've fetched a table from a remote server where odd rows are white and even rows are grey. Some rows have been hidden: $("td").filter(function(){ return $(this).text()=='R1';}).text('Row1'); //white $(" ...

jquerycsshtml-table

Animating SVGs in Internet Explorer (IE)

I'm currently working on an animation project using SVG images and JS, but unfortunately, I've run into a roadblock with SVG animations not functioning correctly in Internet Explorer. Do you happen to know of any solutions that could make it work ...

javascriptjqueryhtmlinternet-explorer

Is there a way to left-align these items?

I currently have 10 divs arranged side by side. I am trying to align the last divs to the left instead of center, but the solutions I found so far are not working. I've checked Bootstrap's documentation and tried using <div class="d-flex ...

htmlcss

Viewing an image from a local file on a web browser

I am currently working on a project where I want the user to be able to select a local image that will then be displayed on the page. As someone who is new to web development, I did a lot of research and found some helpful information on StackOverflow. I t ...

htmlimageangulartypescriptfilereader

Apply a specific image layout once the drop event occurs

I have a container with 5 image pieces that need to be dropped into another container to complete the image. Once an image is dropped, I want to apply the style "position:absolute" so that it sticks to the previous image in that container. Although I have ...

javascriptjquerycss

Show the res.send() method from express.js without replacing the existing html content

Currently, I am in the process of developing a calculator application using express.js. The app needs to handle get requests for an HTML file and post requests that capture user input and provide the response accurately. My challenge lies in showcasing the ...

javascripthtmlnode.jsexpress

The image is exceeding the boundaries of its parent element, even though a height has been specified

I need assistance with aligning an image inside a div that should take the height of its parent div, specifically the .hero class. Despite setting the image's height to 100%, it still extends beyond the parent div and doesn't adhere to the specif ...

css

What exactly is the mechanism behind how the text-overflow property's fade value operates?

I am struggling to add a one line description to each flex-child using the fade() value, but it seems to not be working as expected. .flex-container { display: flex; flex-wrap: wrap; justify-content: center; flex-direction: row; } .flex-child { ...

htmlcssflexboxfade

I would like to modify the text color of a disabled input field

I need to adjust the font color of V1, which is a disabled input field. I want to make it darker specifically for Chrome. Any suggestions on how I can achieve this? Here's my HTML code: <mat-form-field appearance="outline" fxFlex=" ...

javascripthtmlcssangulartypescript

Hide panel when button is clicked - bootstrap

Is it possible to make a panel collapse by clicking a regular bootstrap button? Below is the code snippet: <div class="panel panel-primary" style="border-color: #464646;"> <div class="panel-heading" style="border-color: #BBBBBB; height: 35px; ...

javascripthtmltwitter-bootstrapangular

Switch the appearance between two elements

In my HTML table, I have different levels of content - from main "contents" to nested "sub-contents" and even deeper "sub-sub-content". My goal is to hide all sub-content within the content cell that I click on. <table> <tr class=' ...

javascriptjqueryhtml

Step-by-step guide to dynamically updating array indexes using jQuery and HTML input fields

const list = []; function updateIndex(index) { list.splice(index, 1); console.log(list); var html = ""; html += "<ul id = 'del'>"; for (var i = 0; i < list.length; i++) { html += "<li>" + list[i] + " <button oncl ...

htmljquery

Learn the easy steps to position an image to the right using FreeMarker

I'm attempting to align the final image on the right side of the page in order to achieve a symmetrical look. The code I have been using in FTL is as follows, but it consistently ends up next to the middle section: <table class="h ...

htmlcssfreemarker

What are some ways to connect my CSS styles without encountering a MIME error?

Working on a Nodejs - Express - Vanillajs project, I encountered an issue when testing my routes. The index page failed to load CSS, displaying the following error message: Refused to apply style from 'http://localhost:3000/public/css/bootstrap.min. ...

javascripthtmlcssnode.jsexpress

After processing PHP code, display the page to the user immediately

When a user is on index.php: <form align="center" action="send.php" method="post"> address:<input type="text" name="address"/><br> <input id="submit" type="submit" name="submit" value=""> </form> I want to create a f ...

phphtml