Skocz do zawartości

Zdjęcie
* * * * * 1 głosy

Tło na całą wysokość obrazka


5 odpowiedzi w tym temacie
  • Zaloguj się, aby dodać odpowiedź
testerius

    Użytkownik

  • 77 postów
    • Czas spędzony online: 2d 8h 52m 2s
6
Neutralna

Napisano 20 kwietnia 2014 - 10:24

#1

Siemanko, nie za bardzo wiem jak sobie poradzić z tym takim problemem. Mam stronę, gdzie po wejściu jest tło na 100% wysokości i to tło jest jeszcze przykryte teksturą z przezroczystym kolorem. Oczywiście tutaj nie ma żadnych problemów i wszystko działa jak należy. :)

 

Problem za to pojawia się z sekcją „CTA”, który również będzie zawierać tło + tekstura i przezroczystość. Tutaj jednak chciałbym zbudować nieco inaczej tą sekcję, zastosowałem padding po to aby nie ustawiać wysokości na sztywno.

 

Chciałbym aby dopasowywało się to tak jakby do zawartości, no i aby ta zawartość było wycentrowana itd. Uzyskałem ten efekt, ale niestety „overlay” nie pokrywa całego tła.

 

Wrzuciłem na codepen.io część mojej strony, to możecie zobaczyć jak to wygląda. :)

Demo: http://codepen.io/testerius/pen/viryc

 

Jeśli chodzi o sekcję „CTA” to jest ona 1 z przykładowych, bowiem na stronie wykorzystuje jeszcze również podobne z innymi tłami, które będą miały różne wysokości, chcę stosować pudding do zmiany wysokości, ponieważ ustawienia na sztywno, psuje mi czasami zawartość na mniejszych rozdzielczościach. To tyle, mam nadzieję, że coś poradzicie, bo od wczoraj przebudowuję nieco stronę i stwierdziłem, że  warto zrobić pewne zawartości nieco bardziej "dynamiczne". :P


  • 0

Yeoman

    Stary wyjadacz

  • 358 postów
    • Czas spędzony online: 6d 19h 43m 48s
169
Znakomita!
  • LocationKatowice

Napisano 20 kwietnia 2014 - 20:53

#2

Chcesz ustawić paddingiem wysokość ? Chcesz żeby w miejsce paddingu wchodziło tło ?

Kompletnie nie wiem co chcesz osiągnąć :o

 

Jeśli na drugie moje pytanie odpowiadasz TAK to sobie dodaj padding też do overlaya.


  • 0

2ed58r7.png


testerius

    Użytkownik

  • 77 postów
    • Czas spędzony online: 2d 8h 52m 2s
6
Neutralna

Napisano 20 kwietnia 2014 - 21:19

#3

Ok, już wyjaśniam o co mi chodzi. Otóż chciałbym uzyskać taki efekt w sekcji CTA: http://i.imgur.com/WaOH1Gd.png (czyli  tło jest przykryte teksturą/kolorem). Tylko tutaj w porównaniu z sekcją .welcome (gdzie stosuję height: 100%) chciałbym do .cta dodać padding, po to aby tworzył mi od napisu tło, czyli paddingiem ustawiam wysokość.

 

Chciałbym aby overlay było taką klasą, która dopasowywała się do dane wysokości - np. jakbym miał inna klasę, powiedzmy .cta2 i tam ustawił padding: 200px 0; to chcę aby to było pokrywane automatycznie.

 

Jak dodam padding do overlaya, nie przykrywa mi całego obrazka. :P

 

----------------------------------------------------------

Sprawa wygląda tak, że problem rozwiązuje zrobienie osobnego overlaya dla .cta - ale nie chciałbym powtarzać niepotrzebnie kodu w kilku miejscach (nawet nie chciałbym za bardzo korzystać z mixinów LESS).

 

Rozumiesz, mam klasę .overlay i ona zakrywa mi dowolny div o dowolnej wysokości/szerokości, który zrobiłem przez padding.

 

Nie wiem jak mogę to jeszcze inaczej wytłumaczyć co mam na myśli.  ^_^ Mogę jeszcze powiedzieć, że padding chcę użyć dlatego, ponieważ wtedy napis/zawartość sekcji jest od razi wycentrowana pionowo, a i podczas zmniejszania rozdzielczości wszystko ładnie się dopasowuje.


  • 0

Yeoman

    Stary wyjadacz

  • 358 postów
    • Czas spędzony online: 6d 19h 43m 48s
169
Znakomita!
  • LocationKatowice

Napisano 21 kwietnia 2014 - 10:45

#4

A możesz pokazać wersje z tym kolejnym overlayem ? Bo jak na razie to za cholerę nie wiem co Ty chcesz tak naprawdę osiągnąć, bo jak dla mnie to działa to spoko. Wszytko się pokrywa, nawet jesli dam więcej treści do .cta...

 

(Zakładam że nie mówisz o Internet Explorer?)

 

Może problem w tym że mam mały ekran i nie widzę problemu...


  • 0

2ed58r7.png


testerius

    Użytkownik

  • 77 postów
    • Czas spędzony online: 2d 8h 52m 2s
6
Neutralna

Napisano 21 kwietnia 2014 - 21:06

#5

Akurat rozwiązałem problem już jakiś czas temu, przypadkiem na to wpadłem i uzyskałem to co pierwotnie chciałem, przed chwilą również zaktualizowałem codepena. :P Rozwiązanie:

/* CTA section */
.cta {
  background: url(http://i.imgur.com/cnwY2Bn.jpg);
  
  > .section-pattern-overlay { // rozwiązanie
    padding: 70px 0;
  }
}

Zamiast .cta, to padding daje overlay, który jest w konkretnej klasie i dzięki temu mogę np. tworzyć nowe klasy, które będą miały inne paddingi. Dobra, myślę, że można zamknąć temat, swoją drogą prosiłem o pomoc, a i tak sam sobie poradziłem. :D


  • 0

Yeoman

    Stary wyjadacz

  • 358 postów
    • Czas spędzony online: 6d 19h 43m 48s
169
Znakomita!
  • LocationKatowice

Napisano 22 kwietnia 2014 - 15:24

#6

W sumie radziłem Ci tak samo :D

 

bez > nie działa ?


  • 0

2ed58r7.png






Podone tematy Collapse

  Temat Forum Autor Podsumowanie Ostatni post

Użytkownicy przeglądający ten temat: 1

0 użytkowników, 1 gości, 0 anonimowych