Is it possible to highlight only a specific color on the div background?

I'm trying to create a layout similar to this: https://i.sstatic.net/dZ1ka.png I've managed to get most of it working, but I'm struggling with the yellow rectangle that spans the background of the screen. Currently, it looks like this: https://i.sstatic.net/6Wr2G.png

The issue is that the rectangles are not the same height due to the images on the left and right having different heights. While I could hardcode a fixed value for the rectangle height, I'd prefer a responsive solution like 'height: 80%' in this case.

I attempted using flexbox to make the divs containing the rectangle and image fill up the remainder of the parent div, but it only made the problem worse.

<div class="justify-content-center row row-cols-4" style="display: flex;">
  <div class="col" style="padding: 0px; align-self: flex-end;">
    <div style="position: relative;">
      <img src="https://cdn.contrastly.com/wp-content/themes/contrastly-v9/images/anthropics-portraitpro.png" style="width: 70%;"></img>
      <div style="background-color: rgb(253, 221, 57); height: 80%; width: 100%; z-index: -1; position: absolute; bottom: 0px;">
      </div>
    </div>
    <div style="align-self: flex-end;">
      <h3 style="font-weight: 700; font-size: calc(12px + 0.5vw); margin-bottom: 0px;">President</h3>
      <p style="font-weight: 300; font-size: calc(12px + 0.3vw); margin-bottom: 0px;">Name Goes Here</p>
    </div>
  </div>
  <div class="col" style="padding: 0px; align-self: flex-end;">
    <div style="position: relative;">
      <img src="https://assets.grooveapps.com/images/5fff4a731d2cfa006f386042/1624073591_Professional-Headshots-Portraits-by-Jared-Wolfe-Alexandria-VA-Portrait-Studio-Testimonial-01.png" style="width: 70%;"></img>
      <div style="background-color: rgb(253, 221, 57); height: 80%; width: 100%; z-index: -1; position: absolute; bottom: 0px;">
      </div>
    </div>
    <div style="align-self: flex-end;">
      <h3 style="font-weight: 700; font-size: calc(12px + 0.5vw); margin-bottom: 0px;">Vice President</h3>
      <p style="font-weight: 300; font-size: calc(12px + 0.3vw); margin-bottom: 0px;">Name Goes Here</p>
    </div>
  </div>
</div>

htmlcssreactjs

Answer №1

To achieve the desired effect, apply a gradient to the image and adjust the size as needed

img {
  background: linear-gradient(yellow 0 0)bottom/100% 100px no-repeat;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="3c5e5353484f484e5d4c7c09120d120f">[email protected]</a>/dist/css/bootstrap.min.css">
<div class="container">
  <div class="justify-content-center row row-cols-8" style="display: flex;">
    <div class="col" style="padding: 0px; align-self: flex-end;">
      <div style="position: relative;">
        <img src="https://cdn.contrastly.com/wp-content/themes/contrastly-v9/images/anthropics-portraitpro.png" style="width: 70%;">
      </div>
      <div style="align-self: flex-end;">
        <h3 style="font-weight: 700; font-size: calc(12px + 0.5vw); margin-bottom: 0px;">President</h3>
        <p style="font-weight: 300; font-size: calc(12px + 0.3vw); margin-bottom: 0px;">Name Goes Here</p>
      </div>
    </div>
    <div class="col" style="padding: 0px; align-self: flex-end;">
      <div style="position: relative;">
        <img src="https://assets.grooveapps.com/images/5fff4a731d2cfa006f386042/1624073591_Professional-Headshots-Portraits-by-Jared-Wolfe-Alexandria-VA-Portrait-Studio-Testimonial-01.png" style="width: 70%;">
      </div>
      <div style="align-self: flex-end;">
        <h3 style="font-weight: 700; font-size: calc(12px + 0.5vw); margin-bottom: 0px;">Vice President</h3>
        <p style="font-weight: 300; font-size: calc(12px + 0.3vw); margin-bottom: 0px;">Name Goes Here</p>
      </div>
    </div>
  </div>
</div>

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

Incorporating a transparent icon onto an HTML background

I'm struggling to place a transparent white envelope icon on a green background. I don't understand why it's not working, especially when the telephone icon worked fine. Side Question.: Any recommendations for how to add something above the ...

javascripthtmlcss

What is the best way to send a function to the child component?

I need help with passing a function to a child component in React. Specifically, I have a component with a modal for confirming the deletion of an item. How can I pass a delete function to the modal so that when the "Agree" button is clicked, it triggers t ...

javascriptreactjsmaterial-ui

Is there a way to use jQuery to load a ul from a different webpage into a div?

Progress is being made as I work on making two nearly identical pages function seamlessly together. One page features an alphabet list, and when a letter is selected, the other page filters results (last names from a PHP database query) and displays them o ...

phpjqueryhtml

show error notification on the user interface using asp.net mvc

What is the best way to showcase a message on a designated div element <div asp-validation-summary="All" class="text-danger"></div> when transmitting a message from the server-side? [HttpPost] public IActionResult Signup(Signup signup) ...

htmlasp.net.netasp.net-mvc

The issue of multiple useEffect renders is triggered by the draggable columns feature in a ReactJs Antd table

I have implemented a table in ReactJs using antd. In order to make the columns draggable, I added an eventListener to th tags. I used useRef to access all the th tags: const [cols, setCols] = useState(columns); // -> columns is a static array of objects ...

javascripthtmlreactjsdrag-and-dropantd

Is there a way to prevent the text box from expanding beyond the small breakpoint?

Help! I'm trying to control the size of a Bootstrap 4 input text box. I need it to stop growing after the small breakpoint, so it doesn't expand to the full width of the screen. ...

cssbootstrap-4

Caution: An element is converting an unmanaged input to a managed input. Simple demonstration

When picking an item, a warning message pops up: Warning: The input is being changed from uncontrolled to controlled. This typically occurs when the value changes from undefined to defined, which should not happen. Choose between using a controlled or un ...

reactjsmaterial-uireact-componentcontrolled-component

Regular expressions in JavaScript to match characters that are not the first character and are

I prefer not to include the first letter of characters such as _-., but they can be used between other characters '(^[a-zA-Z0-9-_. ]*$){1,10}' ...

javascriptreactjsregex

Should front-end and back-end share Typescript data modeling through classes or interfaces?

I'm currently exploring the best approach to share the same data types between the client (React) and the server (Express + Socket.IO). Within my game, there are various rooms each storing the current status, such as: class GameRoom { players: P ...

javascriptreactjstypescriptexpress

Unable to locate a React component module that has been published

After successfully publishing a React component to NPM, I encountered an issue when trying to use it in another project - I couldn't find the module! Module not found: Can't resolve 'react-subreddit-posts' in '/Users/kyle.calica/C ...

javascriptreactjsnpmwebpack

Why does this CSS ticker only display the first four posts?

Hello, I'm interested in adding a News Ticker to my Rails application. I came across this CSS ticker: I'm facing an issue where it only displays the first four posts. I believe the problem might not be with my data retrieval using the .each loop ...

htmlcssticker

When using IE8 with pie.htc, implementing html5shiv.js causes rounded corners to disappear once more

While everything is running smoothly in most browsers, there seems to be an issue with IE8. After connecting pie.htc to address the rounded corners problem, everything seemed fine until html5 issues cropped up in IE8. To combat this, I implemented html5shi ...

htmlinternet-explorer-8rounded-cornerscss3piehtml5shiv

Before you can click on it, the dropdown menu mysteriously

After creating a header with a dropdown menu, I am facing an issue where the dropdown disappears before I can click or hover over it. Even after using transitions, the problem persists. What could be causing this? I have limited knowledge in javascript, so ...

htmlcss

Tips for sharing a React component with CSS modules that is compatible with both ES Modules and CommonJs for CSS modules integration

Some frameworks, like Gatsby version 3 and above, import CSS modules as ES modules by default: import { class1, class2 } from 'styles.modules.css' // or import * as styles from 'styles.modules.css' However, other projects, such as Crea ...

javascriptcssreactjs

Encountering a Typescript error while attempting to extract state from a History object containing an enum property

My enum structure is as follows: enum values { first, second, } Within my component, I handle the history object like this: const { push, location: { state = {} } } = useHistory(); Additionally, in the same component within a useEffect hook, I have ...

javascriptreactjstypescript

"Mastering the art of text animation: A beginner's guide

If you want to see a cool moving text animation, simply head over to this link: . The text will automatically type out and then clear just like the example below: Ever wondered how to create this kind of text animation? Any language can be used - React, A ...

htmlcssreactjsangularweb

A Guide to Configuring jQuery UI Slider with Three Distinct Colors

I'm currently implementing the UI Slider on my website. However, I would like to customize the slider with three different colors: Handle Color Previous portion of Handle Next portion of Handle I want it to look something like this: Currently, I h ...

jquerycssjquery-ui-slider

Combining Props and Navigation Routes within a Single Const Function in React Native - A Quick Guide

I am just starting out with react-native and I'm trying to figure out how to use props and navigation in a const function. Can anyone help me with that? const MyComponent = () => { return ( <View style={styles.container}> {this. ...

reactjsreact-native

What causes the difference in behavior between Firefox and Chrome when it comes to multiple column rendering and the use of overflow

Recently, I came across an interesting issue in Firefox related to lists inside a div with columns:2 set. In Firefox, when overflow:hidden is applied to the list, it stops rendering in 2 columns. However, in Chrome, the list continues to render in 2 colum ...

htmlcssgoogle-chromefirefoxcss-multicolumn-layout

Tweenmax opacity will hold at 1 for a short period of time after the page has been reloaded

After implementing TweenMax from Gsap, I created a landing page intro with a loading container containing three divs, each with a h5 element positioned in the center using absolute positioning. Initially, I used StaggerFrom {opacity 0} to staggerTo {opacit ...

javascripthtmlcssgsap