poradna.net
Pozadí webu nefunguje jako odkaz Proč nefunguje obrázek na pozadí webu jako odkaz?
html, body {
background-image: url("aaa.png");
position: absolute;
top: 0px;
right: 0px;
display:block;
height:100%;
width:100%;
text-indent:-9999px;
}
<a href="http://????" title="Title" id="body"></a>
| Předmět | Autor | Datum |
|---|---|---|
| protože Váš kód je nezmyslný.
html, body {} v CSS sú element selectory avšak v tagu <a> máte id="bo… Mlocik97 02.10.2018 17:49 |
Mlocik97 | |
| A proč to teda jinde mají? Pozadí jako odkaz a funguje to? https://www.idnes.cz/ violaaa 02.10.2018 17:52 |
violaaa | |
| pozadí ako odkaz nieje to isté ako pozadí ako odkaz.. jedna vec je jak sa to prezentuje na vonok, a… Mlocik97 02.10.2018 17:54 |
Mlocik97 | |
| Tu je funkčné riešenie, po kliknutí na odkaz nižšie treba ešte stlačiť tlačítko "Run >>":
https://ww… pme 02.10.2018 18:28 |
pme | |
| ja bych to tak rozhodne nedelal. I když nieje žiadny dôvod k tomu vlastne to vôbec robiť. Proč:
za… Mlocik97 02.10.2018 18:37 |
Mlocik97 | |
| A když chci dát jako pozadí jen obrázek background-image: url("aaa.jpg"); tak se vloží v původní vel… violaaa 02.10.2018 19:15 |
violaaa | |
| na element na ktorý to pozadie aplikujete nastavte šírku celého "viewportu" teda 100%. V background… poslední Mlocik97 02.10.2018 19:24 |
Mlocik97 |
Zpět do poradny Odpovědět na původní otázku Nahoru
protože Váš kód je nezmyslný.
html, body {} v CSS sú element selectory avšak v tagu <a> máte id="body" ktorý potrebujete selectovať cez identifikátor takže v CSS je potreba napsať #body {} (tá mriežka je dôležitá), ďalšia vec je že pozadie by nikdy nemal byť (a snaď to ani nieje možné) odkazom. ďalšia vec, ak chcete spraviť obrázok odkazom tak použite takéto HTML:
(na miesto 3 bodky napíšete Vaše atribúty a hodnoty ktoré chcete)
A proč to teda jinde mají? Pozadí jako odkaz a funguje to? https://www.idnes.cz/
pozadí ako odkaz nieje to isté ako pozadí ako odkaz.. jedna vec je jak sa to prezentuje na vonok, a druhá vec je jak je to napísané v kódu... neverím že odkaz má niečo spoločné s CSS atribútom v body selectore (jakožto element body). Inak když si otvoríte na tej stránke dev toolky v chromu tak jasne uvidíte že styly pozadia aplikujú na elemente <body> ale na elemente <div id="main"> je hitbox reálneho odkazu, čož je taky hodne špatne, okrem toho tam ani nemajú odkaz teda tag <a>, u nich je to ale to že používajú element na ktorom je nastavené aby sa kurzor zobrazovala ako šipka a cez event handler v javascripte je po kliknutí na daný element volaná funkce ktorá otvorí inú stránku, ešte k tomu používajú prekrývanie (z-index). Inak to že to nemajú podľa pozadia elementu body je jasne viditelné pri príbližení a oddialení stránky kdy kurzo šípky a akože "odkaz" sa aplikuje aj úplne mimo obrázku resp. pozadia stránky. Na elemente body majú nastavenú iba jednofarebné pozadie (v mojom prípade farba #285856 inak je furt iná, lebo sa na server side dynamicky generuje aj samotné pozadie (reklama)).
Ak chcete obrázok mať odkazom tak vnorte <img> element do elementu <a>.
P.S. proč vôbec niečo takéto potrebujete? je to totiž hodne špatná vec. Nehovoriac že ten "neco cez" fullscreen obrázok žere toľko bajtov, až mi je na grc. Rovnako jak z celej stránky idnes.cz (idnes.cz načitáva cez 2.1MB a trvá mu to 25.29s pri fast 3G, inak tých 311 requestov je už len čerešnička na torte), najmä když vätšina requestov tvorý typ PNG súborov ktoré majú totálne iné rozmery než jak sa reálne zobrazujú na stránke.) Prosím neučte sa zo zdrojových kódov idnes.cz
sry za viacero úprav, nekteré veci som skorej napsal tak jak to reálne na tej stránke idnes.cz nebolo ale tá stránka je tak chaotická že i ja mal problém rozlíšiť že na ktorom elemente je nastavené pozadie, a ktorý element je pseudo odkazom.
Tu je funkčné riešenie, po kliknutí na odkaz nižšie treba ešte stlačiť tlačítko "Run >>":
https://www.w3schools.com/code/tryit.asp?filename=FVUCEU4KQ2OH
ja bych to tak rozhodne nedelal. I když nieje žiadny dôvod k tomu vlastne to vôbec robiť. Proč:
za 1. extrémne veľká spotreba dát.
za 2. zoomovanie to "trocha" rozbije.
za 3. to riešenie nieje možné použiť pokiaľ chcete mať na stránke ďalší obsah. A bez ďalšieho obsahu to nemá zmysel. Okrem toho to nieje reálne pozadie, všechen ďalší obsah je vložen mimo obrázku. Však stačí dopísať o riadok nižšie pod tag <a> nejaký obyčajný text. Pak je nutné absolútne pozicovanie a prekrývanie. Viď : https://www.w3schools.com/code/tryit.asp?filename=FVUCTIFFK7H3
akýkoľvek fullscreen odkaz je niečo za čo by mali byť kódery poslaný pod gilotínu. A ešte že nekto načitáva 3MB obrázok v rozlíšení dobre že ni 4K a nakoniec z neho zobrazí len časť (tak 10% obrázku) a zvyšok prekryje, a ešte k tomu to zobrazí v inej veľkosti, tak to už je totálny zabiják. Stránky ktoré stahujú polovicu dát absolútne k ničomu, nie to ešte aby uživateľ tie pixely videl, to by malo byť zakázané zákonom Európskym, a povolený trest smrti pre toho kto tak učiní.
A když chci dát jako pozadí jen obrázek background-image: url("aaa.jpg"); tak se vloží v původní velikosti. Jak to udělat aby se šířka přizpůsobila stránce?
na element na ktorý to pozadie aplikujete nastavte šírku celého "viewportu" teda 100%. V background se dá pak nastaviť vyplnenenie celej veľkosti elementu. Stále sa nenecháte odhovoriť od nechutnosti.