Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

> [inne][JavaScript][CSS]Wyłączenie pomniejszania tła.
Generic
post
Post #1





Grupa: Zarejestrowani
Postów: 224
Pomógł: 0
Dołączył: 31.10.2012

Ostrzeżenie: (10%)
X----

Witam. Od pewnego czasu kombinuje kody i poszukuje ich aby wyłączyć pomniejszenie powtarzającego się tła, które pomniejsza się za pomocą pomniejszenia w przeglądarce. Chcę je wyłączyć gdyż po pomniejszeniu bardzo brzydko wygląda wizualnie. Chodzi mi o coś takiego tylko żeby nie maksymalizowało mi tła tylko je powtórzyło ileś tam razy aż wypełni całą przestrzeń przeglądarki. :

html {
background: url(images/bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}


Z góry dziękuję i czekam na wypowiedzi. Pozdrawiam.

Ten post edytował Generic 18.11.2012, 23:57:42
Go to the top of the page
+Quote Post
 
 Start new topic
Odpowiedzi
b4rt3kk
post
Post #2





Grupa: Zarejestrowani
Postów: 1 933
Pomógł: 460
Dołączył: 2.04.2010
Skąd: Lublin

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

Zaintrygował mnie Twój problem, tak więc posiedziałem troszkę, pomyślałem i oto efekty.

index.html

[HTML] pobierz, plaintext 
  1. <!DOCTYPE html>
  2. <html lang="pl">
  3. <head>
  4. <meta charset="utf-8" />
  5. <script type="text/javascript" src="http://code.jquery.com/jquery-latest.pack.js"></script>
  6. <script type="text/javascript">
  7. $(function(){
  8. 	$('.button').click(function(){
  9. 		var originalWidth = 1904;
  10. 		var width = $('body').width();
  11. 		var size = 100;
  12.                 alert(width);
  13. 		zoom = originalWidth/width;
  14. 		newSize = size/zoom;
  15. 		$('body').css('background-size', newSize+'px');
  16. 	});
  17. });
  18. </script>
  19. <link rel="Stylesheet" type="text/css" href="style.css" />
  20. </head>
  21.  
  22. <body>
  23. <div>
  24. <a href="#" class="button">Klik</a>
  25. </div>
  26. </body>
[HTML] pobierz, plaintext


style.css

[HTML] pobierz, plaintext 
  1. body {
  2. 	background: transparent url('img.png') top left repeat;
  3. 	background-size: 100px;
  4. }
[HTML] pobierz, plaintext


img.png

(IMG:http://img593.imageshack.us/img593/3558/imgtv.png)

No i po kliknięciu obrazek tła dopasowuje się tak by jego wielkość była taka sama niezależnie od przybliżenia. Jedyne co musisz wpisać to oryginalną szerokość (taką w jakiej obrazek tła wygląda dobrze, czyli przy przybliżeniu 100%), pod zmienna orginalWidth oraz oryginalny rozmiar obrazka, pod zmienna size. Jest tam linijka alert(width), możesz ją usunąć, ale ma ona na celu podanie Ci szerokości okna, którą masz wpisać pod orginalWidth na samym początku (przy przybliżeniu 100%).
Go to the top of the page
+Quote Post

Posty w temacie
- Generic   [inne][JavaScript][CSS]Wyłączenie pomniejszania tła.   18.11.2012, 23:41:46
- - Pawel_W   wystarczy usunąć background-size, i no-repeat zami...   19.11.2012, 01:02:05
- - Generic   html { background: url(2.png) repeat center ...   20.11.2012, 15:29:36
- - b4rt3kk   A możesz jakiegoś screena dać na którym przedstawi...   20.11.2012, 15:38:41
- - Generic   Witam. Jak na zdjęciu poniżej mam powtarzanie repe...   20.11.2012, 23:04:10
- - b4rt3kk   A to kolego obawiam się, że troszkę się narobisz. ...   20.11.2012, 23:45:37
- - Generic   Heh nie ma na to jakiegoś innego sposobu bo nie uk...   20.11.2012, 23:53:57
- - b4rt3kk   Zaintrygował mnie Twój problem, tak więc posiedzia...   21.11.2012, 00:46:59

« Następny starszy · Przedszkole · 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: 27.12.2025 - 18:29
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn