CSS Transparent Overlay Background Image

This is a really tiny snippet, but I use it so often that I justified allowing it to be in its own code snippet post. It is a gradient over a background image. It’s a pretty ugly gradient, but it’s a gradient nonetheless!

.background-image-container {
    background: linear-gradient(rgba(221, 120, 120, 0.9),rgba(210, 221, 120, 0.9)),url(https://dust2life.com//wp-content/uploads/2016/12/green-3d-checker-board-pattern.jpeg);
}

 

Replace PNG Images with SVG Files to Control with CSS

Import the PNG into Adobe Illustrator. Click Image Trace > Black and White Logo. Then, click Expand. After that, click Object > Ungroup and make any edits as necessary.

Next, click Edit > Export Selection. In the dropdown, select SVG instead of PNG. In the next window, click Show SVG Code (or something like that). Copy that SVG element and paste it in place of the PNG. Wala! Here’s an example SVG element that I am able to put in place of a PNG. I included the actual icon below for your enjoyment.

<svg class="fp-svg weight-svg" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="-5 -25 150 150">
  <title>hero-icon-1</title>
  <path d="M143.49,68.79a3.44,3.44,0,0,1-.82-0.25h-0.07l-0.43,0a3.46,3.46,0,0,1-3.46-4.05,4.19,4.19,0,0,1,0-.58c0-.11,0-0.23,0-0.34a19.1,19.1,0,0,1-.46-5.94c0-3.07.63-6.32-.19-9.15-0.76-2.64-2.64-6.21-4.8-6.88-3-.94-6.75.44-10.61,0.88,0-3.39.16-7.93,0-12.45-0.22-4.75-3.54-8-7.68-7.94s-7.23,3.27-7.32,8.13c-0.13,7,0,14,0,21,0,5.41,0,10.82,0,16.36H43.06c0-9.83,0-19.2,0-28.57,0-11.82-1.87-15.59-7.72-15.51S27.94,27,28,38.67c0,1.89,0,3.78,0,6.83-3.88-4-7-6.15-11.36-4.19-4.53,2-5.06,6-4.89,10.28,0.1,2.72-.13,5.46.06,8.18a12,12,0,0,1-.11,3s0,0.09,0,.13A4,4,0,0,1,11,66.93a3.23,3.23,0,0,1-2.76,1.9,3.31,3.31,0,0,1-2.12.87,3.16,3.16,0,0,1-1.35,1.15c-2.28,4-1.6,9.46,2.32,12.16H7.88a3.48,3.48,0,0,1,3.44,4.18,4.18,4.18,0,0,1,0,.7,14.29,14.29,0,0,1,.38,5.06c-0.12,2.21.05,4.43,0,6.65-0.18,4.29.23,8.31,4.74,10.38,4.23,1.94,7.55.12,11.51-4.14,0,5.18,0,8.87,0,12.55,0,6.09,2.75,9.52,7.47,9.51s7.6-3.51,7.62-9.5c0-10.06.15-20.12-.06-30.18-0.07-3.6.67-5.16,4.72-5.12,18.41,0.19,36.83.16,55.24,0,3.64,0,4.7,1.29,4.64,4.78-0.17,10.06-.12,20.12,0,30.18,0,5.28,3,8.56,7.37,8.59s7.49-3.32,7.68-8.46c0.13-3.47,0-6.94,0-8.93,4.3,0.16,8.17,1.2,11.41.19,4.45-1.38,4.32-5.95,4.21-10-0.08-3.07.12-6.15-.06-9.2a7.82,7.82,0,0,1,.19-2.46,4.18,4.18,0,0,1,0-.64,3.76,3.76,0,0,1,1.32-3.52,3.25,3.25,0,0,1,2.43-1.23,3.32,3.32,0,0,1,1.34-.53,3.13,3.13,0,0,1,1.23-.94C147.4,77,147.2,71.59,143.49,68.79Z" transform="translate(-3.47 -22.1)"></path>
</svg>

After that, you can style the SVG with the following. Here’s my example styles. These styles are what turn the icon red and also what cause the background to turn white on hover.

.fp-svg:hover {
    fill: white;
    background-color: #c92e27;
}

.fp-svg {
    fill: #c92e27;
    border: 2px solid #c92e27;
    border-radius: 100%;
    transition: all .2s ease-in-out;
    padding: 20px;
    max-width: 170px;
}

 

hero-icon-1