Is there a way to darken the background image while keeping the text color the same?
Check out this code snippet on JSFiddle
div {
display:block;
background:url('http://placehold.it/500x500') 0 0 no-repeat;
background-color:rgba(0, 0, 0, 1);
background-size:cover;
height:500px;
width:500px
}
<div>
<h1>Hello, it's me!</h1>
</div>To achieve this effect, you can use the CSS :before pseudo-element.
div {
display: block;
background:url('http://placehold.it/500x500') 0 0 no-repeat;
background-color: rgba(0, 0, 0, 1);
background-size: cover;
height: 500px;
width: 500px;
}
div:before {
content: "";
position: absolute;
width: 100%;
height: 100%;
opacity: 0.4;
z-index: 1;
background-color: black;
}
For a live demo of this code in action, visit this link.
It's clear that adjusting the opacity of the parent element will impact the child element - in this case, the h1.
If you want to avoid affecting the child element, there are a few methods you can consider.
1) Modify the opacity using an image editor (simple and requires minimal code)
2) Utilize a pseudo element to contain the background image and apply the opacity changes there - DEMO
3) Instead of adding the background-image to the div, create another child element to hold the image - DEMO
Remember to adjust the z-index values as needed.
Just like this
<style>
Container {
Position:relative;
}
Container:before {
Content:'';
Position:absolute;
Top:0;
Left:0;
Background-color:rgba (0,0,0,.5);
Width:100%;
Height:100%;
Z-index:2;
}
Container H2 {
Position:relative;
Z-index:3;
}
</style>
Is it possible to add additional rotation to a div that already has a transform applied? For example, can I do the following: <div style="width: 200px; height: 200px; background-color: red; transform: rotateX(90deg) rotateY(10deg)" id="myDiv">< ...
I recently encountered an issue with the Multiple Dates picker for jQuery UI date picker. It seems that the developer who created it has not updated it in quite some time, resulting in pre-highlighting dates no longer functioning properly. To address this ...
I am currently in the process of developing a calendar using HTML, CSS, and JavaScript. The main purpose of this calendar is to showcase upcoming and past events. However, I am facing difficulties in ensuring that my event blocks occupy the remaining space ...
I am in need of a solution to convert a webpage into an HTML page programmatically. I have researched several websites, but the information provided only covers converting pages into PDF formats. Currently, my program involves saving a page as .html and th ...
Check out this menu I've created: http://jsbin.com/useqa4/3 The hover effect seems to be working fine, but I'm looking to hide the div #submenuSolutions when the user's cursor is not on the "Solution" item or the submenu. Is there a way to ...
Sorry for the silly question, but I've been struggling to find a solution. Spent hours scratching my head. Here is my HTML structure: <div class= 'container'> <div class="someclass"> <input>some content</in ...
I am working on some JSX code which looks like the following: <div style={Object.assign({}, styles.occupyAllScreen, styles.backgroundContainer)}> <div styles={styles.overimposingText}> <h2 styles={{color: 'white !important& ...
Hey there! I'm looking to find a style element or style elements using Selenium in Python. <div style="flex-direction: column; padding-bottom: 65px; padding-top: 0px;"> I've tried various methods such as: self.driver.find_element ...
I've already looked at similar questions, and my code seems correct based on the answers provided. It's a very simple beginner code. <html ng-app=""> <head> <title>Assignment</title> <script src=" ...
I've been struggling to design a two-column, top-aligned layout with fixed width for data that will be inserted into text in a WebView for an iPhone app. The first column needs to have a set width so the items in the second column can align perfectly. ...
I have set up a container where I want the content to scroll horizontally from left to right on mobile devices, and I would like to be able to swipe to navigate while hiding the scrollbar. You can view the implementation on this JSfiddle link Do you think ...
Is it possible to extract the content of a specific HTML tag as a string or XML format? <body> <script src="jquery.min.js"> //var test = document.getElementsByTagName("input"); //alert(test[0]); $(document).ready(function ( ...
Hello there, I'm currently facing some challenges in getting the screen below to work properly: Project progress screen I have generated the following JSON data from PHP and MYSQL. My goal is to display the project alongside user images and names whe ...
I've spent hours on this and I'm completely lost. Even though I believe my code is correct, it keeps telling me it's wrong. I don't know where to go from here. The task requires adding a style rule for the blockquote element that chan ...
Encountering an issue with the Pickadate calendar. There seems to be a problem at the bottom of the page, please refer to the attachment for more details. My challenge is that I need to display the Pickadate calendar above the input field when the field is ...
Apologies for any language errors in advance. I will do my best to explain my issue accurately: In my CSS, I have created a hidden div that is displayed none by default. When I hover over a link in the navigation bar, I change the display to block, creati ...
My challenge is to implement the Vue.js modal example in a larger size. I adjusted the "modal-container" class to be 500px wide, with 30px padding and a max-width of 80%. However, I'm facing an issue where the "modal-mask" class, containing the contai ...
I have created a static blank page containing my website's header, sidebar, and footer. However, I am trying to remove the 'style' that is being enforced by the CSS of my WordPress template on the page. Below is the code I am using: <?p ...
I've designed a custom checkbox where the actual checkbox is hidden and a label is styled to look like a checkbox. Everything works fine, however, when I add a label, it doesn't align properly. Here's the link to the fiddle: http://jsfiddle ...
How can I ensure that all page elements have a black background color when the mobile navigation is opened on the left screen, while ensuring that my sidebar and content image do not get overlaid by the black background? Here is my code: function openNav( ...