Ustawienie strony na cały ekran

0

Po otwarciu strony chcę uzyskać taki wynik: http://i.imgur.com/15yBqHj.jpg 1. tło ma być nie maksymalizujące się i na całą powierzchnię ekranu. Ponadto po najechaniu na konkretną ligę wyświetla się lista meczy: http://i.imgur.com/7SBUkQn.jpg

Nie mam pojęcia jak mam zrobić to, żeby strona na każdym monitorze była na cały ekran i nie dawało się jej powiększać i pomniejszać.

HTML:

<body>
    <footer>
        <div class="jeden"> <img src="grafika/loga/hiszpanska.png" />
          <p class="text-hover">
                Lorem ipsum dolor ist
          </p>
        </div>
         
        <div class="dwa"> <img src="grafika/loga/angielska.png" />
          <p class="text-hover">
                Lorem ipsum dolor ist
          </p>
        </div>
         
        <div class="trzy">Logo
          <p class="text-hover">
                Lorem ipsum dolor ist
          </p>
        </div>
         
        <div class="cztery">Logo
          <p class="text-hover">
                Lorem ipsum dolor ist
          </p>
        </div>
         
        <div class="piec">Logo
          <p class="text-hover">
                Lorem ipsum dolor ist
          </p>
        </div>
    </footer>
</body>

CSS:

body{
     margin: 0;
}
 
 
footer{
  width: 1920px;
  height: 1080px;
  overflow: hidden;
  position: relative;
  margin: 0 auto;
  background-color: red;
}
 
.jeden,.dwa,.trzy,.cztery,.piec{
  position: absolute;
  text-align: center;
  padding-top: 80px;
  box-sizing: border-box;
  overflow: hidden;
}
 
.jeden:after, .dwa:after, .trzy:after, .cztery:after, .piec:after{
  display: block;
  position: absolute;
  content: "";
  top: 0px;
  left: 0px;
  width: 1920px;
  height: 1080px;
 
}
 
.jeden{
  -ms-transform: matrix(1, 0, -0.3, 1, 150, 0);
  -webkit-transform: matrix(1, 0, -0.3, 1, 150, 0);
  transform: matrix(1, 0, -0.3, 1, 1, 0);
  background-color: #c1c1c1;
  width: 100%;
  height: 100%;
  float: left;
  z-index: 1;
    background-image: url('../grafika/tlo_1.png');
     
}
.dwa{
  float: left;
  left: 20%;
  -ms-transform: matrix(1, 0, -0.3, 1, 150, 0);
  -webkit-transform: matrix(1, 0, -0.3, 1, 150, 0);
  transform: matrix(1, 0, -0.3, 1, 1, 0);
  
  width: 100%;
  height: 100%;
  z-index: 2;
     background-image: url('../grafika/tlo_2.png');
}
.trzy{
    float: left;
  left: 40%;
  -ms-transform: matrix(1, 0, -0.3, 1, 150, 0);
  -webkit-transform: matrix(1, 0, -0.3, 1, 150, 0);
  transform: matrix(1, 0, -0.3, 1, 1, 0);
  width: 100%;
  height: 100%;
  z-index: 3;
     background-image: url('../grafika/tlo_3.png');
}
 
.cztery{
    float: left;
  left: 60%;
  -ms-transform: matrix(1, 0, -0.3, 1, 150, 0);
  -webkit-transform: matrix(1, 0, -0.3, 1, 150, 0);
  transform: matrix(1, 0, -0.3, 1, 1, 0);
  width: 100%;
  height: 100%;
  z-index: 4;
     background-image: url('../grafika/tlo_4.png');
}
 
.piec{
    float: left;
  left: 80%;
  -ms-transform: matrix(1, 0, -0.3, 1, 150, 0);
  -webkit-transform: matrix(1, 0, -0.3, 1, 150, 0);
  transform: matrix(1, 0, -0.3, 1, 1, 0);
  width: 100%;
  height: 100%;
  z-index: 5;
     background-image: url('../grafika/tlo_5.png');
}
 
.text-hover{
  display: none;
}
.jeden:hover, .dwa:hover, .trzy:hover, .cztery:hover, .piec:hover{
  width: 30%;
  z-index:6;
}
 
.piec:hover{
 left: 75%;
}
 
.jeden:hover .text-hover, .dwa:hover .text-hover, .trzy:hover .text-hover, .cztery:hover .text-hover, .piec:hover .text-hover{
  display: block;
}

Bardzo proszę o pomoc.

0 
footer{
width: 100vw;
height: 100vh;
}
0
CeKa napisał(a):
footer{
width: 100vw;
height: 100vh;
}

Zbyt proste i niestety nie działa. W dodatku można stronę powiększać i pomniejszać.

0

W dodatku można stronę powiększać i pomniejszać.
No tak. Jak Ty sobie wyobrażasz "niepowiększanie i niepomniejszanie" strony?
Przecież każdy ma inny rozmiar ekranu.

0
Patryk27 napisał(a):

W dodatku można stronę powiększać i pomniejszać.
No tak. Jak Ty sobie wyobrażasz "niepowiększanie i niepomniejszanie" strony?
Przecież każdy ma inny rozmiar ekranu.

Tak jak tutaj:
http://whowasbetter.c0.pl/

  • tło jest nieruchome względem przeglądarki
    Udało mi się zrobić tak z jednym tłem, ale z paroma już mam problem.
0
GenerałXavi napisał(a):
Patryk27 napisał(a):

W dodatku można stronę powiększać i pomniejszać.
No tak. Jak Ty sobie wyobrażasz "niepowiększanie i niepomniejszanie" strony?
Przecież każdy ma inny rozmiar ekranu.

Tak jak tutaj:
http://whowasbetter.c0.pl/

  • tło jest nieruchome względem przeglądarki
    Udało mi się zrobić tak z jednym tłem, ale z paroma już mam problem.

Kod tamtej strony:

body{
	background-image: url(../grafika/background_strona_glowna.png);
	background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-position: center top;
	display: block;
	min-height: 100%;
	width: 100%;
	height: 100%;
	overflow: auto;
	margin-left: auto;
	margin-right: auto;
	background-repeat: no-repeat;
	background-attachment: fixed;
	margin: 0 auto;
	position: relative;
}
0
CeKa napisał(a):
GenerałXavi napisał(a):
Patryk27 napisał(a):

W dodatku można stronę powiększać i pomniejszać.
No tak. Jak Ty sobie wyobrażasz "niepowiększanie i niepomniejszanie" strony?
Przecież każdy ma inny rozmiar ekranu.

Tak jak tutaj:
http://whowasbetter.c0.pl/

  • tło jest nieruchome względem przeglądarki
    Udało mi się zrobić tak z jednym tłem, ale z paroma już mam problem.

Kod tamtej strony:

body{
	background-image: url(../grafika/background_strona_glowna.png);
	background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-position: center top;
	display: block;
	min-height: 100%;
	width: 100%;
	height: 100%;
	overflow: auto;
	margin-left: auto;
	margin-right: auto;
	background-repeat: no-repeat;
	background-attachment: fixed;
	margin: 0 auto;
	position: relative;
}

Próbowałem już zastosować ten kod, ale niestety nie mam pojęcia jak to zrobić, żeby działało w tym przypadku. Próbowałem to zastosować w samym body, ale również w konkretnych divach z tłem.

1

Wyjsc jest wiele:

background-size:cover

div:after{content:obraz;position:absolute}
0
bree napisał(a):

Wyjsc jest wiele:

background-size:cover

div:after{content:obraz;position:absolute}

Mógłbyś rozwinąć swoją wypowiedź? Bo za bardzo nie rozumiem co i jak, gdzie mam dać.

0

Sorry, pisałem z telefonu - stąd mocno okrojona część merytoryczna;)
Zobacz: https://fiddle.jshell.net/9o2yx0bm/1/

Drugi sposób nie da Ci zamierzonego efektu.

1 użytkowników online, w tym zalogowanych: 0, gości: 1