Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

> Parallax page - tło obrazkowe
lukasheek88
post
Post #1





Grupa: Zarejestrowani
Postów: 91
Pomógł: 0
Dołączył: 16.11.2011

Ostrzeżenie: (0%)
-----

Witajcie serdecznie,

przymierzam się do stworzenia, strony przewijanej w dół. Strona ma 4 sekcje. Każda sekcja jako tło ma obrazek szerokość 1400 px i wysokość 760px;

Zastanawiam się jak powinienem potraktować to tło, by w zależności od wielkości okna przeglądarki tło było wyświetlone na całym ekranie.

Kod CSS

[HTML] pobierz, plaintext 
  1. html, body {
  2.     margin: 0px;
  3.     padding: 0px;
  4.  
  5. }
  6.  
  7. section {
  8. 	height:740px;
  9. }
  10.  
  11. #first {
  12.     background: url('../img/sekcja_1.gif') scroll no-repeat;
  13. }
  14.  
  15. #second {
  16.     background: url('../img/sekcja_2.gif') scroll no-repeat;
  17. }
  18.  
  19. #third {
  20.     background: url('../img/sekcja_3.gif') scroll no-repeat center center;
  21. }
  22.  
  23. #foruth {
  24.     background: url('../img/sekcja_4.gif') scroll no-repeat center center;
  25. }
[HTML] pobierz, plaintext


Kod HTML

[HTML] pobierz, plaintext 
  1. <body>
  2.         <section id="first" class="anchor">
  3.  
  4.         </section>
  5.  
  6.         <section id="second" class="anchor">
  7.  
  8.         </section>
  9.  
  10.         <section id="third" class="anchor">
  11.  
  12.         </section>
  13.  
  14.         <section id="foruth" class="anchor">
  15.  
  16.         </section>
  17.  
  18.         <nav id="sidenav">
  19.             <ul>
  20.                 <li><a href="#first">1</a></li>
  21.                 <li><a href="#second">2</a></li>
  22.                 <li><a href="#third">3</a></li>
  23.                 <li><a href="#foruth">4</a></li>
  24.             </ul>
  25.         </nav>
  26.  
  27.     </body>
[HTML] pobierz, plaintext
Go to the top of the page
+Quote Post
 
 Start new topic
Odpowiedzi
Arcioch
post
Post #2





Grupa: Zarejestrowani
Postów: 324
Pomógł: 110
Dołączył: 18.09.2012

Ostrzeżenie: (0%)
-----

Jeżeli wiesz jakie proporcję i wymiary ma obrazek to kombinacja media queries oraz background-size: contain tak mi się wydaje (IMG:style_emoticons/default/smile.gif)
Inaczej to js i liczenie pixeli.
Go to the top of the page
+Quote Post

Posty w temacie
- lukasheek88   Parallax page - tło obrazkowe   24.03.2016, 22:27:31
- - Arcioch   Ja używam tego do robienie full page http://alvar...   24.03.2016, 23:11:16
- - lukasheek88   A jak postąpić w takiej sytuacji: Mam tło obrazkow...   25.03.2016, 13:22:15
- - Arcioch   Jeżeli wiesz jakie proporcję i wymiary ma obrazek ...   25.03.2016, 14:44:10
- - lukasheek88   Mam jeszcze jedno pytanko, czy stworzenie "dł...   25.03.2016, 15:10:06

« Następny starszy · CSS · Następny nowszy »
 

Reply to this topicStart new topic
2 Użytkowników czyta ten temat (2 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 

Tryb wyświetlania: Przełącz na: Standardowy · Przełącz na: Linearny+ · Drzewo

Śledź ten temat · Wyślij temat na e-mail · Wydrukuj ten temat · Subskrybuj to forum

RSS Aktualny czas: 3.10.2025 - 17:18
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn