Share This

Obrazki tła kojarzą mi się bardziej ze starym stronkami html'owymi i ich duplikowaniem. Co to były za czasy kiedy efekciarski deseń pojawiał się w wielu stronach www. Ostatnie lata to flat design i zimne, proste do bólu strony internetowe - tła strony jeśli się pojawiają to raczej jako duże obrazki. Wstawienie dużego obrazu tła o szerokości full hd - 1920px to nie problem - jednak czasem będzie on niepotrzebnym obciążeniem dla strony www - na przykład kiedy będziemy przeglądać ją na smartfonie.



1. W Gantry 5 obrazek tła strony możemy wstawić z poziomu zaplecza szablonu - możemy także określić jego wymiary, sposób wyświetlania i czy ma się duplikować.



2. Możemy to zrobić także zrobić po staremu dodając do pliku custom.scss kilka linijek kodu

#g-page-surround {
  color: #777;
  background-color: #fff;
  background-image: url('../../images/bg.jpg?5a46538b');
  background-repeat: no-repeat !important;
  background-size: auto !important;
  background-attachment: scroll;
}


Warto jednak pamiętać o jednej ważnej rzeczy - jeśli wstawiamy w tło naszej strony obrazek o dużych rozmiarach a także dużej wadze to nie jest on nam potrzebny kiedy strona wyświetlana jest na smartfonach. Projektując strony internetowe Lublin na Joomla i Gantry 5 staram się ograniczać optymalizację strony do konkretnych rozdzielczości do absolutnego minimum. Są jednak rzeczy które warto wyłączyć na ekranach smartfonów i tu właśnie mamy taki przypadek.

Projektuję strony www Lublin na Joomla

Za pomocą Media Queries i szablonu Gantry 5 wyświetlanie grafiki tła możemy definiować na dwa sposoby.

Pierwszy sposób to dodanie tła za pomocą szablonu jak na powyższym screenie a wyłączenie go w wybranych rozdzielczościach za pomocą Media Queries w custom.scss

______________
@import "dependencies";
// typically min 75rem
@include breakpoint(large-desktop-range) {
 
}
// typically range 60rem to 74.938rem
@include breakpoint(desktop-range) {
 
}
 
// typically 48rem to 59.938rem
@include breakpoint(tablet-range) {
 
}
// typically 30rem to 47.938rem
@include breakpoint(large-mobile-range) {
#g-page-surround {
  background-image: none;
}
}
// typically max 30rem
@include breakpoint(small-mobile-range) {
#g-page-surround {
  background-image: none;
}
}
___________________



Drugi sposób to użycie tylko Media Queries w custom.scss już bez dodawania pliku tła w zapleczu szablonu. Może to wyglądać tak:

______________
@import "dependencies";
// typically min 75rem
@include breakpoint(large-desktop-range) {
#g-page-surround {
  color: #777;
  background-color: #fff;
  background-image: url('../../images/bg.jpg?5a46538b');
  background-repeat: no-repeat !important;
  background-size: auto !important;
  background-attachment: scroll;
}
}
// typically range 60rem to 74.938rem
@include breakpoint(desktop-range) {
#g-page-surround {
  color: #777;
  background-color: #fff;
  background-image: url('../../images/bg.jpg?5a46538b');
  background-repeat: no-repeat !important;
  background-size: auto !important;
  background-attachment: scroll;
}
}
// typically 48rem to 59.938rem
@include breakpoint(tablet-range) {
 
}
// typically 30rem to 47.938rem
@include breakpoint(large-mobile-range) {

}
// typically max 30rem
@include breakpoint(small-mobile-range) {

}
___________________


Oczywiście dla każdej rozdzielczości ekranu możemy użyć innego - o innej wielkości, a nawet formacie (.jpg, .png) - pliku graficznego a także zmienić jego sposób wyświetlania.


Pamiętajmy także że Gantry 5 jest wyjątkowo wrażliwe na wszelkie błędy w kodzie - które objawiają się w ten sposób.

Przydało się? - Udostępnij

Blog - popularne

Akeeba Kickstart - czyli jak przywrócić stronę internetową Joomla 3 z kopii zapasowej Akeeba Backup

Przenosimy stronę na CMS joomla na inny serwer. Mając wykonaną za pomocą Akeeba Backup kopię strony www możemy ją przenieść w krótkim czasie na dowolny serwer. Czas wysyłania na serwer rozpakowanych...
Czytaj dalej

Specified key was too long; max key length is 767 bytes - błąd podczas przywracania strony za...

Klient poprosił mnie o zwiększenie wersji PHP do najnowszej wersj PHP 7.2. Przy stronach firmowych najczęściej nie wykonuję takich operacji z automatu tylko staram się na początek sprawdzić czy jest...
Czytaj dalej

Jak zrobić banner slideshow w joomla 3 - dodatek Roksprocket dla strony www na joomla

Roksprocket dla Joomla czyli jak zrobić banner dla naszej strony internetowej na joomla. Roksprocket do moduł którego wersja występuje także dla wordpressa. Można za jego pomocą wykonać nie tylko...
Czytaj dalej

Jak dodać firmę do Google Maps

Tworząc firmową stronę internetową prawie zawsze umieszczamy na niej mapę z lokalizacją firmy. Czasy statycznych map graficznych minęły dawno temu. Teraz najczęściej szukamy firm na google które ma...
Czytaj dalej

Jak wykonać przekierowanie DNS domeny zarejestrowanej na home.pl na serwer nazwa.pl - na którym...

Przekierowanie DNS wykonujemy kiedy domenę zarejestrowaliśmy w jednej firmie, a hosting dla naszej strony internetowej wykupiliśmy w innej. Dzisiaj pokażę jak przekierować domenę zarejestrowaną na...
Czytaj dalej

WordPress - jak wykonać kopię zapasową strony www na WordPress za pomocą Akeeba Backup

WordPress podobno nie sprawia problemów, ale dmuchając na zimne - kopię strony www należy wykonać jeśli zależy nam na bezpieczeństwie naszych danych. Akeeba Backup to narzędzie które powstało jako...
Czytaj dalej

Jak dodać film z youtube stronę www na joomla - dodatek AllVideos od Joomla Works

Niezbyt często korzystam w wykonywanych stronach www z możliwości osadzania w nich wideo. Jeśli klienci mają przygotowane materiały wideo warto je wykorzystać nie tylko z powodu lepszego zapoznania...
Czytaj dalej

Akeeba Backup - jak wykonać kopię strony www na CMS Joomla 3

Akeeba Backup pozwala na tworzenie kopii na wszystkich wersjach joomla - tu w wersji dla Joomla 3 Mając stronę internetową utrzymywaną na dobrym hostingu nie musimy martwić się o wykonywanie kopii...
Czytaj dalej

Przezroczystość w plikach PNG - jak zapisać plik z PNG z przezroczystością w Adobe Photoshop dla...

Format .png to drugi w kolejności po .jpg format plików graficznych wykorzystywany w czasie tworzenia stron internetowych. Oczywiście większość użytkowników internetu najbardziej kojarzy .jpg bo w...
Czytaj dalej