Forum PHP.pl > [inne][JavaScript][CSS]Wyłączenie pomniejszania tła.

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: [inne][JavaScript][CSS]Wyłączenie pomniejszania tła.

Generic

18.11.2012, 23:41:46

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.

Pawel_W

19.11.2012, 01:02:05

wystarczy usunąć background-size, i no-repeat zamienić na repeat

Generic

20.11.2012, 15:29:36

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!

b4rt3kk

20.11.2012, 15:38:41

A możesz jakiegoś screena dać na którym przedstawiłbyś to co masz, a co chciałbyś osiągnąć?

Generic

20.11.2012, 23:04:10

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.

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.

b4rt3kk

20.11.2012, 23:45:37

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.

Generic

20.11.2012, 23:53:57

Heh nie ma na to jakiegoś innego sposobu bo nie ukrywam że będzie trzeba noce zarywać nad tym

b4rt3kk

21.11.2012, 00:46:59

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

index.html

[HTML] pobierz, plaintext 
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="utf-8" />
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.pack.js"></script>
<script type="text/javascript">
$(function(){
	$('.button').click(function(){
		var originalWidth = 1904;
		var width = $('body').width();
		var size = 100;
                alert(width);
		zoom = originalWidth/width;
		newSize = size/zoom;
		$('body').css('background-size', newSize+'px');
	});
});
</script>
<link rel="Stylesheet" type="text/css" href="style.css" />
</head>
 
<body>
<div>
<a href="#" class="button">Klik</a>
</div>
</body>
[HTML] pobierz, plaintext

style.css

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

img.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%).

To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.