What is the best way to make my text stand out against a faded background?

After mastering the basics of web development on Codecademy, I was eager to start my own blog and create a unique website. One challenge I encountered was figuring out how to fade the background without affecting the text. Despite researching various solutions, none seemed to work for me. Check out my website here: Here is a snippet of the HTML code I am working with:

<article>
  <div class="post" style="background-image: url(http://www.planwallpaper.com/static/images/HD-Wallpapers1_FOSmVKg.jpeg)">
    <div class="product">
      <h3>The Monarch</h3>
      <p>The Monarch Bike is our original beach cruiser. It's perfect for strolling bike rides down beach promenades and small enough to stash just anywhere.</p>
      <a href="#" class="btn">Read More</a>
    </div>
  </div>
</article>

And here is a snippet of the CSS code I have tried to use:

.post {
  background-size: cover;
  background-attachment: fixed;
  height: 100%;
  position: relative;
  width: 100%;
  z-index: 1;
  background-position: center;
  opacity: 0.3;
}

Answer №1

You have the option to add the background to a pseudo-element instead, and then utilize opacity on that particular pseudo-element

.post {
  height: 100%;
  width: 100%;
  z-index: 1;
}

.background {
  position: relative;
}

.background:after {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  content: '';
  background-image: url(http://www.planwallpaper.com/static/images/HD-Wallpapers1_FOSmVKg.jpeg);
  background-size: cover;
  background-attachment: fixed;
  background-position: center;
  opacity: 0.3;
  z-index: -1;
}
<div class="post background">
  <div class="product">
    <h3>The Monarch</h3>
    <p>The Monarch Bike is our original beach cruiser. It's perfect for leisurely rides along the beach and compact enough to store easily.</p>
    <a href="#" class="btn">Read More</a>
  </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

Update PHP version by utilizing a form with varying field lengths

I am in the process of developing a feature on my website that will enable the admin to update player stats for the current season using a simple HTML form. However, I am facing some challenges in optimizing and making the script more efficient. To popula ...

The issue arises when the logout component fails to render even after the user has been authenticated. This problem resembles the one discussed in the React Router

While attempting to run the react-router docs example on the browser, I encountered an issue with the AuthButton component. The problem arises when the isAuthenticated value changes to true but the signOut button fails to display. import React from ' ...

The ng-if directive in AngularJS seems to be malfunctioning

Could someone please help me understand why my "Voted:" checkbox is not controlling the ng-if directive? Strangely enough, the "Keep HTML" checkbox is working fine. <p> <li ng-repeat="x in info"> {{x.name}} Voted: <input type="c ...

"Obtaining a three.js sprite within a Verold script - the ultimate guide

Greetings fellow users of stack overflow! I've recently been experimenting with the world editor known as verold, based on three.js. The features it offers are quite impressive, but I've encountered an issue with the scripting aspect. My curren ...

Obtain the length of a sound file in .wav format

Can anyone suggest a way to incorporate a waveform or horizontal bar on a website that displays the duration of a WAV file in seconds using HTML text? For instance, for a 60-second WAV file: I'm open to any ideas. ...

Issues with integrating VUE frontend with PHP backend and API

Apologies for any language mistakes as English is not my native tongue. I hope my message is clear enough. We are in the process of developing a user system where users, upon logging in, can perform various actions such as joining events, updating their p ...

CSS: The button appears to be slightly lower than the label

For more information, check out this GitHub link Here is the HTML code snippet: <div class="col-md-12"> <div class="col-md-2"> Processing </div> <div class="col-md-4"> <button class="btn btn-primary">Hello</ ...

Adaptive design exhibits varying appearances across various screen sizes

Currently, I am working on a responsive design WordPress site and here is the markup: <div class="contact-wrap"> <div class="contact-number">123-456-7890</div><!--.contact-number--> <div class="user-login"><a href="#"& ...

Load Bootstrap page with a random MixItUp filter applied

Experimenting with the MixItUp plugin in Bootstrap. I managed to get it working within the column structure by adding classes to the lists, but I'm struggling to make it load randomly every time the page is refreshed. Here's what I've tried ...

Editable dropdown in Angular - customize editability according to selected option

UPDATE 1: I have created the initial sample code as a foundation for proper implementation. UPDATE 2: Successfully developed a functional model. Please refer to the answers. During my research, I came across this library: This library enables the addit ...

Creating lasting placeholder text with gaps between each word

Looking to create a unique text input with static content on the right and editable text on the left https://i.stack.imgur.com/K0YfM.png Any suggestions? ...

"Unlocking the potential of Vue.js: Grabbing the object ID with a

I am encountering an issue with accessing the object ID when I click on the edit or delete buttons in my CRUD operation. The event.target is returning the values of the edit and delete buttons instead. This is what my HTML template looks like: <div ...

Horizontal scrollbar displayed by CSS Bootstrap

Experimenting with Bootstrap on a small project and encountering an issue that I can't seem to figure out. Here is the snippet of my code: nav{ background-color: lightblue; } section{ background-color: lightgreen; } <link href="http://netd ...

Is it possible to check the response headers in Express JS?

To view the incoming request headers, I typically use: req.headers. I am looking to see a comprehensive list of all headers that will be included in the response. Currently, res.headers returns undefined. I understand that I can set response headers usi ...

Troubleshooting AJAX Problems in ASP.NET and C#

I am currently working on implementing a WebMethod call in my C# code behind using AJAX. I have a Bootstrap Modal that should be displayed when a linkbutton is clicked, triggering the execution of the WebMethod through AJAX to populate a table in the modal ...

Encountering a 500 error while trying to access a different file using the .get()

My current project involves setting up basic Express routing. However, every time I try to fetch data in order to link to a new page on my website, I encounter a 500 error. The main file managing the routing is Index.js. The content of Index.js: var expr ...

Having difficulty retrieving the response from an ajax request in yii2

My GirdView contains a checkbox. I also have a button that is linked to another action controller. Here is the code snippet: <?= GridView::widget([ 'dataProvider' => $dataProvider, /*'filterModel' => $search ...

Steps to eliminate the select all checkbox from mui data grid header

Is there a way to remove the Select All checkbox that appears at the top of the checkbox data column in my table? checkboxSelection The checkboxSelection feature adds checkboxes for every row, including the Select All checkbox in the header. How can I ...

Acquire the value of ant-design Select dropdown upon hover

How can we detect the selected option in an ant-design dropdown when it is hovered? <Select defaultValue="lucy" style={{ width: 120 }} onChange={handleChange}> <Option value="jack">Jack</Option> <Option value=& ...

Tips for adjusting the font size of choices within the Material UI autocomplete component

Hey there, I'm currently working on a project using the Material Table and I'm looking to adjust the font size of the options in the Material UI Autocomplete. Any tips would be greatly appreciated! Thanks https://i.sstatic.net/ZM17w.png import R ...