How can you adjust the opacity of a background image without affecting the text overlay?

I am trying to create a square with a background image and text on it while adjusting the opacity of the background image only.

However, I encountered an issue where setting the opacity value affects both the background image and the text. I attempted to separate the elements within the square into two sections and also experimented with changing the opacity of the background image separately before resetting the text's opacity to 1, but those solutions did not resolve the problem.

My Attempt:

<section>
  <p>TEST</p>
</section>

CSS:

section {
  height: 200px;
  width: 300px;
  background-image: url(Graphic/background.jpg);
  opacity: 0.5;
}

section p {
  color: white;
  opacity: 1;
}
htmlcssbackground-imageopacity

Answer №1

To resolve your problem, apply the following CSS:

Assign an image URL to either the `after` or `before` section and adjust the opacity accordingly. This way, the text won't be affected.

section {
  width: 200px;
  height: 200px;
  display: block;
  position: relative;
}

section:after{
  content: "";
  background: url(http://video-js.zencoder.com/oceans-clip.png);
  opacity: 0.5;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  position: absolute;
  z-index: -1;
}

section p {
  opacity: 1;
}
<body>

  <section>
    <p>TEST</p>
  </section>

</body>

View the code on Fiddle.

Answer №2

Here is a new way to try it out: Check out the demo

See the CSS code below:

section {
    height: 200px;
    width: 300px;
}
section p {
    color: white;
    position:relative;
}
section:before {
    content:url(http://www.freeimages.com/assets/182929/1829283516/blue-sunset-1446196-m.jpg);
    filter:alpha(opacity=50);
    filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0.5);
    opacity:.50;
    position: absolute;         
    z-index: -1;
}

This updated version has increased opacity, see it in action here: Updated demo

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

Incorporate External Web Page Information by Clicking a Button

Apologies if this question has already been asked, but despite my efforts to explore the available resources, I have not found a solution to my issue. I currently have an input field where users can enter their website, keyword, or industry. When they cli ...

javascriptjqueryhtmliframe

Tips for ensuring that 3 divs fill the height of their parent container

I'm facing an issue with 3 dynamic content divs inside a parent container. I want them to all have equal heights and fill the parent container. To demonstrate my problem, I've set up a simple example on jsfiddle. .parent { overflow: hidden; ...

htmlcss

PHP - Unable to successfully upload the file

Recently, I created code in php for uploading an image/file using move_upload_file() as shown below: if (isset($_POST["title"]) && isset($_POST["content"]) && isset($_POST["category"])) { //if (!isset($_POST[])) $title = ...

phphtmlimage-uploading

Kindly utilize the POST method for your request

After running the script below, I encountered an error message stating "Please use POST request". As a beginner in HTML and JavaScript, I am unsure of what is causing this issue. Can anyone provide guidance on what may be wrong? Javascript function subm ...

javascripthtml

How can I display data saved from step 2 in a multi-step form with 4 steps, when I return from step 3 to step 2?

Let's consider this scenario: Imagine the user is at step 2 and types their name into <input type="text" class="form-control input-xl" ngModel name="firstName"> They proceed to step 3 but then decide to return to step 2. The information entere ...

htmlangularjsangular

Using CSS or JavaScript to trigger events while scrolling with touch

Imagine a scenario where multiple boxes are stacked on top of each other: <div style="width: 100%; height: 100px; background-color: red"> stuff </div> By clicking or touching them, the background color can be easily changed using CSS (:hover, ...

javascriptjqueryhtmlcssevents

Shifting static information both above and below a 100vh element

At the moment, I have a stationary image in the center of my screen that moves horizontally when scrolling with the mouse. Now, I want to include a screen above and below this element, each with a height of 100vh. However, when I attempt to do so, the fixe ...

javascriptcssreactjscss-animations

The error message states: "change is not defined"

I am encountering an issue where I have 4 input boxes triggering a function on keyup using the onkeyup event. Strangely, I keep receiving an error stating that "change" (the function's name) is not defined. Despite correctly defining the function, I c ...

javascripthtmlfunctiononkeyupreferenceerror

Steps for making input stand out and display full content

One of the challenges I am facing is that some of my input fields are too small to display the entire text, and unfortunately, I cannot change their size. Is there a way to display the full content of the input when hovering without disrupting the layout? ...

htmlcss

How to bypass validation for required input in jQuery validate plugin

As an example, consider the <input name="surname" id="surname" type="text">. Sometimes I want to hide this input and make it non-required. My current workaround is to set a value such as "some value" when hiding the input, and then remove this value ...

javascriptjqueryhtmljquery-validate

Tips for expanding an input to fit the width of a div without altering the dimensions of a preceding span element

Let me explain, I have a form that includes a span and an input: <form onSubmit={e => handleSubmit(e)}> <Box className='form_box'> <span> <a href="/cd ...

htmlcssreactjsmaterial-ui

The information submitted through the form is not displaying on the console after being gathered using the post method in Express

When attempting to add products using a form on the admin page, the data (including an image file) is not being displayed in the console as expected. Instead, the following message appears: "{} POST /admin/add-product - - ms - -" Below is th ...

javascripthtmlnode.jsexpress

What are some effective strategies for keeping content from shrinking in a drawer menu?

I am currently using a tutorial from https://www.w3schools.com/howto/howto_js_sidenav.asp to create a drawer sidebar menu. However, in my scenario, I need to include a wall of text instead of <a> links. The issue I am facing is that the text expands ...

javascripthtmlcss

MAC Safari is not registering input fields

I'm experiencing a small issue with a form that has two input fields for indicating time (in the format HH:mm) that are very close together, like this: https://i.sstatic.net/u2GzN.jpg Here is the HTML code snippet: <label> <span>Hou ...

htmlcsssafari

I am experiencing difficulty locating the style.css file within my Node.js/Express application

I am currently working on a Node.js/Express app and I'm facing an issue where my browser is unable to find my style.css file, even though I am using a static file. Here is the directory structure: public -> css -> styles.css server -> serv ...

cssnode.jsexpress

Learn the best way to utilize a stylus in Vue files to interact with JavaScript variables

For instance: <script> export default { data() { return{ varinjs: 1, } } } </script> <style lang="stylus"> varincss = varinjs body if varincss == 0 ba ...

cssvue.jssasslessstylus

Updating HTML using Angular JS with a nested dictionary is a breeze

As a newcomer to AngularJS, I am facing an issue with my code. I have created a dictionary in the controller scope and populated it after an HTTP request (key, value pair). The dictionary is being created successfully and there are no errors, but the HTML ...

javascripthtmlangularjsdictionary

Growing background picture

I currently have an iPad serving as a background image. However, I desire for it to be expandable, with the possibility of it being integrated into the header, footer, and the middle section expanding as needed to fill the entire page. I am open to any a ...

htmlcss

Position the center of an Angular Material icon in the center

Seeking help to perfectly center an Angular Material icon inside a rectangular shape. Take a look at the image provided for reference. https://i.sstatic.net/oFf7Q.png The current positioning appears centered, but upon closer inspection, it seems slightly ...

cssangulartypescriptangular-materialangular8

PhP submit triggers fatal error

I am currently developing a form to add records to a database directly from the browser. However, upon submitting the form, I encountered the following error: Fatal error: Call to a member function execute() on boolean in /srv/http/career.php on line 56 ...

phphtmlmysql