Ustawienie tła

[kaczor18]

witam mam problem z ustawieniem tła w moim sklepie. Tzn niemogę sobię poradzić z ustawieniem zdjęcia jako tła.

 

oto jaki wpis dodaję do pliku global:

 

body{
    font:normal 11px/14px Arial, Verdana, sans-serif;
    color:#222;
    background:#FFF url('http:/www.lidia-horti.pl/sklep/themes/greenstore/img/nowetlo.jpg') center top no-repeat
}

 

gdzie może twić przyczyna?

 

 

[vekia]

pytanie co nie działa, bo wchodząc na stronę wszystko jest ok, tło jest nieruchome i wygląda DOSKONALE

[tyszek]

W sklepie nie działa : http:/www.lidia-horti.pl/sklep/

 

tylko jeszcze nie widzę dlaczego ;/

 

EDIT:
Jak w sklepie biorę pokaż obrazek tła, to mi wywala jakąś dziwną ścieżkę http://www.lidia-horti.pl/www.lidia-horti.pl/sklep/themes/greenstore/img/nowetlo.jpg

Edited November 25, 2013 by tyszek (see edit history)

[kaczor18]

wywala bo tam wrzucilem obrazek tła:)

oczywiscie chcę aby wyswietlalo to się również w sklepie

Edited November 25, 2013 by kaczor18 (see edit history)

[wzr1one]

To wywal z "url..." początek i będzie po sprawie?  

 

http://i.imgur.com/X60zfyS.jpg

 

1. background: #FFFurl('/sklep/themes/greenstore/img/nowetlo.jpg') center top no-repeat;

 

[kaczor18]

niestety nie działa

[vekia]

teraz kod wygląda tak 

 

#FFFurl('/sklep/themes/greenstore/img/nowetlo.jpg') center top no-repeat

 

 

musi spacja pomiędzy FFF a URL

[kaczor18]

ok super nie mniej jednak zrezygnowałem z tego tła:)

[vekia]

szkoda bo było fajnie, moim zdaniem

[kaczor18]

Może i tak ale tło było za krótkie do sklepu i dziwnie wyglądało:)

[wzr1one]

A dodaj takie rzeczy do kodu 

body {

 

 

1. background: #FFF url('/sklep/themes/greenstore/img/nowetlo.jpg') center top no-repeat;
2. background-repeat: no-repeat;
3. background-attachment: fixed;

}

 

I sprawdź jak to wygląda, bo wg mnie jest świetnie

[kaczor18]

Ok w takim razie jak zrobić aby tło nie przebijało środka sklepu???

Oraz jak zrobić aby tło stało w miejscu a środek tylko jeździł? na sklepie mam tak www.lidia-horti.pl/sklep

a chcę mieć tak www.lidia-horti.pl

Edited December 6, 2013 by kaczor18 (see edit history)

[kaczor18]

ok teraz jest zajebiście:d

Edited December 6, 2013 by kaczor18 (see edit history)

[kaczor18]

Ok jak teraz zrobić aby sam środek był  cały biały? bo napisów nie widać
 

[wzr1one]

Ok w takim razie jak zrobić aby tło nie przebijało środka sklepu???

Oraz jak zrobić aby tło stało w miejscu a środek tylko jeździł? na sklepie mam tak www.lidia-horti.pl/sklep

a chcę mieć tak www.lidia-horti.pl

 

 

Szczerze powiem, że nie jestem pewien ale w seo&url's popróbuj zrobić coś takiego - Domena sklepu lidia-horti.pl

 

 

Domena SSL lidia-horti.pl

 

 

URI bazowy /sklep/

[wzr1one]

^{Global.css linia 45}

 

^{#center_column {}

background-color: #f2f2f2 <- kolor szarawy możesz zmienić na #fff jeżeli Ci się nie podoba

 

}

[kaczor18]

 

Szczerze powiem, że nie jestem pewien ale w seo&url's popróbuj zrobić coś takiego - Domena sklepu lidia-horti.pl

 

 

Domena SSL lidia-horti.pl

 

 

URI bazowy /sklep/

 

 

Nie nie o to mi chodziło..... to o co pisałem podałeś tu:

 

 

 

A dodaj takie rzeczy do kodu 

body {

 

 

1. background: #FFF url('/sklep/themes/greenstore/img/nowetlo.jpg') center top no-repeat;
2. background-repeat: no-repeat;
3. background-attachment: fixed;

}

 

I sprawdź jak to wygląda, bo wg mnie jest świetnie

 

 

Ale teraz chce zrobić aby środek ( tam gdzie produkty są było białe czy tez standardowe)

Edited December 6, 2013 by kaczor18 (see edit history)

[wzr1one]

Zobacz post wyżej a tamto to chodzi o domene sklepu

[kaczor18]

Nie o domenę mi chodziło kolego:D generalnie chodzi o to co jest na zdjęciu aby środek był szar:D

[vekia]

Ok jak teraz zrobić aby sam środek był  cały biały? bo napisów nie widać

 

#center_column {
background: #FFF;
}

global.css linia 45

 

dobrze będzie dodać "padding" bo treść będzie "na styk" z marginesami:

[kaczor18]

1. co to jest pedding?

teraz ma to sens tylko mam inny problem nie wszystko się wyświetla....

wrzucam zdjęcie

 

[wzr1one]

Ojej, nie ogarnąłem sorry, ale spinałem się z pisaniem między przerwami w dostawie prądu xD

Teraz dopiero doczytałem

[vekia]

product-list.css linia 172, zwiększ wartość height 

#product_list_grid li {
overflow: hidden;
margin-bottom: 14px;
padding: 10px;
border: 1px solid #eee;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
display: inline-block;
width: 153px;
height: 270px;
}

z 270px na 300px; powinno wystarczyć

[kaczor18]

jest ok a jak poprawić te przycięte teksty? tzn zwiększyć marginesy po bokach ? 

[vekia]

do #center_column dodaj padding:10px;

ale będziesz musiał gdzieś dodatkowe 20px znaleźć aby wszystko zmieściło się w jednej linii, np. w tych szparach pomiędzy blokami  (zmniejszyć margin o 10 )

[kaczor18]

cos nie mogę tego znaleźć... nakieruj mnie jak dokładnie i gdzie jest ten plik

[vekia]

global.css linia 45

#center_column {
background: #FFF;
padding: 10px;
}

dodałem padding:10px;

 

 

następnie:

- zamiana margin-right:20px; na margin-right:10px;

- jest to plik: http://www.lidia-horti.pl/sklep/themes/greenstore/css/grid_prestashop.css (linia ~19)

.grid_1, .grid_2, .grid_3, .grid_4, .grid_5, .grid_6, .grid_7, .grid_8, .grid_9 {
display: inline;
float: left;
position: relative;
margin-right: 20px;
}

efekt:

[qba_pl]

Pomocny tutorial z tego wyszedł!

Dziękuję

 

Ale przy okazji mam pytanie natury praktycznej: jaka wielkość tła (obrazka) jest najbardziej optymalna tak by na jakimś urządzeniu go nie zabrakło, ale żeby też nie było zbyt ciężkie?

[vekia]

tutaj temat jest dość skomplikowany.

jeżeli ma to być tło dla wszystkich urządzeń - lepej będzie skorzystać z tzw. media query

czyli ustawienie tła w zależności od parametrów urzadzenia (szerokość / wysokość)

 

media queries dla wielu urządzeń

 

jest jeszcze opcja na rozszerzenie tapety na 100% szerokości ekranu, niezależnie od tego na jakim urządzeniu (rozdzielczości) strona jest przeglądana.

  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;

[qba_pl]

Niedługo zabiorę się za tło i będę korzystał z opcji 2. 

Dziękuję!

[kaczor18]

umnie wszytsko działa   Dzięki kolego swoją drogą tutek wyszedł z tego zajebisty. pozdro Vekia:D