Veliko število spletnih strani temelji na vizualnih elementih oz. slikah. V določenih situacijah, kot je napačen link, ne delovanja strežnika, domene, … pa se lahko srečamo s stanjem, kjer se slike ne prikažejo. Namesto njih običajno dobimo neoblikovana, nekateri bi rekli celo grda obvestila, da se slika ni ustrezno naložila.
S pomočjo CSS-ja lahko z določenimi stili na element <img> slednje preoblikujemo v lepšo obliko. Preden se lotimo oblikovanja pa moramo razumeti logiko delovanja <img> elementov. Zelo pomembna informacija pri oblikovanju <img> elementov je ta, da lahko nanjo apliciramo tipografijo. V praksi to pomeni, da <img> znački dodelimo font in njegovo obliko, ta oblika pa služi za prikaz alternativnega besedila, ki se prikaže namesto slike. Sam stil pa nima vpliva na končno sliko. Ker je značka <img> zunanji objekt, kar v praksi pomeni, da na njen prikaz in dimenzijo vpliva zunanji vir. Ker je element pod kontrolo zunanjega vira značke, kot so :before in :after (pseudo-elements) nimajo vpliva, razen v primerih, ko se slika ne prikaže. Zaradi vsega naštetega pa lahko CSS stile uporabimo za oblikovanje ne prikazanih slik.
Primer slike
<img src="ni-slike.jpg" alt="Primer brez slike">
Primer CSS stilov
img {
display: block;
height: auto;
line-height: 2;
position: relative;
text-align: center;
width: 100%;
}
img:before {
content: "";
display: block;
position: absolute;
top: -50px;
left: 0;
height: calc(100% + 100px);
width: 100%;
background-color: #f2f2f2;
}
img:after {
content: "SLIKA: " attr(alt);
display: block;
font-size: 16px;
font-style: normal;
color: #979797;
position: absolute;
top: 5px;
left: 0;
width: 100%;
text-align: center;
}Rezultat oblikovanja ne prikazanih slik
Slabost predstavljene uporabe oblikovanja ne prikazanih slik je podpora v brskalnikih. Trenutno imajo vsi novejši brskalniki podporo :before in :after pseudo-elements, medtem, ko v starejših verzijah brskalnikov te podpore ni. Zato bodite pri implementaciji pozorni na svoje uporabnike oz. njihove brskalnike. Oblikovanje ne prikazanih slik je »bombonček«, ki ni nujno potreben, zato lahko metodo kljub slabši podpori starejših brskalnikov implementirate pri svojih projektih.