Placing an image in relation to the background

I need the image to always be perfectly centered at the bottom of the blue background, regardless of window size changes. It should resemble this example: https://i.sstatic.net/FoX4D.jpg

One workaround could be to use top:37v;, although this method can cause the image to lose its positioning relative to the background when the window height is adjusted.

.background{
            background-image: url("https://i.imgur.com/5Y5F5fF.png");
            background-repeat: no-repeat;
            background-size: cover;
            background-position: 0 100%;
            height: 50vh;
        }
        header img{
            position: relative;
            height: 100px;
            /*!*top: 37vh;*! Don't want to use this as resizing will effect its position relative to background*/
        }
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
            <header>
                <div class="container-fluid d-flex justify-content-center background">
                    <img src="https://i.imgur.com/3dzn4KM.png" alt="phone">
                </div>
        
            </header>

htmlcssbootstrap-4

Answer №1

Include these two new lines in the style:

header img{
     position: relative;
     height: 100px;
     top:50%;
     margin-top:-50px;
 }

Implementing this should make a difference.

Answer №2

To achieve the desired effect, you can utilize a combination of position: relative and absolute in your CSS like this:

.background {
  background-image: url("https://i.imgur.com/5Y5F5fF.png");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 0 100%;
  height: 50vh;
  position: relative;
}

header img {
  position: absolute;
  height: 100px;
  bottom: -50px;
  /*!*top: 37vh;*! Avoid using top as resizing may affect its position relative to background*/
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<header>
  <div class="container-fluid d-flex justify-content-center background">
    <img src="https://i.imgur.com/3dzn4KM.png" alt="phone">
  </div>

</header>

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

Looking for a way to scroll images without relying on the marquee tag? Whether you prefer using JavaScript, jQuery,

<marquee> <div class="client"> <img src="images/c1.png"/> </div> <div class="client"> <img src="images/c2.png"/> </div> <div class="client"> ...

javascriptjqueryhtmlcss

Repetitive outcomes are observed when iterating through elements with Selenium in Python

I'm currently facing a puzzling issue that has me stumped. My HTML contains a ul list with multiple li items, each of which includes elements I need to extract using Selenium in Python. The structure of the website is as follows: <ul id="results"& ...

pythonhtmlselenium

What could be causing the lack of functionality for my button click in my JavaScript and HTML setup?

Currently, I am attempting to implement a functionality where I have two buttons at the top of my page. One button displays "French" by default, and when I click on the "English" button, it should replace the text with "French" using show and hide methods. ...

javascripthtmlcssbuttonhtml-table

Create a grid layout with Angular Material by utilizing the *ngFor directive

I've encountered a situation where I need to manually insert each column in my component data. However, I would prefer to dynamically generate them similar to the example provided at the bottom of the page. <div> <table mat-table [dataSour ...

htmlangularfrontendngfor

Concealing the pagination buttons for next and previous in Material-UI TablePagination

Is there a way to remove the next and prev buttons in the TablePagination component without affecting the position of the "Showing ..." text? Should I handle this through CSS styling or by configuring the component settings? https://i.sstatic.net/7EkKd.pn ...

cssreactjsmaterial-ui

AngularJS Multiple Select fails to display preselected options

This morning, I dedicated a significant amount of time to finding a solution for assigning multiple values to an entity on my form. The scenario is as follows: I have an Entity named QualityData that can have various MechanismIdentifiers. After brainstor ...

angularjshtml

CKEditor displays the return value of an object as `[object Object]

After enabling CKEditor for my textarea, I have encountered an issue where instead of displaying the typed text, CKEditor returns [object Object]. Can anyone assist me in troubleshooting this problem? I appreciate any guidance provided. I have utilized th ...

javascriptphphtmlajaxckeditor

When inserting the HTML of a webpage into an iframe, the displayed content may vary slightly from the original page

I am facing an issue with my webpage where I extract the html, transmit it via websockets using socket.io to another page containing an empty iframe, and then inject the html dynamically into the iframe. My code for injecting the html looks like this: fr ...

jquerycssdebuggingnode.jsiframe

Enhancing dynamic text boxes with jQuery by incorporating additional information

I've recently developed an interactive app that dynamically creates tables based on user input. The app includes a feature where you can specify the number of tables to generate and track the total count of tables added. Currently, I'm exploring ...

jqueryhtmlcss

Update JSON data in ng-blur event using AngularJS

Could you offer some guidance on how to push the content from a text box into JSON when I click outside of the box? Below is the code for my text box: <input type="text" name="treatmentCost" class="form-control" ng-model="addTemplate" /> And here i ...

javascriptjsonangularjshtml

Prevent the clustering of advertisements using jQuery

Check out my code in action here! jQuery(document).ready(function(){ var insertionTemplate = jQuery(".hiddenAdBox").eq(0).html(), insertionTarget = jQuery('ul'), insertionTargetChildren = insertionTarget.find('li'), ...

javascriptjqueryhtmlcssads

Adjust Bootstrap column alignment to left side

Take a look at this full page demo or view it with editor here. The placement of .col-sm-6 .tasks-panel shifts to the right when the previous element .col-sm-6 is not too long, but moves to the left when the previous element is lengthy (try clicking on Ad ...

htmlcsstwitter-bootstraptwitter-bootstrap-3

The button effortlessly transforms into a sleek email submission form

I have a button that is already styled with basic CSS properties for active and hover states. I would like to add functionality so that when the "Join the Loop" button is clicked, it transforms into a simple email form similar to the one found at Apologie ...

javascriptjqueryhtmlcss

A guide on verifying a phone number using just one character

I am looking to validate a phone number with only one character being allowed. For example, the format should be XXX-XXXXXXX where "-" is the only allowed character. Below is my validation function: function validatePhoneNumber() { if(addform.staff_m ...

javascripthtmlcss

Tips for managing a series of images in a line within a bootstrap form

Can someone help me troubleshoot my bootstrap row handling? Here is my code: <div class="form-group col-md-6"> <?php if($saved_image != ''): ?> <div style="width:100px; height:100px"> <img class="i ...

phpjqueryhtmltwitter-bootstrapbootstrap-4

Is it feasible to interpret an HTML document and construct a DOM tree in Java programming language?

Is it feasible to parse an HTML document as a string or from a file and build a DOM tree using specific tools that allow developers to navigate through the tree via an API? Here is an example: DomRoot = parse("myhtml.html"); for (tags : DomRoot) { } Pl ...

javahtmldomparsinghtml-content-extraction

Is there a way to execute Javascript in Django without revealing static files?

When setting up payments on my Django site using Stripe, I realized that the .js file is visible under Sources in the developer tools when inspecting elements on any browser. This presents a potential security risk as anyone can access this file. How can ...

javascripthtmldjangosecuritystatic

Tips for positioning the title of a card in Bootstrap-Vue

I'm currently working with the <b-card> component from bootstrap-vue and encountering an issue where I am unable to center align the title property. Does anyone have a solution for this problem? Below you can find the structure of my card, which ...

htmlvue.jsbootstrap-4bootstrap-vue

Ensuring consistent column height in HTML Tables

Hey there, I'm just starting out with CSS and I have a question about table design. I have three separate tables below and I want to ensure that all the columns in each table are of equal height. Is there an easy way to achieve this? Any suggestions o ...

htmlcss

Fluidity in CSS Video

I'm currently working on developing a dynamic video display component for my personal portfolio website. The main concept involves showcasing a mobile application video placed on top of a phone mockup within a designated container. My challenge lies ...

htmlcss