Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
 Reply to this topicStart new topic
> [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
Pawel_W
post
Post #2





Grupa: Zarejestrowani
Postów: 1 675
Pomógł: 286
Dołączył: 15.06.2009
Skąd: Wieliczka

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

wystarczy usunąć background-size, i no-repeat zamienić na repeat
Go to the top of the page
+Quote Post
Generic
post
Post #3





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

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

html {
background: url(2.png) repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
}


Poprawiłem kod i tylko mi zmaksymalizowało obrazek. Musi też się powtarzać.

Wie ktoś jak można rozwiązać ten problem?

Poszukuję po prostu kodu, który pozwoli mi aby nie powtarzało mi obrazka w nieskończoność tylko po prostu 10-20 razy.

Czy naprawdę nikt nie wie jak to zrobić? Jest mi to pilnie potrzebne!
Go to the top of the page
+Quote Post
b4rt3kk
post
Post #4





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

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

A możesz jakiegoś screena dać na którym przedstawiłbyś to co masz, a co chciałbyś osiągnąć?
Go to the top of the page
+Quote Post
Generic
post
Post #5





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

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

Witam. Jak na zdjęciu poniżej mam powtarzanie repeat przez które jak z mniejsze powiększenie to widać powtarzanie przez co tło jest bardzo brzydkie. Chciałbym zrobić tak aby tło się nie zmniejszało tylko zmniejszały się layoty. Nie wierzę że nie ma na to jakiegoś rozwiązania.

(IMG:http://zapodaj.net/images/1cbc65a38e8bb.png)

Witam. Po woli dochodzę do wniosku że jest to na mój sposób nie możliwe więc postanowiłem zapytać was o prostszą opcje. Moglibyście mi powiedzieć jak zablokować zmniejszanie tła? Chodzi mi o to aby tło zostawało a zmniejszał się tylko layot strony.

Ten post edytował Generic 20.11.2012, 20:23:19
Go to the top of the page
+Quote Post
b4rt3kk
post
Post #6





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

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

A to kolego obawiam się, że troszkę się narobisz. Zacząłbym od wykrycia poziomu przybliżenia, ten temat będzie pomocny:

http://stackoverflow.com/questions/1713771...modern-browsers

A później w zależności od tego dopasował wielkość obrazka tła.
Go to the top of the page
+Quote Post
Generic
post
Post #7





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

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

Heh nie ma na to jakiegoś innego sposobu bo nie ukrywam że będzie trzeba noce zarywać nad tym (IMG:style_emoticons/default/smile.gif) ?
Go to the top of the page
+Quote Post
b4rt3kk
post
Post #8





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
« 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: Standardowy · Przełącz na: Linearny+ · Przełącz na: Drzewo

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

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