Um schreiben oder kommentieren zu können, benötigen Sie ein Benutzerkonto.
Sie haben schon ein Benutzerkonto? Melden Sie sich hier an.
Jetzt anmeldenHier können Sie ein neues Benutzerkonto erstellen.
Neues Benutzerkonto erstellen
Schönen guten Abend, ich hab da mal ´ne Frage:
Ich würde gerne ein Background-Image, eingebunden über
automatisch mit Änderung der Browser-Weite "dehnen".
Also quasi so wie das allseits beliebte Windows ein Hintergrundbild an die Bildschirmauflösung anpasst. Gibt´s dafür einen Befehl? Oder brauche ich da ein ganzes Skript?
Schönen Gruß, N°
http://www.enerdency.de
Hallo!
Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.
Dafür gibt es keinen eingebauten Befehl in CSS, dafür bräuchte man in der Tat ein kleines Skript oder so ähnlich.
Um was für eine Art Hintergrundbild handelt es sich denn?
Gruß Jeriko
Tja, schade. Das Bild steht noch nicht, hätte ganz gerne nach oben einen Abschluss für den Background des Posting-Abschnitts.
Falls Du mein Blog gesehen hast, da läuft praktisch ein Verbandsstreifen vor so ´ner Art "OP-Kacheln" lang (soll´s zumindest darstellen;) ).
Ich würde mir halt ein Verbands-Päckchen oder sowas per Photoshop basteln, damit das Ganze oben nicht so abgehackt aussieht. Nur müsste das sich halt in der Breite an den Background unten anpassen, d.h. die oberen Ecken müssten auseinanderwandern. Deswegen fällt "repeat" weg...
Danke für´s schnelle Antworten, btw!
Bin selbst erst seit knapp 2 Wochen dabei, also falls Ihr Vorschläge habt, ich bin für alles (vor allem das Newbie-aufbereitete :) )dankbar!
N°
P.S. Eine Idee wäre, zwei Bilder aussen zu haben, die automatisch rechts und links vom Header-Background (dann "center" und "repeat") blieben... aber ich hab nicht so wirklich Ahnung, wie ich das hinkriege...
Selbst wegeditiert, weil höchst überflüssig ;)
Just to keep you informed:
Auto-Resizing eines Backgrounds klappt doch!:mrgreen:
Aaaalso, auch wenn die "Stretch"-Funktion für Backgrounds laut w3c erst in CSS3 eingebaut werden soll, man schafft es auch jetzt schon *freu*.
Der gute Mensch von CSSPlay hat das als Hintergrund für eine komplette HTML-Seite vorgemacht, und mit ein Bisschen stöbern im Seitenquelltext und nachschlagen, was z-index so macht, ist folgendes rausgekommen:
Erstmal braucht man in der style.css einen neuen Eintrag, hier #background:
/* HEADER STUFF */
div#header {
margin: 0 15% 0 15%;
padding: 7em 0 0 0;
text-align: center;
}
#background {
position:absolute;
z-index:1;
margin: 0 0 0 10%;
width:80%;
height:240px;
}
h1#blog-title, h2#blog-description {
letter-spacing: 3px;
}
h1#blog-title {
font-size: 4em;
line-height: 100%;
margin: 0;
padding: 0 0 0 0;
position:relative;
z-index:2;
}
h2#blog-description {
border-top: 1px solid #805500;
font-size: 1.1em;
margin: 0;
padding: 0.2em 0 0 0;
position:relative;
z-index:2;
}
Das Ding kann man so anpassen, wie man´s im Endeffekt auf der Seite haben will, hier also 10% vom linken Rand und so weiter.
Wichtig sind nun "position" und "z-index", da sich das Ding mit "position" "festhalten" soll (Fixpunkt von dem aus das Resizing laufen soll) und "z-index" um den "background" auch wirklich hinter den Blog-Titel oder ähnliches schieben kann.
Width und Heigth definieren das Auto-Resizing, hier also nur in Bezug auf Width, Heighth ist egal wie groß das Hintergrundbild 240pix, und zwar nicht abgeschnitten, sondern gedehnt/gestaucht. (<- Ist das nicht geil?:mrgreen:)
Wenn "#background" z-index 1 hat, müssen nun noch die anderen Header-Elemente z-index 2 zugewiesen bekommen, damit sie vor dem "background zu liegen kommen. Da die Zuweisung von z-indices nur in Verbindung mit "position" funktioniert, bekommen sie noch ein "position: relative" was sie Layout-technisch genauso erscheinen lässt, wie man es ohne den ganzen Auto-Resizing-Krempel gewohnt ist.
Und jetzt wird´s angenehm simpel:
In die header-php fügt man jetzt nur noch irgendwo bei mir im <body>
<div> <img id="background" src="http://www.DeinBlog.xy/DeinHintergrundbild.xy" alt="not found" /> </div>ein.
Wichtig ist dabei die komplette Adresse, weil, sonst nur die Startseite des Blogs das Bild zeigt (hat mich ´ne halbe Stunde gekostet, um darauf zu kommen...:roll: Und gilt übrigens auch für Favicon-Adressen).
Tja, ick freu´ mir!
Ansehen kann man sich das auf enerdency.de, auch wenn ich jetzt erstmal ein Bild finden muss, das mir als Auto-Resizing-Background auch wirklich gefällt :wink:.
Schönen Gruß,
N°
Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!