Photoshop Question posted in
The official user guide can be found here.

css background gradient with opaque pattern on top – Photoshop

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.

Tags:

5

Answers


  1. Chosen as BEST ANSWER
    0

    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.


  2. 0

    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; }
    Login or Signup to reply.
  3. 0

    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!)

    Login or Signup to reply.
  4. 0

    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.

    Login or Signup to reply.
  5. 0

    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;
}
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search