CODEWITHSUNDEEP
htmlcss
Azeem Haider
Azeem Haider

Reputation: 1513

Set background image and color in css

I'm going to set background image and background color both this is working fine but the problem is that when I write some text on a div the background automatically apply on the text here is my code please review it.

#canvas-preview {
  width: 200px;
  border: 1px solid #000;
  box-sizing: border-box;
  position: relative;
  background-image: url('path/to/image.png');
}
#canvas-preview::before {
  background-color: green;
  content: '';
  display: block;
  height: 100%;
  position: absolute;
  width: 100%;
}
#custom-canvas {
  margin: 10px;
  color: #fff;
}
<div id="canvas-preview">
  <div id="custom-canvas">There is some text</div>
</div>

I want to set text color white. What's the problem with this code.

UPDATE

I need both background-image and background-color.
For example green color over the image with opacity: 0.37 Sorry, I forgot the placing opacity property in css

  #canvas-preview::before {
  background-color: green;
  opacity: 0.37;   /* editing in code */
  content: '';
  display: block;
  height: 100%;
  position: absolute;
  width: 100%;
}

I need both things not one.

Upvotes: 0

Views: 1633

Answers (4)

vivekkupadhyay
vivekkupadhyay

Reputation: 2891

Add z-index:-1; to your pseudo element #canvas-preview::before to make visible the Text

As it comes over the #canvas-preview as a layer and works as fallback in case your bg-image won't load.

So to make visible the text-layer over that you need to lower the z-index of your pseudo element.

Updated Code Snippet

#canvas-preview {
  width: 200px;
  border: 1px solid #000000;
  box-sizing: border-box;
  position: relative;
  background-image: url(https://hd.unsplash.com/photo-1463950922781-0e6d07cbd146);
}
#canvas-preview::before {
  background-color: rgba(0, 128, 0, 0.5);
  content: '';
  display: block;
  height: 100%;
  position: absolute;
  width: 100%;
  z-index: 1;
}
#custom-canvas {
  margin: 10px;
  color: #ffffff;
  z-index: 2;
  position: relative;
}
<div id="canvas-preview">
  <div id="custom-canvas">There is some text</div>
</div>

Instead of adding opacity I would suggest to use alpha value of the bg-color(rgba) in your pseudo element which will be a better solution.

Upvotes: 4

bala
bala

Reputation: 177

The z-index property in CSS controls the vertical stacking order of elements that overlap. As in, which one appears as if it is physically closer to you. z-index only effects elements that have a position value other than static (the default).

Reference :

Your code should change like this:

#canvas-preview::before{
 background-color:green;
 content: '';
 display: block;
 height: 100%;
 position: absolute;
 width: 100%;
 z-index:-1;
}
#custom-canvas{
 margin:10px;
 color:#fff;
}

This may be helpful.

Upvotes: 0

JeetDaloneboy
JeetDaloneboy

Reputation: 407

#canvas-preview{
        width:200px;
        border:1px solid #000;
        box-sizing: border-box;
        position: relative;
        background-image: url('http://cdn.sstatic.net/Sites/stackoverflow/img/sprites.svg?v=8c1c8cba242e');
  
    }
    #canvas-preview::before{
        background-color:green;
        content: '';
        display: block;
        height: 100%;
        position: absolute;
        width: 100%;
       z-index:-99999; // add z-index in this css code.
    }
    #custom-canvas{
        margin:10px;
        color:#fff;
      
    }
    <div id="canvas-preview">
            <div id="custom-canvas">There is some text</div>
    </div>

Upvotes: 0

Robert
Robert

Reputation: 1286

I checked your code and text is white. It is just hidden behind this green container because of this:

 #canvas-preview::before

If you remove before thing(just for test purposes) you will see that text is white. So You need a different approach. Code is fine.

Upvotes: 0

Related Questions