Css background gradient with opaque pattern on top
Hi guys, this is an image of what I am trying to accomplish in CSS:
As you can see I have a gradient with a pattern on top, the template itself looks like this:
This template in Photoshop has 50% opacity to give it the look I have in the first image.
So, for HTML and CSS, I figured that I would need two elements for this:
<header class="header background-gradient" id="header">
<div class="background-pattern">
// contents
</div>
</header>
Now I tried to do the following:
.background-gradient {
background: #4261cf;
background: -moz-linear-gradient(45deg, #3023ae 0%, #53a0fd 100%);
background: -webkit-gradient(linear, left bottom, right top, color-stop(0%, #3023ae), color-stop(100%, #53a0fd));
background: -webkit-linear-gradient(45deg, #3023ae 0%, #53a0fd 100%);
background: -o-linear-gradient(45deg, #3023ae 0%, #53a0fd 100%);
background: -ms-linear-gradient(45deg, #3023ae 0%, #53a0fd 100%);
background: linear-gradient(45deg, #3023ae 0%, #53a0fd 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='$gradient-start', endColorstr='$gradient-end',GradientType=1 );
color: white; }
Above is a gradient effect that looks perfect now that I am struggling with the pattern if I applied the pattern in css like this:
.background-pattern {
background: url(../images/pattern.jpg) repeat;
opacity: .5; }
The problem I'm currently running into is all child elements take .5 opacity and I don't know how I can avoid this?
You can check my fiddle to see how this works in action, thanks.
source to share
This solves the problem, unfortunately it requires an absolute position to work with the z-index. It's your choice whether to use it or not.
<header class="header background-gradient" id="header">
<div class="background-pattern">
</div>
</header>
<h1>Main Title</h1>
h1 {
color: white;
text-align: center;
padding-top: 100px;
margin-top:-500px;
z-index:10;
position:absolute;
width:100%;
}
(padding is new css and I just pulled the h1 out of the head element)
updated script: http://jsfiddle.net/v82Luxfc/7/
(nice gradient by the way, looks sick!)
source to share
I was able to figure this out mainly based on the comment provided by @Zentoaku
I applied to the background-gradient css:
.background-gradient {
position: relative;
z-index: -1;
// also here the gradient
}
.background-pattern {
position: absolute;
z-index: -1;
// here the pattern image and opacity
}
Hope this helps someone else to do something similar
EDIT: . You also need to make sure you .background-pattern
have a height
for height
to 100%
match the dimensions of the parent elements.
source to share
It looks like there is already a suitable answer, but I suppose I'll throw in another one. Some newer browsers allow you to overlay multiple background images (or gradients) on top of each other. The result will look something like this:
.background-gradient {
background: #4261cf;
background-image: url(../images/pattern.jpg), -moz-linear-gradient(45deg, #3023ae 0%, #53a0fd 100%) ;
background-image: url(../images/pattern.jpg), -webkit-gradient(linear, left bottom, right top, color-stop(0%, #3023ae), color-stop(100%, #53a0fd));
background-image: url(../images/pattern.jpg), linear-gradient(45deg, #3023ae 0%, #53a0fd 100%);
}
(not verified)
Since I have a lot of CSS, I decided to try excluding bg-repeat (repeats by default) and some browser prefixes. (I'm not sure where it came from -ms-linear-gradient
. The first MS browser to support gradients allows a standardized syntax)
Of course, this approach has the disadvantage that it does not work on older browsers. I believe IE9 is the earliest to support multiple backgrounds and IE10 is the earliest to support gradients.
source to share
http://jsfiddle.net/5sbn1fn6/2/
HTML:
<header class="header background-gradient" id="header">
<h1><a href="#">Main Title</a></h1>
<div class="background-pattern"></div>
</header>
CSS
header {
height: 500px;
width: 100%; }
.background-gradient {
position: relative;
background: #4261cf;
background: -moz-linear-gradient(45deg, #3023ae 0%, #53a0fd 100%);
background: -webkit-gradient(linear, left bottom, right top, color-stop(0%, #3023ae), color-stop(100%, #53a0fd));
background: -webkit-linear-gradient(45deg, #3023ae 0%, #53a0fd 100%);
background: -o-linear-gradient(45deg, #3023ae 0%, #53a0fd 100%);
background: -ms-linear-gradient(45deg, #3023ae 0%, #53a0fd 100%);
background: linear-gradient(45deg, #3023ae 0%, #53a0fd 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='$gradient-start', endColorstr='$gradient-end',GradientType=1 );
color: white;
position: relative;}
header > * {
position: relative;
z-index: 3;
}
.background-pattern {
position: absolute;
background: url(http://i1091.photobucket.com/albums/i392/matid1994/pattern.jpg) repeat;
opacity: .5;
height: 500px;
width: 100%;
left: 0;
top:0 ;
z-index: 1;
}
h1 {
color: white;
text-align: center;
padding-top: 100px;
z-index: 3;
}
h1 a {
color: white;
}
}
source to share