Ways to achieve a darker background with rgba(0,0,0,0.5)

Hey there, if this isn't the right place to post my query, could someone guide me on where to do so?

TL;DR = I need to darken the background of my showcase image!

I'm working on a website as part of an online course project to practice new skills, and this will serve as my template to add more elements in the future.

I had successfully achieved a darker background previously by using a background image and applying rgba(0,0,0,0.5) to a class in my CSS. However, after redoing it now, I'm unable to replicate the effect.

Every attempt I make to darken the background fails - whether through before or after properties or modifying a separate div element with the desired rgba values.

If you'd like to check out the background image, here's the link:

You can also view the code on JSFiddle here: https://jsfiddle.net/Nuno11/Luhmernp/1/

Many thanks all, Nuno

htmlcss

Answer №1

If you're looking to add a stylish touch to your website, consider this CSS trick:

 background: linear-gradient(rgba(0,0,0,.5), rgba(0,0,0,.5)),
    url('https://i.postimg.cc/kGV5GDy9/gray-metal-cubes-decorative-1005644.jpg');

Check it out on JsFiddle: https://jsfiddle.net/hansfelix50/9hw2o5kp/

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

The div background image in Vue.js is displaying a 404 not found error

I've encountered an issue while trying to set a background for a div. Strangely, when using the same relative path with an img tag everything works fine, but as soon as I try to achieve the same result with a div, I receive a 404 error. This img tag ...

htmlcssvue.js

How come I can click on both radio buttons simultaneously?

How come I can select both radio buttons simultaneously? <form #form="ngForm"> {{ poll.counter1 }} votes <input type="radio" id="{{ poll.choice1 }}" value="{{ poll.choice1 }}" (click)="onChoice1(form)">{{ poll.choice1 }} <br> ...

htmlangular

What are some ways to display multiple divs within a single popup window?

I am attempting to create the following layout: Here is what I have been able to achieve: In the second picture, the divs are shown separately. My goal is to display the incoming data in a single popup like in the first picture, but I am having trouble a ...

javascripthtmlcssreactjs

Having trouble with Tailwind CSS not functioning correctly once the font is imported?

I am currently working on a next.js project and utilizing tailwind for styling. I have noticed an odd behavior when importing a custom font into my globals.css file. page.jsx "use client"; import React from "react"; const page = () = ...

cssnext.jsbackgroundtailwind-css

Ways to constrain checkbox choices to only one within an HTML file as the checklist with the checkboxes is being created by JavaScript

I am working on developing an HTML dialogue box to serve as a settings page for my program. Within this settings page, users can create a list of salespeople that can be later selected from a drop-down menu. My current objective is to incorporate a checkbo ...

javascriptjqueryhtml

Issue with Ionic Grid: Row not occupying entire width of the container

Currently, I am working on creating a straightforward grid consisting of one row and seven columns. Each column holds a div with a single letter of text inside. My intention is for these columns to evenly space out across the page by default, but unfortu ...

htmlcssionic-framework

Increase and decrease a counter in Javascript by clicking on two separate image tags, with increments and decrements between 1 and 10

Hello! I really appreciate your help. I am currently facing the following issue: <div id="thumb1"> <img class="img-responsive" id="prova" src="img/thumb-up-dark.png" alt=""> <div id="pinline">0</div> ...

javascriptjqueryhtmlcsscounter

javascript, issues with floating and displaying elements

I am currently working on creating a JavaScript menu that has a click function to smoothly slide up and down. Although the JavaScript code appears to be functioning correctly, it seems that there is some interference with the CSS. Despite attempting vario ...

javascriptjquerycss

Looking to generate an HTML table using JavaScript?

Similar Question: Create HTML table from a Javascript array I have received an array that looks like this var univArray = new Array( {name: "Stanford University", nick: "Stanford", ownership: "private", sys: "n/a", SATh: 1550, SATl: 1360, tui ...

javascripthtml

arranging <li> elements in alphabetical order

I'm looking for a way to alphabetically sort an unordered list while still keeping the outer html intact. My current method sorts the list alphabetically, but it only reorganizes the inner html of the list elements and not the entire element itself. T ...

javascriptjqueryhtmlxmlsorting

What is the best way to show and hide text by toggling a link instead of a button?

I need help with toggling between two different texts when a link is clicked. I know how to achieve this with a button in JQuery, but I'm not sure how to do it with a link. <h1>Queries and Responses</h1> <p>Query: What is the larges ...

javascriptjqueryhtml

Converting plain text to HTML in emails using Outlook

Trying to figure out how to maintain the formatting of plain text email while displaying as virtual plain text in C sharp, specifically when receiving in Outlook 2007 with VSTO. The current code is not preserving the original formatting, instead it changes ...

c#htmlvisual-studio-2010emailvsto

Do not decode HTML content within an iframe; instead, extract the data directly from the HTML source

To expedite execution time, we have made the decision to not display the table in the iframe as it is invisible to the client. However, we still need to update the main page table by copying its contents. The approach we are taking is that the iframe shou ...

javascripthtmlajaxiframe

Calculating the time difference in days, hours, minutes, and seconds between two UNIX timestamps

I have a special occasion coming up, and the date and time for this event are stored in a Unix timestamp format. Instead of relying on a plugin like modern.js, I am trying to figure out the time difference between today's date and the event date usin ...

javascripthtmljqueryunix-timestamp

Why is PHP unable to identify the custom-designed CSS button upon submission?

I'm having a design issue where the button on my form is not being detected. I've tried various methods like changing the class name, assigning it a name via HTML, but nothing seems to work. Here is my button: .blue_button { background: #005b66; ...

phpcss

Why won't my sticky element function properly with the position attribute set to sticky?

Hey there! I've been diving into learning all about CSS positions and have nailed down most of them. However, for some reason, the sticky position just won't cooperate and is stubbornly acting like a relative one instead. Check out my HTML snipp ...

htmlcss

Ways to define css attributes for the "before" and "after" pseudo elements in the DOM

I'm looking to modify the color of the "border-left" property from its default red to a different color within the scope, such as blue. .hello:before { content:' '; display:inline-block; width: 22px; height: 25px; ...

htmlcss

The contents within the div element exceed the width of its parent element

Hey there, I'm currently working on a Rails application to showcase some links in a horizontal layout. The links are indeed displaying horizontally without wrapping, just as intended. However, I've noticed that the containing div is wider than th ...

htmlcssruby-on-rails

Return to the initial stage of a multistep process in its simplest form following a setTimeout delay

I recently customized the stepsForm.js by Copdrops and made some modifications. Although everything works well, I'm struggling to navigate back to the initial step (first question) after submitting the form due to my limited knowledge of JavaScript. ...

javascriptjqueryhtmlcsssettimeout

D3 not distinguishing between bars with identical data even when a key function is implemented

When attempting to create a Bar chart with mouseover and mouseout events on the bars using scaleBand(), I encountered an issue. After reviewing the solution here, which explains how ordinal scale treats repeated values as the same, I added a key to the dat ...

javascripthtmld3.js