Applying a translucent layer of color to a jpeg image to create a subtle background effect

I am attempting to create a semi-transparent, solid background color on top of an <img> tag, while still showing the original image underneath at the same ratio and size. Below is a snippet of the code I am working with (let me know if you need more information - the JS and CSS are inline and jQuery 3.6.0 is being used):

<div class="home-screen">
  <img class="background" alt="Background Image" src="./assets/images/Desktop_Pictures/Catalina-min.jpg" />
</div>

div.home-screen {
  height: 100%;
  overflow: hidden;
}

div.home-screen img.background {
  top: -50%;
  margin-left: 0;
  transform: translateX(0);
  width: 100%;
  position: fixed;
}

var isLaunchpadOpen = false;

function openLaunchpad() {
  if (isLaunchpadOpen == false) {
    $("div.home-screen")
        .css("background-color", "rgb(211, 211, 211)")
        .css("background-origin", "content-box")
        .css("top", 0)
        .css("position", "fixed");

    $("div.home-screen img.background")
        .css("background-blend-mode", "multiply")
        .css("filter", "opacity(50%)");

    isLaunchpadOpen = true;
  } else if (isLaunchpadOpen == true) {
    $("div.home-screen img.background")
        .css("background-color", "none")
        .css("filter", "opacity(100%)")
        .css("background-blend-mode", "normal");

    isLaunchpadOpen = false;
  }
}

Please note that this code excerpt is specifically related to the issue I am encountering.

javascripthtmljquerycss

Answer №1

If you want to apply transparency to an image, you can utilize the CSS filter property with opacity

img {
 filter:opacity(50%);
}

To learn more about the css filter property and see examples, check out this link:

I hope this information proves helpful ;) css filter property

Answer №2

  1. To start, add position: relative; to the wrapper element of the image: 
    .home-screen { position: relative; }

  2. Next, create a pseudo-element using ::after that covers the entire wrapper: 
    .home-screen::after { display: block; content: ""; position: absolute; inset: 0;

  3. Give the pseudo-element a semi-transparent background color by specifying an rgba value.

.home-screen {
  position: relative;
}

.home-screen::after {
  content: "";
  display: block;
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 255, 0.5);
}

/* for styling purpose only */
img {
  width: 100%;
}
<div class="home-screen">
  <img class="background" alt="Background Image" src="https://www.tacoshy.de/Images/Yoshi/IMAG0735.jpg" />
</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

Angular version 1.6 with ES6, no errors in the application

Can you help me understand this? Note: I am using ui-router, and I suspect that is the issue. $stateProvider .state('login',{ url:'/', /*controller:'loginController',*/ controller: function(){aler ...

javascriptangularjsecmascript-6angular-ui-router

Having trouble locating node_modules/nan on your system?

Trying to globally install this project is proving to be a challenge as I run the command npm i -g. Followed these steps: git clone https://github.com/superflycss/cli cd cli npm i npm i -g However, encountered this result: ole@mki:~/cli$ npm i -g npm W ...

javascriptnode.jsnpm

What is the best way to combine two DIV table rows within Bootstrap 5?

Looking at the code below, there are 6 cells in 2 rows, but I want to merge cell number "2" and "5". I know this can be accomplished using CSS Table DIV, but is there a way to do it with Bootstrap? I haven't found any documentation that worked for me ...

htmlcsstwitter-bootstrapbootstrap-5bootstrap-grid

How to bind array elements in Vue.js

I am currently working with an array that contains various arrays and properties within it. My goal is to iterate through the array and generate new rows for each item in it. Here is a snippet of what I have been working on: var orderDetails = [ ...

javascriptvue.jsdata-binding

Implementing image rendering functionality in Vue.js

So here's what's going on: I developed a horror movie bucket list app for my bootcamp final project. The minimum viable product received positive feedback, and I obtained my certification. However, now that I've graduated, I want to enhance ...

javascripthtmlruby-on-railsrubyvue.js

Execute a separate function when clicking on certain buttons without interfering with the buttons' original onclick function (which has already been assigned) - JavaScript

While I am still relatively new to JavaScript and learning, I have developed a webpage with multiple buttons that trigger different functions on click events. However, I would like to additionally call another function when any of these buttons are clicked ...

javascripthtmlcssonclick

Most Effective Method for Switching CSS Style Height from "0" to "auto"

After coming across a question with no answer that suited my needs, I decided to share the solution I created. In my case, I had a hidden generated list on a page which was initially set with a CSS height of "0" and then expanded upon clicking by transit ...

javascripthtmljquerycssperformance

What is preventing BODY from respecting min-height: 100% ?

Struggling to create a basic webpage with a container that extends to the bottom? Here's what I'm aiming for: #Main should be as tall as the viewport, but able to stretch further with additional content. body should match the viewport height, y ...

htmlcssheightdocument-body

What is the reason for the absence of styles in index.html when accessing the local server?

When using node.js to open the server, I encountered an issue where the styles are not displaying. Strangely, when opening index.html directly in the browser, all the styles show up correctly. What could be causing this discrepancy? index.html <!doctyp ...

javascriptcssnode.js

Empty ng-repeat iteration despite the presence of HTML elements

After receiving a list of numbers from an API, I am using ng-repeat to display them on a web page. However, even though 10 elements are created for 10 numbers, the content is empty. Despite trying various combinations, I am unable to get the content to dis ...

htmlangularjsangularjs-ng-repeat

Error in Mongoose validation: "Please provide a value for the 'first' field and the 'last' field."

Another user has previously posted a similar question, but I'm still struggling with my MongoDB website. I am working on a project to store names using mongoose. Here is the code for my routes and models: const router = require("express").Router(); c ...

javascriptnode.jsmongodbexpressmongoose

Is it possible to determine the success or failure of an asynchronous function when the function itself already handles errors?

The architecture of my app is currently set up with functions that are scoped to specific modules, such as "Auth" for instance: async function authenticate(email) { let authenticated = false; try { if (email) { if (!validEmail(email) ...

javascript

The issue with VueEditor in Nuxt.js is that it's throwing an error

When working on my Nuxt.js project, I integrated the vue2-editor package for writing articles with HTML. Everything functions properly when I enter text and submit it, however, upon reloading the page, I encounter an error stating "document is not defined" ...

javascripthtmlvue.jsnuxt.js

Retrieve storage information when an internet connection is unavailable on React Native

One of my recent projects involves creating an application that retrieves data from a URL in the form of an array of objects and then displays this data using FlatList. Upon launching the application, the data is displayed correctly since it's retriev ...

javascriptandroidiosreactjsreact-native

retrieve index in jquery attribute (grouped)

I currently have six <div class="gallery-popup"> elements, each containing thumbnails within <a href="..."> tags. My goal is to add the attribute data-lightbox="gallery-X" to each <a> element, but with a specific identifier for each of ...

jqueryattributeslightbox

The DIV refuses to center-align

I am struggling to center a div element. I have tried using margins (margin: 0 auto) and left/right CSS attributes (left: 50%, right: 50%), but the result is not as expected. Can anyone point out where the problem might be? EDIT: The issue I'm facin ...

htmlcssalignment

What can be used instead of makeStyles in Material UI version 5?

My journey with Material UI version 5 has just begun. In the past, I would utilize makestyles to incorporate my custom theme's styles; however, it appears that this method no longer works in v.5. Instead of relying on {createMuiTheme}, I have shifted ...

javascriptreactjsmaterial-ui

The overflowing pop-up container

When I trigger a popup that dynamically generates a fixed background with a centered dialog, it works well. However, on smaller monitors like laptops, tablets, and phones, the content can overflow beyond the visible area due to its fixed container, making ...

jquerycss

Accessing and manipulating a intricate JSON structure within an Ionic 3 framework to seamlessly connect it to the user

I'm currently developing an app using Ionic 3. Within my project, I have a JSON object structured like this: { "player": { "username": "thelegend", "platform": "xbox", "stats": { "normal": { "shots ...

androidhtmljsontypescriptionic-framework

Embed the WordPress header file outside of the WordPress platform

Recently diving into the world of WordPress, I am eager to integrate the WordPress header file into my PHP file in order to display the identical header as seen on the WordPress site. I am exploring potential methods to achieve this as I work on creating ...

phphtmlcss