Hallo, ich bin gerade dabei meine Webseite zu überarbeiten. Nun habe ich mit Inkscape mir einen Header und einen Background entworfen und diese in meinen Editor eingefügt. Nun ist das Problem, dass die Schrift unter dem Background liegt, wie bekomme ich die auf dem Background? Vielen Dank für die Antwort!
Buttons und Schrift ganz nach oben legen
- Ersteller tophy75
- Erstellt am
Wie schon Tronjer geschrieben hat, würde ich es mit background-image machen. Das ist relativ simple:
In der HTML schreibst du:
Im Headbereich:
<link rel="stylesheet" type="text/css" href="style.css" />
<style type="text/css">
body {font-size:76%; font-family:"trebuchet MS", verdana, arial, sans-serif; background:#ffffff; word-wrap:break-word; width:100%; margin:0px; padding:0px;}
</style>
Im Bodybereich:
<div id="header">Dein Text der auf dem Background liegen soll</div>
Und dann musst du noch eine CSS basteln, falls noch keine vorhanden ist (z.b. nennst du sie style.css)
Dort kommt rein:
#header {overflow:hidden; background: url(deinbackground.gif) no-repeat; background-position: center; height:auto; margin:0 auto; padding:0;}
Die Weite (width kannst du auch mit angeben. Wenn du es nicht angibst, wird die tatsächliche Größe der Backgroundgrafik genutzt) Obiges Beispiel streckt die Backgroundgrafik über die volle Bildschirmbreite.
no-repeat sagt aus Das der Background nur einmalig und nicht gekachelt erscheinen soll.
In der HTML schreibst du:
Im Headbereich:
<link rel="stylesheet" type="text/css" href="style.css" />
<style type="text/css">
body {font-size:76%; font-family:"trebuchet MS", verdana, arial, sans-serif; background:#ffffff; word-wrap:break-word; width:100%; margin:0px; padding:0px;}
</style>
Im Bodybereich:
<div id="header">Dein Text der auf dem Background liegen soll</div>
Und dann musst du noch eine CSS basteln, falls noch keine vorhanden ist (z.b. nennst du sie style.css)
Dort kommt rein:
#header {overflow:hidden; background: url(deinbackground.gif) no-repeat; background-position: center; height:auto; margin:0 auto; padding:0;}
Die Weite (width kannst du auch mit angeben. Wenn du es nicht angibst, wird die tatsächliche Größe der Backgroundgrafik genutzt) Obiges Beispiel streckt die Backgroundgrafik über die volle Bildschirmbreite.
no-repeat sagt aus Das der Background nur einmalig und nicht gekachelt erscheinen soll.