Use CSS to Make Background-Image Above Background-Color in a List

Use CSS to make background-image above background-color in a list

Add the !important attribute to your background-image. Like this:

.test a{
background-image: url('img/big_tick.png') !important;
background-repeat:no-repeat;
background-position: bottom right;
-moz-background-size: 30%;
-webkit-background-size: 30%;
background-size: 30%;    
margin-right: 30px;

}

I have an example fiddle here

EDIT: I changed the class to .test a to reflect the actual styling scheme

CSS aligning background-image above background-color set in *:before and *:after

I setup this JSFiddle.

Basically, you will only need 2 z-index's defined in your CSS:

.GoBoard{
    z-index: 0;
}

.GoBoard>div:before, .GoBoard>div:after {
    z-index: -1;
}

The one you have defined under .white selector is unnecessary. Also, this is a pretty awesome pure CSS setup!

How can I display a background image on top of background color?

A pseudo element and few z-index can do it:

.wrapper {
  position:relative;
}

.wrapper::after {
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background-image: url(https://i.ibb.co/gD7vNSs/fleur-cerf.png), url(https://i.ibb.co/Nn2Wt9Q/fleur-renard.png);
  background-position: top left, top right;
  background-repeat: repeat-y;
}

.box1 {
  padding: 50px;
  padding-left: 100px;
  background: #f6f7f9;
}

.box2 {
  padding: 50px;
  padding-left: 100px;
  background: #e89d8c;
}
/* to make the content always on the top */
.box1 *,
.box2 * {
  position:relative;
  z-index:2;
}

<div class="wrapper">
  <div class="box1">
    <h1>This is a heading</h1>
    <p>
      This is paragraph
    </p>
  </div>
  <div class="box2">
    <h1>This is a heading</h1>
    <p>
      This is paragraph
    </p>
  </div>
</div>

How to set background-image above background-color

Note that instead of setting background on two classes you can set it in .class2 itself by using background: url(http://davidrhysthomas.co.uk/linked/strike.png) repeat-x, red (the image mentioned first will be stacked over the red background mentioned last) - see demo below:

table {
  border-collapse: collapse;
}

table,
td {
  border: 1px solid black;
}

td.class1 {
  padding: 10px; /* for illustration */
}

.class2 {
  text-align: center;
  color: #fff;
  height: 20px;
  width: 20px;
  background: url(http://davidrhysthomas.co.uk/linked/strike.png) repeat-x,
              red; /* changed*/
  border-radius: 5rem !important;
  display: inline-block;
}

<table>
  <tr>
    <td>S</td>
    <td>B</td>
  </tr>
  <tr>
    <td>S</td>
    <td class="class1">
      <span class="class2">S</span>
    </td>
  </tr>
</table>

CSS: background image on background color

You need to use the full property name for each:

background-color: #6DB3F2;
background-image: url('images/checked.png');

Or, you can use the background shorthand and specify it all in one line:

background: url('images/checked.png'), #6DB3F2;

How to add a color overlay to a background image?

I see 2 easy options:

• multiple background with a translucent single gradient over image
• huge inset shadow

gradient option:

    html {
      min-height:100%;
      background:linear-gradient(0deg, rgba(255, 0, 150, 0.3), rgba(255, 0, 150, 0.3)), url(https://picsum.photos/id/1043/800/600);
      background-size:cover;
    }

Using a background image on top of a background colour in CSS

You can use multi-background:

#main {
  width: 900px;
  height: 955px;
  background: url(../images/slogan.png) no-repeat, #282d37;
}​

To explain: use background css option, first add image, than background color.

LIVE DEMO

Semi-transparent color layer over background-image?

Here it is:

.background {
    background:url('../img/bg/diagonalnoise.png');
    position: relative;
}

.layer {
    background-color: rgba(248, 247, 216, 0.7);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

HTML for this:

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

Of course you need to define a width and height to the .background class, if there are no other elements inside of it

---

Related Topics