[CSS] IMG tag met background-image

[MarkvE]

Ik had het deze week ergens gelezen op een blog, maar kan het nu met geen macht meer terugvinden vanwege de ongelukkige woordkeuze (img, background-image en css geven in een combinatie van elkaar alleen image-replacement-tips-met-css via Google):

Het geven van een background aan een IMG tag. Er was een property dat je mee moest geven aan de standaard code om het te laten werken, echter heb ik geen idee meer welke.

Cascading Stylesheet:

img
{
    background-image: url( '...' );
    /* en dan nog iets... */
}

[HyperioN]

Mag ik vragen wat je hier probeert te doen dan?
Waarom wil je op de achtergrond van een image een image neerzetten? Die achtergrond zie je dan toch niet?
Volgens mij kan het ook niet maar dat weet ik niet zeker..

[BtM909]

Ik zie hier ook niet echt het nut van in (wellicht met transparante plaatjes?), op internet lijk ik alleen foutief gebruik tegen te komen ala http://forums.sixapart.com/lofiversion/index.php/t35673.html

[MarkvE]

Het is bedoeld als manier om plaatjes die er lang over doen om te laden een "Laden..." achtergrond te geven.

[Borizz]

Misschien een hoogte en een breedte zetten, omdat deze nog niet bekend is als het plaatje nog geladen moet worden.

Cascading Stylesheet:

img {
    background-image: url( '...' ); 
    width: ...px;
    height: ...px
}

[Zoefff]

Het zou gewoon moeten werken als je een achtergrondafbeelding meegeeft hoor. Dus:

Cascading Stylesheet:

img {
    background: url("wawawiewa.png") no-repeat center;
}

[Mei]

Om een achtergrond aan een afbeelding mee te geven hoef je alleen background-image:url(afbeelding.png); te gebruiken hoor. Wat Borizz zei is ook wel handig, maar dat moet je niet in je img declaration zetten, want geheid heb je afbeeldingen van verschillende groottes.

[Borizz]

Mei schreef op woensdag 15 november 2006 @ 21:07:
Om een achtergrond aan een afbeelding mee te geven hoef je alleen background-image:url(afbeelding.png); te gebruiken hoor. Wat Borizz zei is ook wel handig, maar dat moet je niet in je img declaration zetten, want geheid heb je afbeeldingen van verschillende groottes.

Het was dan ook meer als een voorbeeld bedoeld he, ik snap dat het niet slim is om dat voor elke image tag te definieren ! Maar als het plaatje nog geladen moet worden, is de breedte en de hoogte nog onbekend, dus zolang je die niet zet, zal er in de meeste browsers pas een (achtergrond) afbeelding worden weergegeven wanneer in ieder geval de headers (waar hoogte en breedte instaan) van de afbeelding binnen zijn. Daarbij komt nog dat de achtergrond afbeelding later geladen zou kunnen worden dan de normale afbeeldingen, waardoor je dus ook geen afbeelding ziet.

[Mei]

Dat van mij was een uitleg naar de TS toe om te voorkomen dat het daarbij ook verkeerd ging. Moet je niet denken dat ik jou als n00b zie ofzo

[Borizz]

Zo had ik het ook niet gelezen hoor, maar ik had nog wat toe te voegen. Zo kan de TS het ook nog volgen .

[neevedr]

Is het gebruik van lowsrc attribute niet iets wat je zoekt?

code:

<img src="mikka.jpg" lowsrc="mikkabw.jpg" alt="Grand Prix Driver" height="320" width="150" />

lowsrc
In the Netscape implementation, this attribute contains the URL of an image to be initially loaded. Typically, the lowsrc image is a low-resolution or black-and-white image that provides a quick preview of the image to follow. Once the primary image is loaded, it replaces the lowsrc image.

Denk niet dat dit door de validator komt.

Bron: http://www.htmlref.com/Reference/appa/tag_img.htm

[ Voor 4% gewijzigd door neevedr op 15-11-2006 21:28 ]

[MarkvE]

Het lijkt nu alleen te werken zodra ik een vaste breedte en hoogte opgeef, niet erg handig voor verschillende plaatjes. Maar het kan dus wel. Jammer is alleen dat het een animated gif is als achtergrond en deze niet wordt afgespeeld in Safari, wel in Firefox maar daar zit dan een soort default-plaatje doorheen geduwd door de browser zelf.

De bedoeling hiervan is eigenlijk een nette oplossing om een "Laden..." plaatje te krijgen zonder Javascript te gebruiken.

[BtM909]

Tenzij je een mooie flashy site met dhtml gaat weergeven, maar dan gebruik je sowieso al JS, dan zou je mooie laad mogelijkheden weer kunnen geven voor je plaatjes, maar waarom zou je de default behaviour op deze manier om zeep helpen?

[MarkvE]

Ik snap niet goed welke default behaviour ik aantast met het aanpassen van een achtergrond plaatje?

[OkkE]

Default wordt de alt="" weergegeven tot de afbeelding geladen is. Als de afbeelding niet gevonden kan worden, of als in de browserinstellingen staat dat er geen afbeeldingen getoond moeten worden, blijft de alt="" staan.

Waarom een "Laden..." tekst (en al helemaal een gif...)? Als het afbeeldingen voor de layout (vormgeving) zijn, moeten ze sowieso snel laden. En anders zijn het afbeeldingen zoals bijv. foto's, en zie ik niet in waarom er een tekst moet komen, dan is het volgens mij voor de bezoeker wel duidelijk dat 'ie soms even moet wachten (zou het iig wel moeten zijn). I

[ Voor 13% gewijzigd door OkkE op 16-11-2006 13:22 ]

[BtM909]

1. Er een kader beschikbaar (lees: zichtbaar), zodat bezoekers weten dat op die plek een image gaat verschijnen.

2. Is de bedoeling niet dat je juist zo snel mogelijk je plaatjes laadt, ipv eerst een ander plaatje weergeven (en dus ook laden)

[killercow]

Ik gebruikte zo'n soort techniek op m'n kameleon kleuren site, maar IE snapte dat niet helemaal waardoor ik alsnog ee divje om de img tag heen moest leggen. tis niet helemaal wat jij zoekt, maar komt dichtbij genoeg denk ik.

http://innerheight.com/greenery/articles.php?id=1

Voorbeeld: (Not safe for work):
doe dan ook gewoon niet posten een code voorbeeld is genoeg

[ Voor 17% gewijzigd door BtM909 op 17-11-2006 13:58 ]

[MarkvE]

Mensen gaan allemaal vreemde toepassingen bedenken Even uitleg: Het is voor plaatjes om aan te geven of een server wel of niet online is. Dan is het wel handig om te weten of het plaatje nog aan het laden is en niet dat de server offline is, dat scheelt nogal veel

[Borizz]

MarkvE schreef op donderdag 16 november 2006 @ 19:57:
Mensen gaan allemaal vreemde toepassingen bedenken Even uitleg: Het is voor plaatjes om aan te geven of een server wel of niet online is. Dan is het wel handig om te weten of het plaatje nog aan het laden is en niet dat de server offline is, dat scheelt nogal veel

Dat kan je toch ook oplossen met een achtergrondkleur of een kader i.p.v. een plaatje? En waarom zou je geen javascript hiervoor gebruiken? Lijkt mij ideaal hiervoor, dan kan je bijv. met een XmlHttpRequest checken of de server online is en aan de hand daarvan een lokaal (op de webserver waar het draait) een afbeelding in te laden. Je kan er dan voor kiezen om standaard de 'laden' afbeelding weer te geven..

[MarkvE]

Borizz schreef op donderdag 16 november 2006 @ 20:23:
[...]

En waarom zou je geen javascript hiervoor gebruiken?

[...]

Omdat ik dezelfde versie van het script ook op PDA en andere kleine apparaten met internetaccess wil gebruiken en die ondersteunen niet (altijd) XMLHttpRequest. Een volledige HTML oplossing is het mooiste.

Het lijkt nu het best opgelost met de volgende code:

Cascading Stylesheet:

span
{
    width: 16px;
    height: 16px;
    display: block;
    background: url();
}

En dan in de HTML

HTML:

<span><img src="..." alt="..."></span>

Het enige nadeel is dat het de eerste keer niet vlekkeloos gaat omdat het achtergrond plaatje nog niet gecached is. Maar dat is wel op te lossen door het plaatje op te geven in een element met een visibility: hidden zodat deze ooit al eens in de stylesheet geladen wordt.

[Borizz]

Als er een scripting engine (PHP, ASP etc) in je webserver is geactiveerd, zou je ook met een script op de server (dus niet in de client, de browser) kunnen checken of de remote server online is en aan de hand daarvan het juiste plaatje tonen. Dan heb je geen javascript nodig en geen 'trucjes' in CSS om de boel goed weer te geven.

[MarkvE]

Borizz schreef op vrijdag 17 november 2006 @ 23:51:
Als er een scripting engine (PHP, ASP etc) in je webserver is geactiveerd, zou je ook met een script op de server (dus niet in de client, de browser) kunnen checken of de remote server online is en aan de hand daarvan het juiste plaatje tonen. Dan heb je geen javascript nodig en geen 'trucjes' in CSS om de boel goed weer te geven.

Het wordt ook via PHP scripting gedaan, dit script geeft namelijk het juiste plaatje terug. Het mooie van elke server apart één plaatje is dat de pagina niet blijft hangen op een afbeelding.