Problem z obrazem i warstwą dodatkową nałożoną na ten obrazek (pattern

pytanie zadane 2 maja 2015 w HTML i CSS przez Sytams Nowicjusz (140 p.)
edycja 2 maja 2015 przez Sytams

Hej,

Poprzedni temat nie dokońca mi pomógł z patternem także pomyślałem, że założe nowy świeży.
Mam taki problem, że robię stronę na drupalu i w moim flexsliderze nie mogę dodać do zdjęcia pattern aby wzbogacić jego wygląd.

tutaj rozkład klas
http://gyazo.com/46b910df7c597895f81a2b40b7638cfd chciałbym na tym obrazku umieścić pattern. Mam już wycięty obraz jako pattern w pliku png. Czy mógłby ktoś naprostować?

chciałbym uzyskać takie krropki na swoim jpg jak tutaj, oni akurat mają na wideo.
https://www.hackerrank.com/

Dodam tylko, że title i lead będą również się znajdować na obrazku więc sam obraz czy klasa go trzymająca powinna być relativem. tekst absolutem a pattern?

Będę bardzo zobowiązany z pomoc.

2 odpowiedzi

odpowiedź 2 maja 2015 przez nefil1m Stary wyjadacz (10,690 p.)

Możesz dac jpg jako tło dla containera dać mu relative i wstawić pattern jako img z position: absolute. Chyba, że coś źle zrozumiałem

komentarz 2 maja 2015 przez jaca121212 Nałogowiec (40,760 p.)

spróbuj z z-index może to pomoże

odpowiedź 2 maja 2015 przez HaKIM Szeryf (87,590 p.)

Spróbuj zrobić tak, jak oni mają.

komentarz 2 maja 2015 przez Sytams Nowicjusz (140 p.)
edycja 2 maja 2015 przez Sytams

wyrównałem klase main-overlay z main-image tak jak mają ją na stronie załączonej na górze. i teraz pattern się pakazuję ale tylko w szerokości tego co mam w title i lead.
oczywiście mogę mu dać height:850px ale wtedy przy responsywności ni będzie się składał, bo max-height go nie weyrfikuje, nic wysokości strony nie ogranicza niestety.

http://gyazo.com/2cc620ceeb52c7c4b9ac6330eed3e030

komentarz 2 maja 2015 przez HaKIM Szeryf (87,590 p.)

Ja się ino zastanawiam, dlaczego nie użyjesz gotowca, z neta.

http://stackoverflow.com/questions/13607117/css-css3-pixelate-dot-background

komentarz 2 maja 2015 przez Sytams Nowicjusz (140 p.)

zrobienie kropek na backgroundzie jest łatwe ale ja chcę to zrobić na obrazku, który się cały czas zmienia przez flexslidera.

komentarz 2 maja 2015 przez HaKIM Szeryf (87,590 p.)

Zaraz... To Ty chcesz mieć to na divie w którym są zdjęcia, czy na obrazku?

komentarz 2 maja 2015 przez Sytams Nowicjusz (140 p.)

obojętnie. mam diva, który ma ciągle jeden obrazek - slider - co jakiś czas się zmienia obrazek w tym divie ale wciąż to jest ten sam układ.

komentarz 2 maja 2015 przez HaKIM Szeryf (87,590 p.)

Dam Ci radę. Straciłeś na to już parę godzin.

Weź otwórz np. Gimpa i ustaw dla każdego zdjęcia ten sam efekt.

Zaoszczędzisz parę godzin, dokończysz projekt a może dostaniesz oświecenia i będziesz wiedział, jak to zrobić.

Pozdrawiam. :-)

komentarz 2 maja 2015 przez testerius Pasjonat (23,960 p.)

To musi być po prostu na divie, a nie na obarazku. Nie wiem czy jesteś tym samym autorem, ale pamiętam, że wcześniej był już taki temat i tam wrzuciłem swojo rozwiązanie z codepena. Co prawda jeszcze w innym temacie (w dziale JS, ktoś podlinkował moje rozwiązanie) wyjaśniłem problem, który niestety pojawia się czasami na Firefox.

Miałem nie szukać, tych poprzednich wątków, ale masz: https://forum.pasja-informatyki.pl/8237/pattern-w-tle-css

oraz https://forum.pasja-informatyki.pl/9157/znalazlem-ciekawy-efekty-tla-obrazkowe-tylko-nie-wiem-jak-go-zrobic - przeczytaj moje komentarze.