Bild mit relativen Abmessungen als Überschrift?

[JensB]

Hallo Leute,

ein Kollege von mir baut sich gerade eine Webseite: CERN-Watcher

Das Problem: Er hat bisher viel mit reinem HTML designt und ich versuche ihn gerade auf CSS "umzutaufen", und es klappt ganz gut bis jetzt.

Das Problem ist aber die Überschrift. Er möchte, dass sich sein Logo dynamisch an die Größe des Viewports anpasst. Daher gibt er dem Bild eine prozentuale width. So weit so gut.

Ich habe mir allerdings gedacht, dass dieses Bild ja semantisch eine Überschrift ist. Also sollte er lieber "<h1>Sein Text</h1>" verwenden. Die Schrift kann er ja unsichtbar machen, die Hintergrundgrafik kann er aber wenn überhaupt nur anzeigen, indem er der <h1> eine absolute Breite und Höhe gibt. Denn dynamisch da ein Bild reinfitten geht m.E. ja mit reinem CSS nicht, oder?

Gruß
Jens

 

[Elroy]

Hallo.

Ob das Bild jetzt eine Überschrift ist oder nicht darüber lässt sich streiten.

Einen <h1> Tag hat er ja bereits:

<h1>CERN-Watcher: Tools for CERN enthusiasts.</h1>

Was du allerdings machen kannst ist ihm helfen das Tabellenlayout zu entfernen.

Gruss
Elroy

 

[JensB]

Ja das Tabellenlayout ist so eine Sache, das stimmt.

Aber es geht ja gerade um die Überschrift. Ist ja eben die Frage, ob sich mittels CSS ein Hintergrundbild mit relativer Größenangabe in den <h1>-Block setzen lässt.

 

[Furien]

Klar:

h1 {
  background: url('bg.png') no-repeat;        
}

Nur ich glaube, das mit der prozentualen Breite dürfte ein Problem darstellen.

mfg furien

 

[JensB]

Ja das ist klar... :-/

Die Frage ist, ob es irgendeinen Weg gibt, das auch mit relativer Größenangabe hinzubekommen.

 

[threadi]

HTML

<h1><img src="bild.png" alt="" /><span>Überschriftstitel</span></h1>

CSS

h1 { position: relative; }
h1 img { position: absolute;z-index: 10; }
h1 span { position: absolute;z-index: 20; }

Alles klar? ;)

 

[JensB]

Jo danke, aber ist immer noch nicht das, was ich eigentlich wollte ;-)

Ich möchte das Bild nur per CSS einbinden, da es ein schmückende Grafik ist, und nicht mehr. Sie ist semantisch also von keinerlei Bedeutung und ist nur schmückendes Beiwerk.

Gibt es auch eine Lösung, wenn das Bild mit background: url("logo.jpg"); eingebunden wird?

Gruß
Jens

 

[threadi]

Nein. Denn Hintergrundbilder kann man derzeit nicht skalieren. Das geht vielleicht in ein paar Jahren mal.

 

[JensB]

Och mensch, das geht wirklich nicht? Das ist aber ein echtes Manko...

Gut, dann hat sich das erledigt und wir belassen es wohl so :-)

Gute Nacht
Jens