background image along with background color problem

Question

Hey Designers and Developers i have a problem in a project, i want to add a background color into background image , but not worked, i tried some methods here in community but still didnt worked, i added snippet for this Any solution for this ? Thanks so much who wants to helps me

.background {
  width:100%;
  min-height: 500px;
  background: url(https://images.unsplash.com/photo-1500964757637-c85e8a162699?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60), #651fff;
  background-size: cover;
  background-repeat: no-repeat;
  display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}

  <div class="background">1</div>

It is unclear as to what you want. The background colour is appearing, it is just behind the image. How do you intend for this to look? — Liam Pillay, Nov 10 '20 at 17:26
your explanation leaves way to much room for interpretation. I assume you want to have a slightly transparent colored overlay in the background. which color and transparency to you intend to use? — tacoshy, Nov 10 '20 at 17:29
Possibly, look into using the `filter:` property to get the look you want. — designmycompass, Nov 10 '20 at 17:34

tacoshy · Accepted Answer · 2020-11-10T19:50:39.797

Well you can use a background-image and a background-color at the same time. As soon as the background-image is loaded, it will be rendered above the background color. What youc an do, is to place a pseudo-div spanning the entire width and height and use a background-color on this pesudo-div. Be sure to sue a rgba value as otherwise the background will be non-transpaerent and hide the background-image.

However, ther content will be influenced at the same time, so the content has to be pushed to the front (layer-wise) with the use of z-index (e.g..content { z-index: 1; }).

To span the layer with the background-color the entire width, I gave the parent the attribute: position: relative;. Next I used for the layer position: absolute;. I gave it a top: 0; bottom: 0; left: 0; right: 0; so it will be spanned the entire parents space.

.background {
  width:100%;
  min-height: 500px;
  background: url(https://images.unsplash.com/photo-1500964757637-c85e8a162699?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60), #651fff;
  background-size: cover;
  background-repeat: no-repeat;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.layer {
  background-color: rgba(255, 0, 0, 0.6);
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

.content {
  z-index: 1;
}

<div class="background">
  <div class="layer"></div>
  <div class="content">1</div>
</div>

this helps me so much , thanks – Lightymindツ Nov 10 '20 at 19:45 — Lightymindツ, Nov 10 '20 at 19:45

score 1 · Answer 2 · answered Nov 10 '20 at 17:46

You can't mix background colours and background images like that, so here is a solution by:

a. making the colours semi-transparent

b. turning it into a linear-gradient

c. putting it before the image so it goes on top

.background {
  width: 100%;
  min-height: 500px;
  background: linear-gradient(#651fffaa,#651fffaa), url(https://images.unsplash.com/photo-1500964757637-c85e8a162699?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60);
  background-size: cover;
  background-repeat: no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

<div class="background">1</div>

Adhitya · Answer 3 · 2020-11-10T17:49:52.843

-1

I'am Using background:before for catch a Background Image.
Into Code, We will got a transparent black with white text

.background {
  position: relative;
  background: #000; /* Change Transparent Color */
  overflow: hidden;
}
.background h1 {
padding: 50px;
position: relative;
z-index: 2;
color: #fff;
}

.background:before {
content: ' ';
display: block;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 1; /* Must z-Index 1 */
opacity: 0.6; /* Set Opacity for Background Transparent */ 
background-image: url('https://images.unsplash.com/photo-1500964757637-c85e8a162699?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60');
background-repeat: no-repeat;
background-position: 50% 0;
background-size: cover;
}

  <div class="background"><h1>1. I'am Only Try</h1></div>

edited Nov 10 '20 at 17:49

answered Nov 10 '20 at 17:43

Adhitya

652
1
3
17

opacity doenst add transparency. for transparency you have other values like transparency or integrated into RGBa. Opacity can cause a variety of other issues as it is rendered last. Means if you try to have a link or button inside the text, it wont be clickable because the opacity will prevent it. – tacoshy Nov 10 '20 at 17:49
Depending on what it's used for, if it's a click action, I still have other code. @tacoshy – Adhitya Nov 10 '20 at 17:55
but that is exactly the thing. You use the wrong tools. If somebody wants to sue links or buttons you need to fix that with more code. Simply use the right method as transparency or RGBa instead of opacity. Answers should always work not only in evry specific cases. – tacoshy Nov 10 '20 at 17:56

background image along with background color problem

3 Answers3