responzivne pozadie: Všeobecná podpora doplnkov

jany

Člen

Užívateľ

137

Odoslané pred 2 rokmi

#1

Pouzivam Czechia tema a mam nejaky takyto web (dam tu len screen, lebo web nie je public). V hlavicke som pouzil tento obrazok na pozadi. Ked idem na web cez smartfon, tak web sa zobrazuje responzivne co je OK, ale obrazok na pozadi sa zobrazi len ta cast, ktoru som oznacil cervenou ciarou (cize zobrazu sa len ta cast na lavo od cervenej ciary).
Je mozne nejak nastavit aby bol aj obrazok na pozadi responzivny ?

RobiNN

Hlavný administrátor

Management

1056

Odoslané pred 2 rokmi

#2

Konečne niekto kto vie zladiť farby

tuto tému už som videl všelijak upravenú a bolo to hrozne ale tato tvoja upráva nevyzerá zle

.

Skus toto

Kód Stiahnuť zdrojový kód

.theme-header {

 background: #2980b9 url(bg.png) no-repeat center;

 -webkit-background-size: cover;

 background-size: cover;

}

PHPFusion Development Manager
GitHub profil, PF-Projects/PF-Themes, PF-Projects/PF-Addons, PHPFusion/Addons

jany

Člen

Užívateľ

137

Odoslané pred 2 rokmi

#3

Teraz to mam tak

Kód Stiahnuť zdrojový kód

.theme-header {

 background: #2980b9 url(images/bg_main.jpg);

 background-attachment: fixed;

 padding: 15px 0;

}

Skusil som pridat bud toto

Kód Stiahnuť zdrojový kód

-webkit-background-size: cover;

alebo toto

Kód Stiahnuť zdrojový kód

background-size: cover;

A na mobile sa to zobrazuje OK, ale na PC sa to nepekne roztiahne.
Takze teraz je to vlastne obratene (na mobile OK na PC not OK)

Upravil/a jany dňa 05/01/2020 23:05, pred 2 rokmi

RobiNN

Hlavný administrátor

Management

1056

Odoslané pred 2 rokmi

#4

Skús obrázok kory ma cca 1920px na šírku a 500px na výšku.

Alebo toto

Kód Stiahnuť zdrojový kód

.theme-header {

 background: #2980b9 url(images/bg_main.jpg) no-repeat;

 background-attachment: fixed;

 padding: 15px 0;

}



/* Iba na telefóne to bude natiahnuté tak ako chceš */

@media (max-width: 567px) {

 .theme-header {

 -webkit-background-size: cover;

 background-size: cover;

 }

}

Toto je to iste, -webkit- je len prefix pre niektoré prehliadače

Kód Stiahnuť zdrojový kód

-webkit-background-size: cover;

background-size: cover;

PHPFusion Development Manager
GitHub profil, PF-Projects/PF-Themes, PF-Projects/PF-Addons, PHPFusion/Addons

jany

Člen

Užívateľ

137

Odoslané pred 2 rokmi

#5

Toto funguje uz OK, dik

jany

Člen

Užívateľ

137

Odoslané pred 2 rokmi

#6

Este poznamka:
ked som smartfon otocil do horizontalnej polohy, tak sa pri nastaveni "max-width: 567px" ten obrazok roztiahol. Ked som nastavil "max-width: 800px" tak teraz je to este lepsie.

btw nevies nahodou o nejakom online nastroji, ktory simuluje rozne web prehliadace v roznych OS a na roznych zariadeniach ako napr. smartfon, tablat, desktop ....

Pretoze teraz sa mi web zobrazuje OK v linuxe (opera, chrome, firefox) a na smartfone android 6, ale rad by som si pozrel ako sa to zobrazuje aj inde napr. vo win 7/10. Nasiel som toto https://www.brows... ale tam fungovalo asi len 5 pozreti a dalej to chce upgrade a platbu

RobiNN

Hlavný administrátor

Management

1056

Odoslané pred 2 rokmi

#7

Pre DEV tím som pred rokom vybavil sponzoring od https://browserst... na testovanie rôznych prehliadačov a zariadení používam iba toto. Mám tam neobmedzené všetky nástroje, ktoré ponúkajú.
Pokiaľ viem tak majú aj nejakú trial verziu, možno ti pomôže

PHPFusion Development Manager
GitHub profil, PF-Projects/PF-Themes, PF-Projects/PF-Addons, PHPFusion/Addons

jany

Člen

Užívateľ

137

Odoslané pred 2 rokmi

#8

OK dik, to neni az take doletite pre mna, predpokladam, ze sa to zobrazuje OK vsade

RobiNN

Hlavný administrátor

Management

1056

Odoslané pred 2 rokmi

#9

Tieto nástroje sú väčšinou platené.
Ak upravuješ iba farby a pridal si pozadie tak to bude ok.

Samotná téma už bola otestovaná počas toho ako som ju vytváral.

PHPFusion Development Manager
GitHub profil, PF-Projects/PF-Themes, PF-Projects/PF-Addons, PHPFusion/Addons

Fórum

responzivne pozadie

Tagy

Zúčastnený používatelia