Automatyczne dostosowywanie tła do rozdzielczości?

[wojtekk86]

Witam

 

Mam takie pytanie może ktoś się już z tym spotkał czy istnieje jakiś moduł albo jak zmodyfikować kod żeby tło na stronie sklepu dostosowywało się automatycznie do rozdzielczości. Z góry dziękuje wszystkim za pomoc.

[vekia]

potrzeba więcej informacji, co chcesz osiągnąć? sądzę, że coś w stylu:

 

w tle masz obraz który jest np. szeroki na 2000px

 

gdy ktoś wejdzie na stronę z rozdzielczością 1200px; chcesz aby ten obrazek był automatycznie ustawiony na 1200px; czyli aby dopasował się do szerokości ekranu

 

tak?

[wojtekk86]

Strona na rozdzielczosci 1600x900 wyglada ok i obrazek tla jest widoczny ale na rozdzielczosci 800x600 juz nie ma tla albo jest tylko troche tla www.nonitojestto.pl

[vekia]

-webkit-background-size: cover;

-moz-background-size: cover;

-o-background-size: cover;

background-size: cover;

 

te style zwykle dla tła rozwiązują problem, ale z tego co widzę u Ciebie tło jest również jakby "częścią" strony, w sensie masz wydzielony biały "blok" na treść

 

z tym może być problem

[wojtekk86]

Czyli te style sprobowac zastosowac w global.css?

[vekia]

dokładniej rzecz ujmując do:

body {
background-attachment: fixed;
background-image: url("http://nonitojestto.pl/img/log.jpg");
background-position: center top;
background-repeat: repeat-y;
font-size: 11px;
font-family: Verdana, Arial, Helvetica, Sans-Serif;
color: #5d717e;
text-align: center;
}

 

ale w związku z tym, że u ciebie tło stanowi również podkład pod zawartość strony - to rozwiązanie się nie sprawdzi bowiem manipuluje ono szerokością obrazu (wówczas biały podkład będzie węższy)

[wojtekk86]

Czyli nie da rady a żeby tło się automatycznie dostosowywało pod ustawioną rozdzielczość.

[vekia]

w Twoim przypadku rozwiązałbym to nieco inaczej.

 

tło pozostawiłbym zielone (tylko zielone bez tego białego podkładu) ze stylami które zasugerowałem, wówczas cały czas butelki będą widoczne (tło będzie dopasowane do szerokości ekranu)

 

następnie dla #page

1. dodał do styli css: padding-left:20px; padding-right:20px;
   
2. oraz tło o szerokości 1020px (980+20+20)
   możesz utworzyć obrazek 1020px szerokości 1px wysokości i dać mu repeat-y w stylach css (zmieniszy to rozmiar pliku i to znaaacznie)
   

 

i wszystko będzie działać tak jak tego oczekujesz

[wojtekk86]

A mogłbys mi pomoc bo nie zabardzo wiem jak mam to zrobic tzn jak mam teraz zmienic ten kod?

[vekia]

pewnie, zróbmy to po kolei, krok po kroku

 

najpierw jesli mozna przygotuj:

1) tło, wyłącznie zielone - czyli usuń ten biały podkład

2) załaduj je na serwer

3) następnie w pliku global.css (zlokalizowany w katalogu z Twoim szablonem) około linii 15 zmień body na:

 

body {
background-attachment: fixed;
background-image: url("http://nonitojestto.pl/img/log.jpg");
background-position: center top;
background-repeat: repeat-y;
font-size: 11px;
font-family: Verdana, Arial, Helvetica, Sans-Serif;
color: #5d717e;
text-align: center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

 

 

kolejny krok po wprowadzeniu powyższych zmian

[wojtekk86]

Ok zrobione

[vekia]

ok

 

to teraz:

 

w pliku global.css masz:

#page {
width: 980px;
margin: 0 auto 2px auto;
text-align: left;
}

 

zmień to na:

 

#page {
width: 980px;
margin: 0 auto 2px auto;
text-align: left;
padding: 0px 25px;
background: url('http://i.imgur.com/7Uk2XiW.png') repeat-y;
}

 

dokładnie rzecz ujmując, na koncu dodałem ten kod:

padding: 0px 25px;
background: url('http://i.imgur.com/7Uk2XiW.png') repeat-y;

 

http://i.imgur.com/7Uk2XiW.png - to jest obrazek tła który dla Ciebie utworzyłem, zgraj go gdzieś do siebie na serwer i podmień ten url na własny (może sie tak zdarzyć, że imgur po prostu to usunie)

[wojtekk86]

Wielkie dzięki za pomoc

[vekia]

daj znać jak wprowadzisz zmiany, jak narazie tylko główne zielone tło jest ok

[wojtekk86]

Ale reszte zmian tez wprowadzilem czyli:

 

body {

background-attachment: fixed;

background-image: url("http://nonitojestto.pl/img/log.jpg");

background-position: center top;

background-repeat: repeat-y;

font-size: 11px;

font-family: Verdana, Arial, Helvetica, Sans-Serif;

color: #5d717e;

text-align: center;

-webkit-background-size: cover;

-moz-background-size: cover;

-o-background-size: cover;

background-size: cover;

}

[vekia]

a zmiana dla #page ?

[vekia]

faktycznie, musiałem przeczyścic cache przeglądarki, teraz widzę

[matt37137]

Witam, jeśli ktoś potrzebuje tak jak ja, tła na całą stronę, na wszystkich przeglądarkach, to zapraszam do przeczytania

 

Vekia Twój sposób z

-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;

 

działa, ale tylko na nowszych przeglądarkach. Na ie8, nawet na windows phone 8 i androidzie już ma problemy. Na szczęście udało mi się znaleźć rozwiązanie na tej stronie! http://css-tricks.com/perfect-full-page-background-image/

 

Skorzystałem z rozwiązania numer 2 css only:

 

wystarczyło wkleić w header.tpl tą drugą linijkę z tego kodu

		<div id="page" class="container_9 clearfix">
<img src="twojbackground.jpg" id="jakies-id-z-bg" alt="">
			<!-- Header -->
			<div id="header" class="grid_9 alpha omega">

Oraz w global.css w sekcji "generic style" zaraz po body

#jakies-id-z-bg {
  position: fixed; 
  top: 0; 
  left: 0; 
	
  /* Preserve aspet ratio */
  min-width: 100%;
  min-height: 100%;
}

Nie mam pojęcia czy wkleiłem w dobrych miejscach, ale działa jak marzenie