Autor Zpráva
misak6
Profil
Ahoj,
nechci, aby si někdo myslel, že se tu snažím dělat si reklamu, ale bez uvedení konkrétní adresy svůj problém asi nevyřeším.
Jde mi o to, že web toppikshop.cz je celý responzivní a zobrazuje se dobře jak na desktopu, tak na mobilu a to až na jednu věc - header obrázek. Když se podíváte, tak teď je to vyřešeno celkem blbě html zápisem. Z toho, co jsem o tom dnes načetl jsem zjistil, že abych mohl mobilním uživatelům zobrazovat jiný header obrázek než při prohlížení na desktopu, tak nejlepším řešením bude css zápis. Pořád se mi ale nedaří tam ten obrázek přes CSS nacpat, viz. můj pokus toppikshop.cz/index-test.php kde jsem v souboru style-test.css do třídy head-main dopsal vlastnost:
background-image: url("http://toppikshop.cz/assets/header3.jpg") !important;

Poradíte mi prosím, jak na to? Předem díky.
Tomáš123
Profil
misak6:
Prvku .head-main nastav nasledujúce vlastnosti:
.head-main {
    background: url(http://toppikshop.cz/assets/header3.jpg) center no-repeat;
    background-size: contain;
    width: auto;
    float: none;
    padding-bottom: 36.9%; /* percentuálny pomer výšky oproti šírke (vypočítaný pre tvoj konkrétny obrázok) */
    margin-top: 3em; /* 54px */
}

V prípade, že by si chcel od určitej šírky zobrazovacej plochy zobraziť iný obrázok, využiješ toto:
@media (max-width: 800px) { /* Na obrazovkách s šírkovým rozmerom menším ako 801px ... */
  .head-main {
    background-image: url(http://toppikshop.cz/assets/header3-small.jpg);
    /* ... sa zobrazí obrázok header3-small.jpg. */
  }
}

Posilňovaniu deklarácií klauzulou !important sa pokiaľ možno vyhýbaj.

Komentár v CSS pozostáva z otváracej časti /* a uzatváracej časti */. Výkričník tam nemá čo hľadať.

Okrem hlavičky máš neprispôsobivé ešte video a niekoľko obrázkov nižšie. Nápomocná by ti mohla byť deklarácia max-width: 100%.
misak6
Profil
Tomáš123:

Ahoj, díky moc! Tvůj kód funguje perfektně a na jeho základě jsem doladil i ten zbytek. Ještě jednou díky a přeji krásný den :)

Vaše odpověď

Mohlo by se hodit


Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm: