Ensure that the background image is perfectly fitted within the second background image

I am facing a challenge with two images - a frame and another image that needs to fit perfectly inside that frame. The tricky part is ensuring that the layout remains responsive.

The two images are:

https://i.sstatic.net/XWsTq.png

Here is how it should appear, even after resizing:

https://i.sstatic.net/UJPTI.png

My attempted CSS:

.brawler.shelly {
    background-image: url("/images/heroes/high/hero_icon_shelly.png");
    background-position: center center;
    background-size: 85%;
    padding-bottom: 75%;
    background-repeat: no-repeat;
}

.portrait {
    background-image: url("/images/icons/card_common.png");
    background-position: center top;
    background-size: 100%;
    padding-bottom: 75%;
    background-repeat: no-repeat;
}

.col-4.col-md-3.col-lg-2.mb-2
    .portrait
        .brawler.shelly

.col-4.col-md-3.col-lg-2.mb-2
    .portrait
        .brawler.shelly

JSfiddle link for reference:

https://jsfiddle.net/3z68kcbr/

htmlcssbootstrap-4

Answer №1

Instead of adjusting the background-size and padding-bottom on .brawler.shelly, have you considered trying different values?

For example, I found that using background-size: 77% and padding-bottom: 106% worked well for me:

.brawler.shelly {
  background-image: url("http://i.imgur.com/vuv5sdZ.png");
  background-position: center center;
  background-size: 77%;
  padding-bottom: 106%;
  background-repeat: no-repeat;
}

.portrait {
  background-image: url("http://i.imgur.com/i2IoHtw.png");
  background-position: center top;
  background-size: 100%;
  padding-bottom: 80%;
  background-repeat: no-repeat;
}
<div class="container">
  <div class="col-4 col-md-3 col-lg-2 mb-2">
    <div class="portrait">
      <div class="brawler shelly">
      </div>
    </div>
  </div>
</div>

This approach maintains responsiveness. You can try it out in this demo to see how it adjusts to different screen sizes.

I hope this solution works for you! :)

Answer №2

Give this a shot, the background-position property.

CSS

.fighter.jackie {
  background-image: url(http://i.imgur.com/vuv5sdZ.png);
    background-position: bottom;
    background-repeat: no-repeat;
    background-size: 86%;
    padding-bottom: 104%;
    position: sticky;
    vertical-align: bottom;
}

.avatar {
  background-image: url("http://i.imgur.com/i2IoHtw.png");
  background-position: center top;
  background-size: 100%;
  padding-bottom: 80%;
  background-repeat: no-repeat;
}

HTML

<div class="container">
      <div class="col-4 col-md-3 col-lg-2 mb-2">
         <div class="avatar">
            <div class="fighter jackie">
            </div>
         </div>
      </div>
</div>

Live Example

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

Updating the .css file through the graphical user interface, within the managed bean

I have created a jsf page with colorpickers to allow an administrator to modify the main theme of the site, which consists of 4 colors. I have prefixed my main colors in the css file with numbers like this: .element{ background: /*1*/#333333; } When ...

cssjsf

How can I eliminate padding from events in FullCalendar's timeGrid view?

Is there a way to remove the padding from an event when the calendar is in 'timegridview'? Users are taking advantage of the empty space created, allowing them to bypass a blocked time slot. I currently have it set so that clicking on an event d ...

htmlcssfullcalendar

Opposite of CSS Media Query in a precise manner

Can you provide the opposite of this specific CSS media query? @media only screen and (device-width:768px) To clarify, what we are looking for is everything except iPad or not iPad. Just an FYI, I have attempted the code below without success: @media n ...

htmlcssw3cmedia-queries

What is the best way to implement form fields that have varying validation patterns based on different conditions?

Currently, my focus is on developing a form that prompts the user to choose between "USA" or "International" via radio buttons. The input field for telephone numbers should then adapt its requirements based on the selected country - either a 10-digit US nu ...

javascripthtmlformsvalidation

Nested flexbox causing Firefox to malfunction in handling overflow-y

I successfully created a layout using CSS3 flexbox that spans 100% width and height. This layout functions properly on IE11, and possibly on IE10 when emulating IE11. Unfortunately, I encountered an issue with Firefox (35.0.1) where the overflow-y propert ...

cssfirefoxoverflowflexbox

Using animation in CSS is limited to only one time

My goal is to create a pulse animation that triggers when a button is clicked. This image shows the animation midway: https://i.stack.imgur.com/EHDqs.png When the button is clicked, the animation plays once and then stops. However, I want the animation to ...

htmlcss

Directing a webpage to a particular moment within that page

Is it possible to automatically redirect users to a new page at a specific time? I would like visitors to be redirected to a new site starting from 12:00AM on December 31st, without allowing them to access the current site after that time. Is there a way ...

javascriptphpjqueryhtml

"Create a React button component that, when clicked, navig

I'm currently developing a web application using React and bootstrap. I'm facing difficulties in redirecting the page to another one when applying onClick to buttons. After adding a href, I'm unable to navigate to another page. Do you think ...

javascriptreactjsbootstrap-4

Create a dynamic feature in Bootstrap4 where the navigation bar changes color as the user scrolls to different sections of the

Currently building my personal portfolio website with Bootstrap 4, I came up with a great idea: changing the navigation bar color based on different sections of the website. I attempted to achieve this using JQuery's offset and scrollTop functions, bu ...

javascripthtmljquerycssbootstrap-4

Hierarchy-based dynamic breadcrumbs incorporating different sections of the webpage

Currently in the process of developing a dynamic breadcrumb plugin with either jQuery or Javascript, however I am struggling to implement functionality that allows it to change dynamically as the page is scrolled. The goal is to have a fixed header elemen ...

javascriptjqueryhtmlcssbreadcrumbs

The input field cannot accommodate the lengthy value in the Mat Select option

When a user selects a value in my mat select, it doesn't display well in the selection box. The text wraps when the selection is opened, but once a choice is made, it gets cut off without proper spacing between the ellipses and the dropdown arrow. Th ...

htmlcssangulartypescript

Here's a guide on how to display texts underneath icons in Buttons using Material UI

Currently, this is the Button I have displayed https://i.sstatic.net/YkHp0.png I am trying to figure out how to position the Dummy Button text beneath the icon. Can someone assist me with this? Below is my code snippet: <Button className={classes.d ...

javascripthtmlreactjsmaterial-ui

What could be causing my AngularJS to malfunction on this particular website?

I am currently learning AngularJs and practicing some coding. However, I am facing an issue where the javascript code does not work when I run it on my browser (Chrome/IE). The "{{product.like}}" code is not functioning as expected. Is there any specific d ...

javascripthtmlcssangularjs

Dynamic content in CSS horizontal alignment

In a parent div with fixed width, I have dynamically created divs that I want to distribute horizontally without knowing the exact number of elements. I tried using the "Using inline-block and justified text" technique from a CSS Tricks page but it did not ...

htmlcssalignment

What is the process for importing a local widget file in Angular?

I have a unique widget named employee-widget stored in the Angular application folder as employee-widget.js. Despite following the calling method below, the widget fails to load. Method 1: <div> <h4>Attempting to load the employee widget& ...

htmlangularwidget

Set the minimum width of CSS headers <h1, h2, h3> to align next to a floated image

I am dealing with a layout issue where headlines should be displayed next to floated images if there is enough space, and drop below the images if not. Unfortunately, I do not have access to the HTML code, so I need to solve this problem purely through CSS ...

cssresponsive-designmedia-queries

Looking to style a <p> element with CSS?

In the div class index, there are two additional divs without any class or id names, along with two <p> tags. My goal is to style these two <p> tags. <div class="doubt"> <div> <p>Hello world</p> <div> ...

htmlcssstyles

Troubleshooting the Problem of Uneven Heights in Bootstrap Columns

I am facing an issue with a dropdown inside a Bootstrap grid. When I click on the dropdown, the height of the row is not increasing as expected. Can anyone guide me on how to achieve this? HTML: <div class="container"> <div class=& ...

htmlcsstwitter-bootstrapbootstrap-4dropdown

ScriptManager is not accessible in the current ASP.Net Core Razor Page context

I'm facing an issue where I have a view (such as Index.cshtml) and a page model (like Index.cshtml.cs). In the view, there's a JavaScript function that I want to call from the OnPost() method in the page model. I tried using ScriptManager for thi ...

javascriptc#htmlasp.net-corerazor-pages

A guide to replacing or customizing standard components in ReactJS

I need to modify the color property of a common component so I can use it elsewhere. const ViewAllIcon = (props) => ( <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 26 ...

javascriptcssreactjsnext.js