What can be done to address the problem of background-image opacity making text difficult to read?

I am having an issue with the background. I am aiming for something similar to what is shown in screenshot 1, but instead, I am getting the result shown in screenshot 2.

Where could the problem lie?

html,
body,
.bg-for-1 {
  height: 100%;
}

.bg-for-1 {
  background: black;
}

.bg-for-1 .first {
  position: absolute;
  opacity: 0.2;
  width: 100%;
  height: 100%;
  background-image: url(http://digitalresult.com/wp-content/uploads/2016/06/beautiful-reflection-at-lake-pier-wallpaper-32.jpeg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.bg-for-1 .first h3 {
  color: white;
  position: relative;
  text-align: center;
}
<div class="bg-for-1"><div class="first"><h3>Hello</h3></div></div>

cssbackground-imageopacity

Answer №1

To achieve a darkened effect on your image using black, one method is to add a dark overlay with a translucent gradient that does not affect the content:

Here's an example related to How to add a color overlay to a background image?, along with 2 other methods:

html,
body,
.bg-for-1 {
  height: 100%;
}

.bg-for-1 {
color:white;}

.bg-for-1 .first {
  display: flex;
  flex-flow:column;
  justify-content:center;
  align-items: center;

  width: 100%;
  height: 100%;
  background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(https://picsum.photos/id/1015/6000/4000);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.bg-for-1 .first h3 {
  color: white;
  position: relative;
  text-align: center;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="bg-for-1">
  <div class="first">
    <h1>Nice Portfolio!</h1>
    <h3>Find something for you!</h3>
    <button class="btn btn-danger mt-3">Press</button>
  </div>
</div>

<div class="second">
  <h3>Lot of amazing projects for you and your team!</h3>
  <h5>Just simply and nice projects for you and your team , check what we recomandate for you, we work fast and clear.</h5>
  <button type="button" class="btn btn-dark mt-5">Press And Check!</button>
</div>

<div>new div goes on previous</div>

Answer №2

To maintain the aspect ratio of a background image in CSS, use the property contain with background-size.

.bg-for-1 .first {
  ...
  background-image: url(http://digitalresult.com/wp-content/uploads/2016/06/beautiful-reflection-at-lake-pier-wallpaper-32.jpeg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  ...
}

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

Troubleshoot: Why is my Bootstrap 3 responsive navigation bar not functioning

When using drop down items that are longer in length, they tend to wrap down to the next level rather than overflowing. I am not well-versed in @media queries, but I've noticed that on mobile devices the dropdown collapses in the navigation menu, whil ...

csstwitter-bootstraptwitter-bootstrap-3

Attempting to implement image switching with hover effects and clickable regions

Hey there, I'm currently working on a fun little project and could use some guidance on how to achieve a specific effect. The website in question is [redacted], and you can view the code I've used so far at [redacted]. You'll find a code blo ...

javascriptjqueryhtmlcsshover

My lists are not being styled by Embedded and Internal CSS

I want the ingredients list to be styled in green, equipment list in red, and method list in blue using different CSS techniques. My external works fine for changing the color to red, but my internal styles don't seem to apply to the other lists. < ...

htmlcsshtml-lists

"Unable to get 'vertical-align middle' to function properly in a table

Can someone please review my code at http://jsfiddle.net/4Ly4B/? The vertical alignment using 'vertical-align: middle' on a 'table-cell' is not centering as expected. ...

htmlcssvertical-alignment

`Custom transitions between sections using fullpage.js`

Has anyone used the fullpage.js extension to achieve an animation similar to this one, where sections are destroyed on scroll? ...

javascriptcssvue.jswebglfullpage.js

Tips for replacing default arrow icons with 'Previous' and 'Next' buttons in a Material-UI pagination element

I've been struggling to find a solution with my code provided below. Despite multiple attempts, the issue remains unresolved. import React from "react"; import { gridPageCountSelector, gridPageSelector, gridPageSizeSelector, useGridA ...

javascriptcssreactjsmaterial-uimui-x-data-grid

Troubleshooting Issues with CSS3PIE and border-radius

Trying to implement CSS3PIE for my website to enable border-radius in IE8 (and older versions). The code works perfectly on all other browsers except IE. Below is the CSS I am using: #body_text_design{ border:2px solid black; background-color:#CCC ...

htmlcsscss3pie

What are some effective strategies for incorporating multiple Themes into an AngularJS project?

Currently, I am in the process of working on a project that involves utilizing AngularJS, UI Bootstrap, and Sass. The next step is to incorporate different themes that can be selected by the user. While I have successfully implemented the ability to apply ...

javascriptcssangularjstwitter-bootstrapsass

Saving a picture to local storage with the file input type in ReactJS

I am attempting to save an image in the browser storage once a user selects an image from their computer. <div className="add_grp_image_div margin_bottom"> <img src={img_upload} className="add_grp_image"/> <input type="file" class ...

javascripthtmlcssreactjs

Which is better for creating a gradual moving background: Javascript or CSS?

I'm attempting to discover how to create a background image that scrolls at a slower pace than the page contents. I'm currently unsure of how to achieve this effect. A great example of what I'm aiming for can be seen here Would this require ...

javascriptcss

Issue with mobile flipcard: Initial tap is unresponsive

Currently debugging the mobile version of a site built with Next.js. Encountering an issue where the first flip-card tapped on mobile refuses to flip properly. Instead, it selects the text on the opposite side of the card when tapped multiple times. The ...

cssmobiletransformnext.jstransition

How can I turn off automatic ellipsis on my IOS device?

Currently, I am working on a web application that involves displaying location descriptions retrieved from an API. The issue I am encountering is that the description is being cut off with an ellipsis after a certain number of lines when viewed on an iPhon ...

htmlcssiostypescriptionic-framework

What is the best way to position elements at the top and bottom of a container?

I'm struggling to align one of the elements in my container to the top while using flexbox. All elements are currently aligned to the bottom, but I want a specific text to be at the top of the container. jQuery(document).ready(function($) { ...

htmlcssflexbox

HTML drop-down menu malfunctioning/missing from view

I am encountering an issue where the drop-down menu is visible, but when I try to make it disappear and then hover over it again to bring it back, it does not reappear. Here is the CSS code I am using: * { margin: 0; padding: 0; } body { back ...

htmlcss

Guide for positioning buttons in front of an image using HTML and CSS

I need assistance placing buttons in specific positions above an image carousel using HTML and CSS code. Despite researching various resources, I am unable to resolve this issue. This is the HTML implementation: <!-- Image where buttons should be placed ...

htmlcssbootstrap-4

The scroll feature in JavaScript is malfunctioning

After countless hours of troubleshooting, I still can't figure out why the code snippet below is not working properly on my website at : <script> $(window).scroll(function () { if ($(window).scrollTop() > 400) { ...

javascriptjquerycssscroll

Tips for organizing a Bootstrap 4 menu overflowing with elements

I'm struggling to figure out how to organize a Bootstrap 4 menu with numerous links. Currently, when I include too many links, the navbar disregards the container and expands its width beyond the container. Here is an image for better clarification: ...

cssnavbarbootstrap-4

Knitting: exporting to HTML file while retaining formatting

Recently discovered the amazing knitr library in R, which looks great when viewed in the viewer. But unfortunately, the style gets lost when saved to an html file. Code library(knitr) library(kableExtra) some.table <- data.frame ( x = rep(1 ...

cssrknitrkablekableextra

How to center a container in HTML using Bootstrap techniques

Here is the code I have been working on: <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"/> <div class="span4 offset4 centered"> <div class="container overflow-hidden"> < ...

htmlcsstwitter-bootstrapbootstrap-4

Conceal a different CSS class if a certain CSS class is present on the page

I am currently working on organizing my page to distinguish between purchased and unsold products. For the items that have been bought, I am using the CSS class "winning_bid" within a div element. My goal is to hide another div with the class "price" if th ...

javascriptcsswordpress