What is the best way to affix this image to the bottom of the div?

I need the smaller, grey image to stay at the bottom of its container (meadow image) even when resizing the window. I've tried using auto values on attributes but it seems to be related to positioning which I can't quite figure out. Any ideas? Thank you so much!

Codepen: http://codepen.io/anon/pen/zoEYgP

.images {
  background: url("http://kingofwallpapers.com/meadow/meadow-008.jpg");
  background-size: cover;
  height: 780px;
  /*position: relative;*/

}
.smaller {
  text-align: center;
}
.smaller img {
  position: relative;
  bottom: -280px;
}
@media screen and(max-width: 768px) {
  .images {
    height: auto;
    /*position: relative;*/
  }
  .smaller img {
    width: 80%;
    /*height: auto;*/
    /*margin-bottom: 0px;*/
  }
}
<section class="images">
  <div class="smaller">
    <img src="https://placeholdit.imgix.net/~text?txtsize=38&txt=400%C3%97500&w=400&h=500" alt="">
  </div>
</section>

css

Answer №1

Check out the codepen link where I have adjusted the CSS for a smaller image with absolute positioning.

.images {
  background: url("http://kingofwallpapers.com/meadow/meadow-008.jpg");
  background-size: cover;
  height: 768px;
  /*height: 100vh;*/
  min-height: 500px;
  max-width: 100%;
  position: relative;
}


.smaller img {
    position: absolute;
    bottom: 0;
    left: 0;
    max-width: 50%;
    margin: 0 auto;
    right: 0;
}

@media screen and(max-width: 768px) {
  .images {
    height: 100vh;
    //position: relative;
  }
  .smaller img {
    //width: 80%;
    //height: auto;
    //margin-bottom: 0px;
  }
}
<section class="images">
  <div class="smaller">
    <img src="https://placeholdit.imgix.net/~text?txtsize=38&txt=400%C3%97500&w=400&h=500" alt="">
  </div>
</section>

<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis nulla laboriosam laborum sapiente sit voluptate voluptatum, velit eius quam minus natus incidunt omnis quidem cupiditate, maxime, ex reprehenderit minima enim!</p>

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

Creating a slider directly under the header in an Ionic 3 application without any gaps

I need help with positioning a slider below the header within the ion-content. The issue is that I am experiencing unwanted white space on the top, left, and right sides, as depicted in the image. https://i.sstatic.net/HH1c6.jpg This is my HTML code for ...

htmlcssionic-framework

How do I make a div's height equal to 100% of the height of its parent

I am trying to make a button stick to the bottom of a card no matter how much content is on it. I used the Bootstrap class mt-auto, which worked well. However, when I set the height of all divs to 100%, the row in the card body overflows from the lg breakp ...

htmlcssstylesheightbootstrap-5

What is the best way to align an element on the right side of the screen?

I am having some trouble positioning a CSS element to the right side of the header. I attempted using the following code: position: Absolute; top: 20px; right 0px; This method works, however, when adjusting the browser window, the text also moves. I ha ...

htmlcss

Styling the Web with CSS in Django 2.0

I have a teammate who wrote some HTML code with CSS/Bootstrap. Now I am trying to render it in Django, but it's not displaying properly. It works fine as an HTML file, though. <meta charset="utf-8"> <meta name="viewport" content="width=devic ...

cssdjangobootstrap-4

Is there a way to create a table with "cells that can be controlled individually" similar to the image provided using HTML and CSS?

I have been searching online for solutions on how to create a table similar to the one in this image, but so far I haven't had much luck. I attempted to use colspan, however, it didn't yield the results I was hoping for. Does anyone have any alt ...

htmlcss

How to make a Bootstrap column fill the remaining height

Although my content is short, I want the page to continue on with more information down the screen. <div style="background: #e0e0e0;"> <main role="main" class="container"> <div class="row" style="background: #f9f9f9;"> <d ...

htmlcsstwitter-bootstrapbootstrap-4

Dynamic graphic with integrated navigation menu

I'm looking to achieve a similar design concept like the one on this website: The navigation bar should remain fixed at the bottom of the window until you start scrolling. I am unsure if this can be done using just CSS, but I have made some progress ...

jqueryhtmlcss

Selecting sibling elements based on their position in the hierarchy can be achieved using a CSS selector that targets

In the scenario where there is an HTML element with multiple siblings: <div id=parent> <div></div> <div></div> <div></div> ... <div id=fourthToLast></div> ...

csssass

Icon alignment to wrapped text width has been successfully achieved with the implementation of Flexbox onto a single

I am facing an issue with text wrapping within a flexbox. I want the width of the flex item to always match the length of the wrapped text so that an icon placed next to the item stays adjacent to the text. However, due to text wrapping, there is a gap bet ...

htmlcssflexbox

"Rearrange elements on a webpage using CSS and HTML to position one

Can we utilize CSS/HTML to visually move a full width element that is positioned below another one so that it appears above without altering the markup order? <div id="first">first</div> <div id="second">second</div> #first {…} ...

htmlcss

What is the best way to pinpoint the initial and final elements in a row of variable entries within a grid?

These are the tools currently in use: Vuejs Jquery Packery with masonry layout The project involves creating a page that pulls content from JSON and fills the homepage with posts, products, and pages in a single loop. Each object in the loop is arranged ...

javascriptjqueryhtmlcssvue.js

Outlook fails to recognize table cell widths when there is an image present

Although this question has been asked previously, the solutions provided did not solve my issue. I am trying to set the width of the <td> element to 70%, but when I insert an image it is affecting the widths of received emails in Outlook (I use MS O ...

htmlcsshtml-tableoutlookhtml-email

Rearrange the bootstrap col to be placed at the bottom without using absolute

I currently have three blocks structured like this: <div class="col-sm-6 col-xs-12 left-top"></div> <div class="col-sm-6 col-xs-12 right-top"> <div class="col-sm-6 col-xs-12 left-bottom"></div> ...

htmlcsstwitter-bootstraptwitter-bootstrap-3

Is there a way to direct the user's cursor to a specific location on the page when they hover over an image?

I'm interested in creating a script that can manipulate the user's mouse position when they hover over an image. For example, if I hover over the image, I want the mouse to be dragged lower towards a specific text. Is there a method to achieve th ...

javascriptjqueryhtmlcss

Issue with CSS transition bug in Offcanvas on Android version 4.1.x

I am attempting to develop an offcanvas menu similar to the one featured in the Google Plus app. Currently, my code functions properly on most devices (android/ios) and browsers (ff, chrome, IE8+). The only issue I am encountering is on a Samsung Galaxy ...

htmlcssmenucss-transitions

Center alignment of all the flex items on the display

In order to achieve my desired effect, I have red elements that must be displayed as flex and cannot be changed. I want to place text above the middle of these red elements. The expected result is shown in this image: https://i.sstatic.net/w3cQS.png Curr ...

htmlcssflexbox

Showing content in a way that spaces out below the text

Could someone assist me with a CSS problem I'm having? I understand CSS, but debugging is not my strong suit. When I use display: inline-block for both my Academic Information and Personal Information, I'm getting extra white space below (above " ...

htmlcss

I'm a bit torn between using images for text or utilizing Google Fonts

I am looking to use a unique font that is not commonly used. This font is available in Google Fonts as well as in Photoshop. I am unsure about which method to choose because both options involve some loading time. Although using images for text is not idea ...

htmlcssfonts

Using requestAnimationFrame to animate several independent objects

I'm currently working on animating two different objects: a square and a circle. Each object has its own button to initiate the animation, which involves moving the object from left to right. However, I've run into an issue where clicking on one ...

javascriptjqueryhtmlcssrequestanimationframe

When incorporating web animation into an SVG graphic, the animation may malfunction if used as a background

Recently, I created an SVG-based loading indicator using an online tool. However, every time a page with this loading indicator loads, Chrome displays a warning about SMIL animations being deprecated. To address this issue, I decided to explore replacing t ...

javascriptcsssvgbackground-imageweb-animations