6 Replies - 568 Views - Last Post: 04 August 2014 - 06:58 AM

#1 ognjengt  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 9
  • Joined: 29-July 14

Pattern over image CSS

Posted 03 August 2014 - 07:49 PM

Hello, I need a code that can put some pattern over image in css. I've tried searching on google, but nothing seem's to fit my needs. I need something like this. Attached Image
Can anyone help me?
Is This A Good Question/Topic? 0
  • +

Replies To: Pattern over image CSS

#2 astonecipher  Icon User is offline

  • Major DIC Head
  • member icon

Reputation: 702
  • View blog
  • Posts: 3,027
  • Joined: 03-December 12

Re: Pattern over image CSS

Posted 03 August 2014 - 07:53 PM

What have you tried, what isn't working?
Was This Post Helpful? 0
  • +
  • -

#3 ognjengt  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 9
  • Joined: 29-July 14

Re: Pattern over image CSS

Posted 03 August 2014 - 08:18 PM

I've tried putting pattern image over the another image and adding transparency. But I want a pure css code for this if it is possible.
Something I tried:
#bg_pattern { 
background-image: url(bg_pattern.png); 
position: fixed; 
opacity: 0.8; 
left: 0px; 
top: 0px; 
width: 100%; 
height: 100%; 
z-index: -1;
}

Was This Post Helpful? 0
  • +
  • -

#4 astonecipher  Icon User is offline

  • Major DIC Head
  • member icon

Reputation: 702
  • View blog
  • Posts: 3,027
  • Joined: 03-December 12

Re: Pattern over image CSS

Posted 03 August 2014 - 08:24 PM

z-index: -1;


That puts the new image behind the other. Is that what you wanted? Post all of your relevant code for help. We guide, not handout code.
Was This Post Helpful? 0
  • +
  • -

#5 andrewsw  Icon User is offline

  • Fire giant boob nipple gun!
  • member icon

Reputation: 3517
  • View blog
  • Posts: 12,008
  • Joined: 12-December 12

Re: Pattern over image CSS

Posted 03 August 2014 - 09:08 PM

If I search "css pattern overlay" there are lots of results, including:

https://gist.github....urphy27/5243251

and
http://www.patternify.com/

You already have the basic idea though, which is opacity, z-index and positioning.
Was This Post Helpful? 0
  • +
  • -

#6 andrewsw  Icon User is offline

  • Fire giant boob nipple gun!
  • member icon

Reputation: 3517
  • View blog
  • Posts: 12,008
  • Joined: 12-December 12

Re: Pattern over image CSS

Posted 03 August 2014 - 09:40 PM

You can even create some rather cool css patterns (a gallery); again, setting opacity and bringing this in front of an image.
Was This Post Helpful? 0
  • +
  • -

#7 ognjengt  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 9
  • Joined: 29-July 14

Re: Pattern over image CSS

Posted 04 August 2014 - 06:58 AM

Got it, thanks!
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1