Learning how to join a background image and background color together using CSS is a valuable skill. Have you ever been given the task of converting a PSD file into HTML and found the image assets did not always fit your needs?. This will often require the intervention of custom CSS to solve the problem.

The example below shows this in action. The background image provided was a brown notch triangle, but the requirements were that this needs to stretch along with the page on a hover state to produce a menu arrow.

This required the need for adding custom CSS to extend the triangle to produce the desired effect without using a second image. The background color has been given a different shade to highlight the join.

css background and image join
Background Color Indicated by Lighter Shade

Container Markup and CSS

The code below sets up the grey container area as well as the three H2 headings and font settings

<div class="container">
      <div class="headings">
           <h2 class="heading-1">HEADING ONE</h2>
           <h2 class="heading-2">HEADING TWO</h2>
           <h2 class="heading-3">HEADING THREE</h2>
      </div>
 </div>
.container {
    background-color: lightgrey;
    border: 1px solid darkgrey;
    padding: 20px 0; 
    margin: 0 auto;
    width: 50%;
}

.headings h2 {
    font-family: Georgia, 'Times New Roman', Times, serif;
    font-size: 1.1rem !important;
    color: #993408;
    margin: 30px 0px;
    padding-left: 10px;
}

CSS Hover Selector

The CSS hover selector is used to select elements when hovered over by a mouse. The code below allows the triangle notch PNG to display to the right-hand side of the container and H2 heading selected.

By giving this image width of 4% and height of 100% the image will adapt to match the 96% width background and maintain ratio responsively.

.heading-1:hover, .heading-2:hover, .heading-3:hover {
    background: url(https://robdoylecreative.com/wp-content/uploads/2020/02/brown-notch.png) no-repeat right;
    background-size: 4% 100%; /*width and height of the notch image*/
    position: relative; 
    padding-left: 10px;
    color: #fff !important;
    z-index: 1; 
    right: 0;
}

Using a ::before Pseudo-Element

In order for the CSS color background to appear and join the background image, a special Pseudo-Element needs to be used called ::before. This allows content to be applied before a selected element which in this case is the triangle image.

The CSS below shows this in action. To find the color of an image, all that is needed is to use a service like https://imagecolorpicker.com/ . In this case the hex value of the image color is #E97820.

By giving this a width of 96% to add to the 4% image width the background color will also show on hover but before the image.

Z-index will need to be adjusted to allow the background color to sit behind the heading text, which in this case is z-index: -1.

.heading-1:hover::before, .heading-2:hover::before, .heading-3:hover::before {
    content: "";
    background-color: #e97820;
    background-position: left;
    position: absolute;
    left: 0;
    z-index: -1;
    font-size: 1rem; 
    width: 96%; /*width of the css background*/
    height: 100%;
}

Working Example

See the Pen Background image and color join with CSS by Rob Doyle (@RobertMDoyle) on CodePen.

Conclusion

As demonstrated above, merging background images and colors together is a useful skill that can be used in many scenarios such as putting icons before elements on a web page. Menus are also a place where this can be implemented easily.

There is also ::after Pseudo-Element which as you may have guessed targets after a selected element. These methods are also responsive when the screen is re-sized.