Overlay em imagem no css3

[vostrotelecom 0]

Boa noite pessoal,

Gostaria mais uma vez da ajuda dos parceiros aqui.

Tenho 3 imagens fixas na índex do meu site e hoje elas estão com um efeito overlay na cor preta com opacidade em 70% colocadas através do photoshop mesmo...

Mais não gostei muito do resultado e quero colocar uma imagem para ser repetida em cima dessa imagem que já existe e está com position fixed definida no CSS.

Por favor vejam no site abaixo o exemplo do que quero fazer.

www.cafecomideias.com.br

As imagens apresentadas no site acima possuem uma imagem fazendo o efeito overlay e sendo repetida em cima de outras imagens, como é o caso das imagens do Steve Jobs, a imagem dos testemunhos dos clientes, etc.

Então é isso, gostaria de saber como fazer esse efeito no CSS para por em cima das imagens que já possuo no meu site.

[pwd 7]

Procura por: efeito parallax.

abs!

[vostrotelecom 0]

Opa parceiro, boa noite.

Desde já agradeço pela colaboração.

Acho que você não entendeu o que eu quero... na verdade não quero criar o efeito parallax ( que são várias imagens juntas criando um movimento ), mais sim colocar um efeito overlay.

Olhando o link acima e vendo em as imagens que tem o Steve Jobs e os testemunhos dos clientes, pode olhar que existe uma imagem ( http://www.cafecomideias.com.br/images/pattern.png ) que está sendo repetida por cima de uma outra imagem usando a propriedade repeat do css.

Esse o efeito que quero fazer e não estou conseguindo.

Então quero criar esse mesmo efeito

[pwd 7]

E ae man, blzs?

Então, no caso deles é um PNG com um pixel transparente e o outro preto com transparência.

E a DIV com o pattern, tem position: absolute; com W e H 100%.

Preciso testar, mas tenho quase certeza que é possível fazer com múltiplos backgrounds.

Qualquer coisa posta seu código que vou lhe ajudando.

Abs!

[Public2004 79]

Como dito aí, basicamente criar um outro container sobre o container da imagem e neste novo, aplicar o pattern.

Se a imagem que vai receber o efeito está sendo aplicada como background, uma alternativa seria trabalhar com o pseudo-elemento "after", e aplicar o pattern neste.

Att.

[vostrotelecom 0]

Opa pessoal... boa noite e desde já obrigado pela ajuda.

Segue abaixo html e css de uma das imagens que quero por o pattern:

HTML

<section class="calltoaction">
<div class="row">
<div class="small-12 columns">
<div data-wow-delay="0.3s" class="longshadow wow fadeInDown">Internet de Alta Velocidade?</div>
<div data-wow-delay="0.5s" class="calltoactioninfo wow fadeInUp">
<h2>Mude Para Vostro Telecom</h2>
<h3>LIGAMOS PARA VOCÊ    <i class="fa fa-phone-square"></i></h3>
<a href="#" class="small radius button">CLIQUE AQUI</a>
</div>
</div>
</div>
</section>

CSS

.calltoaction {padding:50px 0; 
               background:url(images/ligo_ja_index.jpg);
               background-repeat: no-repeat; 
               moz-background-size: 100% 100%; 
               background-attachment: fixed; 
               -webkit-background-size: 100% 100%;
               background-size: 100% 100%;
               max-width:100%; 
               height:auto;
               overflow:hidden;}
.calltoaction .longshadow {height: 100%;  width: 100%;  font-size: 64px;  text-align: center;  color:#fafafa;  font-weight:900;}
.calltoactioninfo {margin-top:40px; border-top:4px double #fff; padding:40px 0 0; text-align: center; }
.calltoaction h2 {font-weight:900;text-align: center; margin:0; padding:0; color:#fafafa; font-size:57px;  }
.calltoaction h2 span {color:#fafafa;  }
.calltoaction h3 {font-weight:300;text-align: center;  margin:15px 0 0; padding:0; color:#fafafa; font-size:22px; }
.calltoactioninfo .button {background:#1F8BA9; color:#fff; margin-top:30px; font-weight:700; float:none;}
.calltoactioninfo .button:hover {background:#17687E; text-decoration: none}

Meu HTML e CSS estão como acima, quero colocar o pattern por cima dessa imagem :

background:url(images/ligo_ja_index.jpg)

[Public2004 79]

Como já havia sugerido, uma das maneiras é trabalhar com o pseudo-elemento "after".

.calltoaction::after {
    content: '';
    background: url('seu_pattern_png') repeat;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

Lembre-se de acrescentar um "position:relative;" a sua classe ".calltoaction".

Att.