Wstawienie Zdjęcia Na Tło

[jogi109]

Witam

Jak wrzucić gotowe zdjęcie lub grafikę na tło w całym sklepie? W jakim rozmiarze zamieścić i jakim rozszerzeniu, by pasowało i nie obciążało ładowania strony?

[() Maciej ()]

Wszystko zależy od tego co jest na zdjęciu i jaki jest rozmiar. Uniwersalnych wymiarów nie ma, bo każdy komputer to inna rozdzielczość. Możesz albo dać stałej wielkości grafikę, albo bawić się w pisanie skryptów, które testują rozdzielczość i na tej podstawie dobierają odpowiednią grafikę. Rozszerzenie nie ma wielkiego znaczenia. Można użyć praktycznie każdego popularnego formatu biorąc pod uwagę plusy i minusy danego rozszerzenia. Najczęściej stosowane są jpg lub gif (ze względu na kompresję), a png, tiff ze względu na jakość kosztem rozmiaru (grafiki nie skompresowane).

Niestety ale każde tło spowalnia ładowanie strony. Tu wszystko zależy od użytej grafiki i jej rozmiaru. Wiadomo im większa grafika i większy rozmiar, tym wolniejsze ładowanie strony.

[krzysiek_web]

Rozszerzenie jpg po kompresji. Wielkość hmm zależy od zdjęcia jeżeli jest to powtarzający się symbol to jak najmniejsze.

 

Obrazek dodajesz w stylu css.

 

body {

background: url('./img/obrazek.jpg');

}

 

Należy oczywiście ustawić go jeszcze przez repeat.

No i na koniec pewne sekcje szablonu mają zapewne białe tło też trzeba będzie się tym zająć.

[jogi109]

A tak dokładniej to gdzie umieścić ten kod co podałeś? Co to znaczy przez repeat?

[() Maciej ()]

Podstawy CSS się kłaniają. Chwila szukania u wujka googla https://www.google.pl/search?q=REPEAT+CSS&oq=REPEAT+CSS&aqs=chrome..69i57.5136j0j1&sourceid=chrome&ie=UTF-8

 

Repeat to sposób powielania obrazka. W zależności od użytego parametru :

gdzie background-repeat przyjmuje jedną z wartości

repeat-x | repeat-y | no-repeat | inherit

 

 

Np. (poniższy kod wstawi obrazek paper.gif oraz powtórzy go na osi OY : 

body {
  background-image: url("paper.gif");
  background-repeat: repeat-y;
}

Jak dobrze pamiętam da się to ustawić poprzez plik global.css.

[jogi109]

Oczywiście wszystkie edycje w pliku global.css w folderze z szablonem?

[krzysiek_web]

Tak.

Nie zapomnij przed sprawdzaniem zmian włączyć kompilację szablonu w sekcji wydajność.

[jogi109]

Kurcze, ale w tym pliku jest wiele miejsc z body. To będzie linia około 241? Presta 1.6.1

[() Maciej ()]

Jak nie wiesz gdzie dokładnie dopisać to dopisz ten kod dokładnie tak jak Ci podałem wyżej na samym początku pliku. Nie będzie to zbyt eleganckie programistycznie, ale będzie miało odpowiedni efekt.

 

Oczywiście zmieniasz sobie nazwę obrazka i właściwość repeat wg potrzeb.

[jogi109]

Bez zmian. Kompilacja szablonu włączona, czyszcze pamięć podręczną. Wszystko w kat. funkcjonalność css włączone. Obrazek w głównym katalogu na serwerze. Jak narazie udało mi się tylko zmienić kolor czcionki przez plik global. Na zmiany background nie reaguje.

Edited February 5, 2016 by jogi109 (see edit history)

[jogi109]

Wyłączyłem funkcjonalność CCC i zaczęły pojawiać się zmiany. Obrazka nie wczytuje, ale kolor zmieniłem. Jednak zmienił się na całości, a ja bym chciał tylko na bokach.

[() Maciej ()]

Odpal sobie w chrome tryb "narzędzia dla programistów" lub w firefoxie "Firebug" i sprawdź nazwę kontenera w którym chcesz mieć wstawione tło.

Potem odszukaj go w global.css i dopisz polecenie background.

Oba są o tyle fajne, że będziesz mógł na żywo podmienić sobie część kodu i zobaczyć jak wygląda.

 

Wcześniej nie napisałeś nic o tym jak się ono ma wyświetlać, więc uznałem że chodzi o tło ogólne pod całą stroną.

Odświeżanie strony robisz poprzez wciśnięcie CTRL+F5 (czyści wszystko z cache i ładuje stronę na nowo).

[jogi109]

Mam to już. Ale jak zaznaczę całą środkową część, to pod nią podmienię tylko tło. A chcę wszsytko, poza tą środkową częścią

[jogi109]

Próbuje bez efektu. JPG w folderze themes/default-bootstrap/img.

 

.columns-container {

  background-image: url('./img/image4144.jpg");

  background-repeat: repeat-y; }

 

I taki efekt:

[() Maciej ()]

Do takiego efektu musisz mieć 2 rzeczy

- Klasa container musi mieć tło ustawione (prawdopodobnie biały kolor, czyli

background-color: #FFF;

- klasa columns-container ma mieć ustawioną grafikę

.columns-container {
  background-image: url('../img/image4144.jpg");
  background-repeat: repeat-y; }

Pod warunkiem, że poprawnie zaadresowałeś katalog z obrazkiem. A u Ciebie jest babol, bo dałeś 1 kropkę zamiast 2.

[jogi109]

.container {

  background-color: #FFF;

  margin-right: auto;

  margin-left: auto;

  padding-left: 15px;

  padding-right: 15px; }

  .container:before, .container:after {

    content: " ";

    /* 1 */

    display: table;

    /* 2 */ }

  .container:after {

    clear: both; }

 

 

.columns-container {

  background-image: url('../img/image4144.jpg");

  background-repeat: repeat-y; }

 

efekt masz widoczny na freestylesport24.pl

[() Maciej ()]

hmm... coś jeszcze nie tak jest jak trzeba. Pod górną częścią strony nie masz nic (ale tam jest już header-container więc trzeba by się bawić w ustawienie tła na columns-containter względem wyższego kontenera). Lub też ustawić tło do ID=page dopisując osobną klasę w global.css.

Tak samo na ok 50-60 px od prawej strony masz puste miejsce... ale tu przyznam, że nie mam pojęcia czemu tak sie dzieje.

[jogi109]

Za dużo z tym roboty. Zostawiam jak było. Ale dzięki za poświęcenie

[jogi109]

Cóż....troche sie pozmieniało  

Mam tylko problem, bo jak powiększam lub zmniejszam, to górne menu sie rozjeżdża. Ktoś coś poradzi?

[() Maciej ()]

Powiększasz lub zmniejszasz co ? Rozmiar tekstu ? Samo menu ?

[jogi109]

Po prostu powiększam stronę w przeglądarce. Niezależnie czy chrome czy mozilla

[() Maciej ()]

Każda strona przy powiększaniu się rozjedzie. Musiałbyś skalować każdy element na stronie żeby nie mieć problemów z rozjechaniem strony.

[jogi109]

Musi być jakiś sprosty sposób. Niezbyt elegancko to wygląda, a każdy ma inne powiększenie strony

 

PS. Jakby ktoś chciał poptarzeć w kod css to wyłączne "funkcje CCC"- będzie widać która linia

Edited February 6, 2016 by jogi109 (see edit history)

[() Maciej ()]

Jak dla mnie opcje masz 2.

Przebudowa menu tak by po wciśnięciu CTRL+0 strona wyglądała odpowiednio (np wyciągnięcie Kontakt do górnego paska koło przycisku "zaloguj się")

Zmniejszenie wielkości czcionek w menu lub ich marginesów bocznych. Zwęzi to menu i efekt będzie taki sam jak wyżej.

 

Inna ewentualność to w pełni responsywny szablon, ale to już wyższa szkoła jazdy i dużo więcej pracy.