SoftTimur SoftTimur - 3 months ago 11
CSS Question

Make a darker box in a canvas with pattern

I have defined a rule for

has-pattern
in my CSS:

.has-pattern {
background-image: url('../images/patterns/pattern-1.png');
background-repeat: repeat;
background-position: left top;
}


As a result, a section where
has-pattern
is applied (
<section class="team section has-pattern">
) has the following background:

enter image description here

Now, I want to insert a smaller box inside this section, with a darker background color. My question is how to NOT make the darker box break the existing pattern.

I tried to add the follows in my CSS:

.team .box-inner {
padding: 60px;
background-color: #3FA07A;
background-image: url('../images/patterns/pattern-1.png');
background-repeat: repeat;
}


The problem is that the pattern of the two levels does not match:

enter image description here

Does anyone has a solution?

Answer

You can acheive this by not using a pattern for the inner box but by using an rgba colour value instead, allowing the pattern to show through the transparency. Eg. background: rgba(0,0,0,0.2);

Demo at https://jsfiddle.net/xudg5d93/

For futher control on how the transparency affects things, you might want to look at the CSS filter attribute as well: https://css-tricks.com/almanac/properties/f/filter/