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

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

odpowiedź 6 czerwca 2017 przez pablop76 VIP (123,120 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;
}