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

How can one determine the most accurate box-shadow values?

I am trying to extract the precise box-shadow parameters from a CSS style rule generated by the server. My main focus is determining whether the element actually displays a visible shadow or not. There are instances where the shadow rule is set as somethi ...

javascriptcss

Steps for positioning a logo to the left and navigation to the right with HTML and CSS

Could someone assist me in aligning a logo on the left and navigation menu on the right using HTML and CSS? I envision it to look like the image displayed. I have tried various approaches to adjust my CSS styling, but nothing seems to be working as inten ...

htmlcss

Organize pictures and words side by side on both sides at the same time

I am currently facing an issue while trying to load images and quotes vertically on the left and right side of the page. The problem arises with the 3rd image and quote due to an unexpected margin in the CSS code. Despite my efforts, I have not been able t ...

htmlcss

What's the best way to add line numbers to source code on an HTML webpage after parsing?

I am currently working with AngularJS and MongoDB. In my MongoDB data, there are some text elements that contain a \n, causing each line to be displayed on a new line based on the occurrence of \n. However, I also want to add line numbers to each ...

javascripthtmlcssangularjs

Guide on adding a parent class to style all generated CSS rules in styled-components 5.3.5

When my application loads into a parent div with a specific class (for example, .my-app), is there a way to add the prefix .my-app to all classes generated by styled-components? For instance, consider a component like this: import React from 'react& ...

cssreactjsbabeljsstyled-components

Adjust color scheme of drop-down menu

Having trouble changing the background color for my drop down menu. I tried to change the color for the sub div but it's not working. Can anyone help me fix this issue? Here is the code snippet: http://jsfiddle.net/3VBQ6/4/ #nav li:hover ul.sub li { ...

javascriptjqueryhtmlcss

Webpage Text Animation

This is the visual representation of my webpage: https://i.stack.imgur.com/tYq34.png I am seeking to implement a uniform animation effect for the text "Carlos Qiano" and "Lorem Ipsum", similar to the link below: https://i.stack.imgur.com/XVnBS.jpg Note: ...

javascripthtmljquerycssanimation

Vue 3 has a known issue where scoped styles do not get applied correctly within the content of a <slot> element

Utilizing the Oruga and Storybook libraries for creating Vue 3 components. The code in the Vue file looks like this: <template> <o-radio v-bind="$props" v-model="model"> <slot /> </o-radio> </template ...

javascriptcssvue.jsvuejs3

How to center text both horizontally and vertically in HTML

I am struggling with centering a background image along with a 1-line text vertically and horizontally inside a div. Although I have successfully centered the image, the text remains misaligned. I attempted using vertical-align: middle without success. Be ...

csshtml

Tips on how to stop label text from wrapping onto a new line and only show one line

Working with asp.net mvc, I am encountering an issue where the label text is displaying on two lines instead of one. The expected behavior is for it to appear on a single line. I need the label text to display without wrapping to a new line. For example, ...

htmljquerycssasp.net-mvcasp.net-mvc-4

Tips for creating consistent spacing between elements using Tailwind CSS version 3

I am currently utilizing Tailwind CSS in conjunction with next.js for my project. I have a total of 8 images, each varying in size, and my goal is to display 4 images per row on medium and large devices, while displaying 2 images per row on small devices. ...

cssreactjsnext.jstailwind-csstailwind-3

flexbox with equal width and height

I have two questions regarding flexboxes but I am unable to find the answers. How can I create 4 boxes with equal width and height, without using the viewport? For instance, if I create a box with 50% width, I want the height to be equal to the width. ...

htmlcss

What is the process for inserting a scroll bar within a div element?

   I have recently created a webpage using some divs, along with a bit of CSS and JavaScript. I am struggling to figure out how to add a scrollbar to one of my divs. The code is not overly complex, as it includes both CSS and JavaScript. <html> & ...

javascriptjqueryhtmlcss

Tips for ending a page prematurely

I am currently facing an issue with hosting images on my webpage where the bottom of the images are uneven, creating a messy look at the bottom of the page. Normally I would attempt to align them in a perfect square layout, but since the page needs to be ...

htmlcssimage

Pressing the icon will trigger a top-sliding dropdown mobile menu to appear

How can I ensure my mobile dropdown menu slides in from the top when the user clicks the "header-downbar-menu" icon and slides out to the top when clicked again? Currently, the button only shows the menu but I am struggling with writing the JavaScript for ...

javascripthtmlcssdropdown

The correct method for including a CSS file in a Vue.js application

How can external CSS files be properly added in a Vue.js Application? I have come across multiple methods for adding CSS files in a Vue.js Application. One suggestion is to use the following code: <link rel="stylesheet" type="text/css" href="/static/b ...

javascriptcssvue.js

Updating SVG colors using VueJS

I'm struggling to change the color of an existing static SVG image. Here's the code I have: <img class="icon-shop" src="@/assets/icon-shop.svg"/> <style> .icon-shop { width: 32px; fill: orange; stroke: oran ...

cssvue.jssvg

Tips for customizing CSS in cakePHP 1.3

Hey there, I've come across an issue regarding the CSS for my search plugin. It seems that some of the CSS rules I set in /plugin/searchable/webroot/css/searchable_style are not being applied. My assumption is that it's being overridden by the de ...

csscakephpcakephp-1.3

Is there a way to send the image object to the onclick function as it is being assigned?

I apologize if my question is a bit unclear, as I am currently teaching myself how to use javascript. I am working on generating image thumbnails dynamically and would like the ability for users to enlarge the image when they click on the thumbnails. The p ...

javascripthtmlcss

The table printing settings are not compatible with portrait and landscape orientations

I am facing an issue with printing a table on my webpage. When I try to print using Control+P or window.print();, the width of the table does not adjust properly for portrait or landscape orientation. The table ends up exceeding the paper width. How can I ...

htmlcsshtml-tablemedia-queries