CODEWITHSUNDEEP
htmlcss
mdixon18
mdixon18

Reputation: 1219

css background gradient with opaque pattern on top

FIDDLE GOES HERE

Below is an image of what I am trying to accomplish in CSS:

enter image description here

As you can see, I have a gradient with a pattern on top. The pattern itself looks like this: enter image description here

This pattern in photoshop has a 50% opacity to give it the look I have in the first image.

So to the HTML & CSS i've figured that I will need two elements to accomplish this just like this:

<header class="header background-gradient" id="header">
    <div class="background-pattern">
       // contents
    </div>
</header>

Now, what I have attempted is 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 the gradient effect which looks perfect, now where i struggle is with the pattern, if I apply the pattern in css like this:

.background-pattern {
  background: url(../images/pattern.jpg) repeat;
  opacity: .5; }

The issue I now face is all the child elements take on the .5 opacity and I don't know how I can avoid this?

You can checkout my fiddle to see this working in action.

Upvotes: 2

Views: 10946

Answers (5)

Zentoaku
Zentoaku

Reputation: 767

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;
}
}

Upvotes: 1

mdixon18
mdixon18

Reputation: 1219

FIDDLE GOES HERE

I have managed to figure it out mostly based on the comment provided by @Zentoaku

I have 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 anyone else doing the same sort of thing

EDIT: You should also ensure that you set .background-pattern to have a height of 100% to ensure it fits within the parent elements sizes.

Upvotes: 0

Katana314
Katana314

Reputation: 8620

It looks like there's already a suitable answer, but I figure I'll throw in one more different one. Some newer browsers let you layer multiple background images (or gradients) on top of each other. The result would 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 tested)

Since it's a lot of CSS, I decided to try omitting bg-repeat (is repeat by default) and some of the browser prefixes. (I'm not sure where -ms-linear-gradient came from. The first MS browser to support gradients allows you to use the standardized syntax)

Of course, this approach has the disadvantage of not working on older browsers. I believe IE9 is the earliest to support multiple backgrounds, and IE10 is the earliest to support gradients.

Upvotes: 0

indubitablee
indubitablee

Reputation: 8206

This solves the problem, unfortunately a position absolute is required to work with z-index. 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%;
}

(the indented stuff is new css and i just pulled out the h1 from the header element)

updated fiddle: http://jsfiddle.net/v82Luxfc/7/

(nice gradient btw, looks sick!)

Upvotes: 1

MegaMind
MegaMind

Reputation: 671

What you can do is 

 <header class="header background-gradient" id="header">
<div class="background-pattern"></div>

// contents

</header>

and now 

 .background-pattern {
background: url(../images/pattern.jpg) repeat;
position : absolutel;
opacity: .5; }

Upvotes: 0

Related Questions