• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

question-closed Stworzenie tła z zdjęć przy pomocy css i html

Aruba Cloud VPS - 50% taniej przez 3 miesiące!
0 głosów
411 wizyt
pytanie zadane 6 czerwca 2017 w HTML i CSS przez _MarciN_ Nowicjusz (150 p.)
zamknięte 6 czerwca 2017 przez _MarciN_
Chciałbym zrobić takie tło na stronie (przykład: https://drive.google.com/open?id=0ByYdznifXoQZUXhRck1fSUl4Q1E) , każde zdjęcie chciałbym osobno żebym mógł po naciśnięciu na obrazek przejść do innej strony na przykład.

Jest coś takiego możliwe próbuje z background-image ,ale nie chce się to tak pozycjonować, oczywiście te wszystkie zdjęcia będą w divie z ID bo oprócz tego tła chciałbym menu u góry stopkę i inne rzeczy ;)
komentarz zamknięcia: Rozwiązany problem

4 odpowiedzi

–1 głos
odpowiedź 6 czerwca 2017 przez pablop76 VIP (123,460 p.)
wybrane 6 czerwca 2017 przez _MarciN_
 
Najlepsza

Witam. to oczywiście bardzo poglądowy kod.

<div class="container">
  <div class="a">
    <div class="a1"></div>
    <div class="a2"></div>
    <div class="a3"></div>
  </div>
  <div class="a">
      <div class="b1"></div>
      <div class="b2"></div>
  </div>
  <div class="e"></div>
</div>
body{
  background-color: grey;
}
.container{
  width: 80%;
  margin: 0 auto;
  box-shadow: 0 0 1em black;
}
.a,.e{
  width: 100%;
}
.a1,.a2,.a3,.b1,.b2{
  float: left;
}
.a::after {
    content: "";
    clear: both;
    display: table;
} /*czyszczenie przepływu float:left*/
.a1{
  width: 20%;
  height: 400px;
  background-image: url("https://www.cleverfiles.com/howto/wp-content/uploads/2016/08/mini.jpg");
  background-size: cover;
  background-position: center;
}
.a2{
  width: 70%;
  height: 400px;
  background-image: url("https://www.cleverfiles.com/howto/wp-content/uploads/2016/08/mini.jpg");
  background-size: cover;
  background-position: center;
}
.a3{
  width: 10%;
  height: 400px;
  background-image: url("https://www.cleverfiles.com/howto/wp-content/uploads/2016/08/mini.jpg");
  background-size: cover;
  background-position: center;
}
.b1,.b2{
  width: 50%;
  height: 400px;
  background-image: url("https://www.cleverfiles.com/howto/wp-content/uploads/2016/08/mini.jpg");
  background-size: cover;
  background-position: center;
}
.e{
  height: 400px;
  background-image: url("https://www.cleverfiles.com/howto/wp-content/uploads/2016/08/mini.jpg");
  background-size: cover;
  background-position: center;
}

 

komentarz 6 czerwca 2017 przez zgrybus Pasjonat (24,860 p.)
taki kodzik w czasach flexboxa? :)
komentarz 7 czerwca 2017 przez Wujek Greg Dyskutant (9,410 p.)
pierwsze primo float...

drugie primo po co dawać gotowy kod?
+1 głos
odpowiedź 6 czerwca 2017 przez Wujek Greg Dyskutant (9,410 p.)
Robisz grida z divow, najlepiej we flexie, ustawiasz tak jak chcesz i dla każdego diva po id nadajesz background-image
komentarz 6 czerwca 2017 przez dervil Gaduła (3,030 p.)
albo po klasie ;)
+1 głos
odpowiedź 6 czerwca 2017 przez Cyborek Użytkownik (850 p.)
Możesz również użyć

background: url(" ") center/cover no-repeat
0 głosów
odpowiedź 6 czerwca 2017 przez niezalogowany

nie chce się to tak pozycjonować

A jak się teraz pozycjonuje?

Pokaż kod.

komentarz 6 czerwca 2017 przez _MarciN_ Nowicjusz (150 p.)
Teraz mam coś takiego

http://wklej.org/id/3193744/

O ile jeden pozycjonuje się normalnie to jeden przy pozycji 0px 0px jest na środku strony...
komentarz 6 czerwca 2017 przez Wujek Greg Dyskutant (9,410 p.)
Odradzam bawić się z background-position, jeżeli chcesz zachować jakiekolwiek RWD to zrób tak jak napisałem niżej.
komentarz 6 czerwca 2017 przez _MarciN_ Nowicjusz (150 p.)
Z tego co prześwietliłem to w flex nie można pozycjonować każdego zdjęcia osobno
komentarz 6 czerwca 2017 przez Wujek Greg Dyskutant (9,410 p.)
pozycjonujesz diva tak jak chcesz i jako jego tlo wrzucasz obrazek

Podobne pytania

0 głosów
1 odpowiedź 1,292 wizyt
0 głosów
1 odpowiedź 1,240 wizyt
pytanie zadane 15 grudnia 2018 w Grafika i multimedia przez Kaktus_2225 Użytkownik (630 p.)

93,115 zapytań

142,097 odpowiedzi

321,672 komentarzy

62,453 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj

Wprowadzenie do ITsec, tom 1 Wprowadzenie do ITsec, tom 2

Można już zamawiać dwa tomy książek o ITsec pt. "Wprowadzenie do bezpieczeństwa IT" - mamy dla Was kod: pasja (użyjcie go w koszyku), dzięki któremu uzyskamy aż 15% zniżki! Dziękujemy ekipie Sekuraka za fajny rabat dla naszej Społeczności!

...