<img> of background-image

[tec]

Probleemstelling:

Header van een site bestaat uit het logo + een sfeer afbeelding als achtergrond. Deze sfeerafbeelding (stel je bijvoorbeeld een foto van een strand in hawaii voor) is beheerbaar in een CMS. De contentmanager kan zelf de foto's beheren, foto's toevoegen aan het library en foto's verwijderen.

Aangezien de sfeer afbeelding niet deel uit maakt van de content van de pagina, het draagt niets bij op content vlak, het is puur stijl en sfeer. Zou ik normaal kiezen voor een background-image style op bijvoorbeeld de header container. Ik zie hier alleen niet snel een mogelijkheid dit netjes te doen, ik kom elke keer uit op het volgende (bleh inline styles) uit aangezien het image beheerbaar moet zijn vanuit het CMS:

HTML:

<div style="background-image:url(sfeerfoto.jpg)> inhoud header </div>

Hoe pakken jullie dit doorgaans aan, ik kan natuurlijk altijd nog een

HTML:

<img src="sfeerfoto.jpg" alt=""/>

doen maar dan komt de afbeelding ook terug bij users zonder stylesheet en suggereer ik eigelijk dat de sfeerfoto deel uit maakt van de content en dat zie ik eigelijk ook weer niet zitten. Een beetje een grijs gebied dus.

Suggesties?

[BasieP]

waarom zou inline style hier foutief zijn? het is gegenereerde code toch?

je draagt zelf alle redenen aan waarom dit een background image moet zijn en volgens mij geen reden waarom het een img zou moeten zijn..
lijkt me duidelijk

@hieronder:
de header wordt in een CMS systeem gekozen, dus hij kan dit niet in css regelen
(tenzij hij zelf z'n webservice kan beinvloeden zodat css ook geparsed wordt, maar dat is denk ik niet het geval)

[ Voor 83% gewijzigd door BasieP op 19-11-2009 19:05 ]

[Barleone]

CSS?
Je kan toch de DIV een id="header" meegeven?
Dan bepaal je vervolgens in je css de background image url.

edit: Ah, je wilt de CSS niet manipuleren vanuit het CMS?
(@* BasieP , kwam net zelf op dat idee, dus credits gaan niet naar jou voor deze edit )

Wat je wel kan doen:
Met het CMS de .jpg kiezen en deze verplaatsen/kopieren naar een mapje en altijd header.jpg noemen.
Vervolgens kun je wel netjes in je .css vermelden dat de background image url altijd 'header.jpg' heet.

Maar als conclusie ben ik het helemaal met * BasieP eens. Inline styles zijn in zo'n geval best OK hoor.

[ Voor 82% gewijzigd door Barleone op 19-11-2009 19:13 ]

[JefSnare]

Er is niks mis met inline styles zoals in dit geval. Je kunt dan in het CMS de filename opgeven en met behulp van een functie of gewoon een simpele style="background-image:url('sfeerfoto.jpg')
In een functie kun je dit makkelijk neerzetten bijvoorbeeld;

PHP:

function makeHeader($filename){
 if(exist($filename)){
  echo '<div style="background-image:url(\'padnaarbestand/'.$filename.'.jpg\')">';
  //get content
  echo '</div>';
}

offtopic:
Niet getest, is namelijk uit het hoofd

EDIT:

offtopic:
eigenlijk een programming reactie, zit wel css in

[ Voor 7% gewijzigd door JefSnare op 19-11-2009 22:03 ]

[IStealYourGun]

Kies, niemand zal er moeilijk over doen.

Edit: Behalve de printer want normaal worden achtergrond foto's niet afgedrukt.

[ Voor 50% gewijzigd door IStealYourGun op 19-11-2009 22:43 ]

[Barleone]

Oeh, das dirty * JefSnare

HTML: header.phtml

<div style="background-image:url( <?= $filename ?>)> inhoud header </div>

Dat is voor alle duidelijkheid een .phtml template met dus gewoon helemaal HTML, maar hier en daar een php echo erin (<?= ?>).
Dat is duidelijker in een template vind ik. Je kan dat natuurlijk vervangen door:
<? echo $var ?> of <?php echo $var ?>

[JefSnare]

Barleone schreef op donderdag 19 november 2009 @ 22:51:
Oeh, das dirty * JefSnare

HTML: header.phtml

<div style="background-image:url( <?= $filename ?>)> inhoud header </div>

Dat is voor alle duidelijkheid een .phtml template met dus gewoon helemaal HTML, maar hier en daar een php echo erin (<?= ?>).
Dat is duidelijker in een template vind ik. Je kan dat natuurlijk vervangen door:
<? echo $var ?> of <?php echo $var ?>

Die oplossing is wel beter, had het ook maar even snel verzonnen . Vindt een functie fijner werken omdat je dan meer dingen kan doen zonder veel te schrijven in je template;

HTML:

<div style="background-image:url( <?php makeHeader(); ?>)> inhoud header </div>

Bovenstaande zou dan ook volstaan, bijvoorbeeld als je toch een functie wilt die je filename checkt e.d. Het hoeft niet en Barleone's oplossing is ook gewoon simpel en effectief

[Barleone]

klopt JefSnare, in mijn voorbeeld moet je er zegmaar vanuitgaan dat alle logica al gebeurd is en dat alleen het template gevuld en geparsed moet worden. Bovendien moet je dergelijke dingen afvangen en opslaan in het CMS tijdens het editen. Je wilt niet bij elke pageview gaan uitrekenen wat de juiste width/height is van de header.

[Tharulerz]

Is het geen mogelijkheid om de image in te stellen in de class en deze class dynamisch toe te voegen? (tenzij het element al een class heeft...)

Is nog net iets netter als inline styles

[tec]

Bedankt voor de reacties.

Het is overigens een ASP.Net project dus PHP snippets daar heb ik niet zoveel aan. Overigens is het wegschrijven ook niet het probleem, het ging me meer om de keuze tussen img en background-image. Desondanks bedankt voor de suggesties :-)

Tharulerz schreef op vrijdag 20 november 2009 @ 01:54:
Is het geen mogelijkheid om de image in te stellen in de class en deze class dynamisch toe te voegen? (tenzij het element al een class heeft...)

Is nog net iets netter als inline styles

Dat zou een optie zijn, ware het niet dat de images dynamisch zijn, dus ik zou dan automatisch ook een eindeloze hoeveelheid classes moeten hebben.


Ik denk dat ik ga voor een style block in de document header met daarin een verwijzing naar het element waar de afbeelding in moet komen. Dat is een beetje tussen de gebode oplossingen en een dynamische stylesheet in.

Cascading Stylesheet:

#header {
   background-image:url(##########);
}

[moozzuzz]

Een andere oplossing is natuurlijk om een dynamisch document te maken (vb: headerimage.asp) dat op basis van de gegevens die het krijgt van het CMS de juiste headerimage teruggeeft naar de browser. We landen dan wel meteen in een ander topic want dat is natuurlijk serverdevving ipv clientdevving :^p.

Cascading Stylesheet:

.header {
    background-image:url(headerimage.asp)
}

[OkkE]

Ik zou sowieso voor een background-image gaan, tenzij het een sildeshow moet worden.

Of dat inline styles zijn of een los stukje CSS in de <head> maakt dan niet veel uit. Ik zou geen dynamische CSS file gebruiken, dan moet elke keer je CSS "geupdate" terwijl dit juist een file is die je (over het algemeen) zo veel mogelijk uit de cache wil halen.

Wat je eventueel ook zou kunnen doen, is niet steeds de HTML/CSS vervangen, maar telkens de zelfde "header.jpg" overschrijven; al zit je dan ook weer een beetje met het caching verhaal...

[ Voor 4% gewijzigd door OkkE op 20-11-2009 09:51 ]

[Bosmonster]

IStealYourGun schreef op donderdag 19 november 2009 @ 22:42:
Kies, niemand zal er moeilijk over doen.

Edit: Behalve de printer want normaal worden achtergrond foto's niet afgedrukt.

Eensch. Ik zie niet in waarom je hier uberhaupt een achtergrondafbeelding zou willen gebruiken.

Naast het printerverhaal kun je progressive download ook op je buik schrijven.

[ Voor 10% gewijzigd door Bosmonster op 20-11-2009 09:59 ]