NOVINKA: Získej 40 hodin praktických dovedností s AI – ZDARMA ke každému akreditovanému kurzu!
S účinností od 26. 3. jsme aktualizovali Zásady zpracování osobních údajů – doplnili jsme informace o monitorování telefonických hovorů se zájemci o studium. Ostatní části zůstávají beze změn.

Diskuze: V Google Chrome se nezobrazuje background-image

V předchozím kvízu, Online test znalostí HTML a CSS, jsme si ověřili nabyté zkušenosti z kurzu.

Aktivity
Avatar
Matyáš Máslík
Člen
Avatar
Matyáš Máslík:24.8.2017 16:59

Zdravím, jsem nováček v tvorbě webu a narazil jsem na problém :D V Adobe Illustrator jsem si vytvořil obrázek a exportoval do formátu JPG. Následně jsem obrázek nastyloval v extérním CSS a připojil do html souboru jako pozadí (podle už předchozího funkčního příkladu). Problém vězí v tom, že pozadí se v pořádku zobrazí v prohlížečích Edge na mobilním zařízení i Mozilla na PC, ale ne v Google Chrome na PC (ostatní jsem nezkoušel). Potřebuju to samozřejmě spravit, vzhledem k tomu že Google Chrome je nejužívanější prohlížeč :D Předem děkuji za všechny rady :)

 
Odpovědět
24.8.2017 16:59
Avatar
Aaa Aaa
Člen
Avatar
Odpovídá na Matyáš Máslík
Aaa Aaa:24.8.2017 17:27

Pošli i kód, bez něj se špatně radí...

 
Nahoru Odpovědět
24.8.2017 17:27
Avatar
Matyáš Máslík
Člen
Avatar
Matyáš Máslík:24.8.2017 17:45

S kódem by to nemělo mít nic společného když to v ostatních prohlížečích funguje ne?

Jinak mám prostě v souboru styly.css nastylovanou třídu:

.bgimg {
background-image: url('a.jpg');
background-repeat: no-repeat;
background-size: 100%;
background-position: top center;
}

Tímhle propojenou do html souboru stránky na kterou se má zobrazit:

<link rel="stylesheet" type="text/css" href="styly.css">

A v body toho html dokumentu prostě <body class="bgimg">xxx</bo­dy>

Všechny soubory jsou ve stejném adresáři.

Editováno 24.8.2017 17:46
 
Nahoru Odpovědět
24.8.2017 17:45
Avatar
Aaa Aaa
Člen
Avatar
Odpovídá na Matyáš Máslík
Aaa Aaa:24.8.2017 17:54

Každý prohlížeč má trochu jinou podporu některých css vlastností, ale v tom by tady asi problém být neměl. Napadá mě jedině zkusit smazat cache pomocí ctrl + F5.

 
Nahoru Odpovědět
24.8.2017 17:54
Avatar
Matyáš Máslík
Člen
Avatar
Odpovídá na Aaa Aaa
Matyáš Máslík:25.8.2017 8:48

Problém je vážně jenom v jednotlivém prohlížeči GCh, na ostatních zařízeních to v něm funguje :D Promazání nefunguje a tak už pravděpodobně zbývá pouze reinstall

 
Nahoru Odpovědět
25.8.2017 8:48
Avatar
Neaktivní uživatel
Tvůrce
Avatar
Odpovídá na Matyáš Máslík
Neaktivní uživatel:25.8.2017 8:58

No, ja som mal s Chromom tiež podobný problém, kde pomohol až reinstall. Mne ale pre zmenu nefungovalo ES6.

Nahoru Odpovědět
25.8.2017 8:58
Neaktivní uživatelský účet
Avatar
Jan Štrobl
Člen
Avatar
Jan Štrobl:25.8.2017 11:44

Jak bylo psáno, zkusil bych vymazat mezipaměť Chrome je v tomhle trochu.. složitější :D Popřípadě bych zkusil místo

<style>
.bgimg {
background-image: url('a.jpg');
background-repeat: no-repeat;
background-size: 100%;
background-position: top center;
}
</style>
<body class="bgimg">
xxx
</body>

napsal toto (smazal classu, u body jsem zatím neviděl důvod použít třídu)

<style>
body {
background-image: url('a.jpg');
background-repeat: no-repeat;
background-size: 100%;
background-position: top center;
}
</style>
<body>
xxx
</body>

A po přepsání samozřejmě znovu tu mezipaměť, radši.

 
Nahoru Odpovědět
25.8.2017 11:44
Avatar
Ján Timoranský
Tvůrce
Avatar
Odpovídá na Matyáš Máslík
Ján Timoranský:25.8.2017 17:41

Skús danú stránku otvoriť v incognito móde. Nevidím totiž dôvod, prečo by to nemalo fungovať.

Nahoru Odpovědět
25.8.2017 17:41
Find what you love and let it kill you.
Avatar
Honza Bittner
Tvůrce
Avatar
Odpovídá na Matyáš Máslík
Honza Bittner:30.8.2017 19:09

Zkus otevřít tu stránku v inkognito módu, jak psal Ján Timoranský.

Btw. jsi si jistý, že je obrázek ve stejném adresáři jako tvůj HTML soubor?

Pokud ani tak obrázek neuvidíš, je pravděpodobné, že je obrázek nějak poškozen. Zkus si stáhnout různé obrázky z internetu a použít je – pokud tyto vidíš, máš prostě problém se svým obázkem a zkus ho vygenerovat znovu, případně v jiném formátu či s jiným nastavením.

Nahoru Odpovědět
30.8.2017 19:09
FIT ČVUT alumnus :-) Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://github.com/tenhobi/ama.
Avatar
Tano7
Člen
Avatar
Tano7:8. května 6:04

Navod:

1. vytvor fotku pozadi "pozadi.jpg" (nejlepe v Photoshopu 2019 s dohranym doplnkem webp) o rozmerech 1920x1080px a uloz jako .webp s kompresi 50% bez pozadi, dostanes se na velikost 50-150kB nebo klasicky do .jpg (mnohonasobne vetsi soubor).
Help: https://www.agionet.cz/…osti-obrazku
2. nahrej fotku "pozadi.jpg"** do korenoveho adresare webu**
3. do "style.css" pridej zapis:

html,
body {
    margin: 0;
    background-image: url("pozadi.jpg");
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    -webkit-background-size: cover;
    -moz-background-size:cover;
}

A JE TO! 💞

Nahoru Odpovědět
8. května 6:04
Život by byl mnohem snazší, kdybychom k němu měli zdrojový kód.
Avatar
Peter Mlich
Člen
Avatar
Peter Mlich:11:23

Nevim, proc otevirate tema z r 2017?

  • V te dobe se zavadelo https / http a kupodivu prohlizece se chovali nevyzpytatelne ne nezobrazovali prvky, ktere kombinovali oba protokoly. Jakoze obrazky mohl mit natahane pres http a stranka byla pres https nebo opacne.
  • Take se da zkusit zobrazit ten obrazek pres IMG a kdyz by se zobrazil, pridat mu ramecek. Muze mit kolem sebe bily okraj.
  • Kdyz nekdo napise, ze to s kodem nema nic spolecneho, tak je obvykle problem v kodu. Kdyz je v css kodu chyba, obvykle prohlizec prestane zbytek css parsovat.
  • A pak mne napada, ze to mozna prebiji jina class, tag. Slo by to zkusit uplne na cistem html, kde bude jen ta css trida, nic vic.
  • jinak, viz Strobl, mozna problem s kesovani prohlizece. A pouzil bych jeho kod s XXX, protoze body muze mit prednastavenou vysku 0. A kdyz je vyska 0, obrazek se nezobrazi.
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 11 zpráv z 11.