grafik positionieren

man0l0

man0l0

Aktives Mitglied
Thread Starter
Dabei seit
04.09.2006
Beiträge
16.595
Reaktionspunkte
1.348
hallo,
leider hab ich über die sufu nichts gefunden. vielleicht auch einfach, weil ich nicht genau weiß, nach was ich suchen muss.

aber ich möchte unter wordpress eine grafik am besten im hintergrund an der rechten sowie auch an linken unteren browserecke positionieren. also das die bilder - egal bei welcher fenstergröße - immer gamz rechts/link stehen.

würd mich freuen, wenn mir jmd helfen könnte :)

lg, manolo
 
das rechts-oben Bild würde ich mit einem Float oder einem DIV positionieren.
Das links-unten Bild als Hintergrund vom Body definieren:
Code: 
body {background:#FFFFFF url("bild.jpg") bottom left;}
 
ok, danke.
probier ich gleich mal aus :)
 
hm. irgendwie passiert da nichts. das bild wird nich mal angezeigt, wenn ichs ins css setze.
 
Überprüfe mal ob deine Pfade richtig gesetzt sind..
 
ja, die stimmen.
ich muss es doch im css einfach nur ins tag setzen, oder?

body {
font-family: Verdana, Arial, Helvetica, "sans serif";
font-size: 11px;
color: #999;
background-color: #eee;
background: url("bild.jpg") bottom left;
}
 
Blockelement mit Hintergrundbildern brauchen eine Höhe. Wenn Du noch keine Inhalte im Body hast, ist dieser kollabiert und das BG-Bild wird nicht angezeigt.

2nd
 
ich habs immer noch nicht geschafft.
aber konkret geht es um die seite:
pixelwiese.de

die code zeile, um die es wohl geht, ist diese hier:

body {
font-family: Verdana, Arial, Helvetica, "sans-serif";
font-size: 11px;
color: #999;
background-color: #eee;
}

wie soll ich da, 2nd, die höhe definieren? das hab ich leider nicht ganz verstanden. denn es ist ja immer aulösungs-abhängig. oder?
 
danke, schau ich gleich mal. :)

ja, es gibt schon eine pixelwiese.com
hat aber nichts mit mir zu tun und ich weiß auch nicht, für was die domain steht. ist schon seit monaten ohne content.
 
also wenn ich es so mache, wie in deinem link, dann sieht das also so aus:

body {
font-family: Verdana, Arial, Helvetica, "sans-serif";
font-size: 11px;
color: #999;
background-color: #eee;
background-image: url('/images/head.jpg/);
background-repeat: no-repeat;
background-position: left;
}

allerdings seh ich da immer noch niergends ein bild. also weder links noch sonst wo. woran kann das denn liegen?
 
man0l0 schrieb:
also wenn ich es so mache, wie in deinem link, dann sieht das also so aus:

body {
font-family: Verdana, Arial, Helvetica, "sans-serif";
font-size: 11px;
color: #999;
background-color: #eee;
background-image: url('/images/head.jpg/);
background-repeat: no-repeat;
background-position: left;
}

allerdings seh ich da immer noch niergends ein bild. also weder links noch sonst wo. woran kann das denn liegen?
Zum Vergrößern anklicken....

Hast du dein CSS schonmal validieren lassen? ich denke, dass die Pfadangabe für "background-image" durch das Hochkomma und den ersten und letzten Schrägstrich fehlerhaft sind.

PS: Laut SELFHTML steht der erste Wert bei "background-position" für die horizontale und der zweite für die vertikale Ausrichtung. Strenggenommen muss es dann statt "bottom left" "left bottom" heißen.
 
man0l0 schrieb:
also wenn ich es so mache, wie in deinem link, dann sieht das also so aus:

body {
font-family: Verdana, Arial, Helvetica, "sans-serif";
font-size: 11px;
color: #999;
background-color: #eee;
background-image: url('/images/head.jpg/);
background-repeat: no-repeat;
background-position: left;
}

allerdings seh ich da immer noch niergends ein bild. also weder links noch sonst wo. woran kann das denn liegen?
Zum Vergrößern anklicken....
okay.
ERSTENS: wenn du mit einem WordPress Template arbeitest, und du in deinem Theme-Ordner einen "images" Unterordner mit dem "head.jpg" Bild drin hast, dann muss die Zeile lauten (inklusive Apostrophen-korrektur):
Code: 
background-image: url('images/head.jpg');
Durch den Anfangs-Backslash hast du nämlich die URL auf den Root bezogen. Also relative Pfade, dann bleibt alles im Theme-Ordner.

ZWEITENS gibt es nicht, weil ich eh schon alles bei ERSTENS reingeschrieben habe :D
 
Zuletzt bearbeitet von einem Moderator:
mores schrieb:
wenn du mit einem WordPress Template arbeitest, und du in deinem Theme-Ordner einen "images" Unterordner mit dem "head.jpg" Bild drin hast, dann muss die Zeile lauten (inklusive Apostrophen-korrektur):
Code: 
background-image: url('images/head.jpg');
Zum Vergrößern anklicken....

Ist es Wordpress-spezifisch, dass der Pfad zur Grafik zwischen Hochkommas gesetzt werden muss?
 
Zuletzt bearbeitet von einem Moderator:
nein, ist das falsch?
Ich bilde mir ein dass ich es auch so habe ... moment .... nein, ich habe Gänsefüsschen.
 
Also beim W3C ist weder von Hochkommas noch von Gänsefüßchen die Rede. Insofern kann ich mir diese Schreibweise, ggf. in Verbindung mit CMS u. U. als Fehlerquelle vorstellen.
 
ok, danke euch beiden. hat jetzt geklappt.
nur wie bekomm ich die grafik jetzt auf die oberste ebene? weil so schauts ja komisch aus...
achso, und wie muss ich das mit der fensterhöhe definieren, dass es immer am browserrand steht?
 
Das setzt du ans Dokumentenende vor </body> (style-Angabe gehört natürlich korrekterweise ins Stylesheet)
HTML: 
<style type="text/css">
#gras
{
	position: absolute;
	background: url(images/gras_links.png) no-repeat;	
	left: 0;
	width: 615px;
	height: 500px;
	margin-top: -500px;
}
</style>
<div id="gras"></div>
Wie du das PNG auch für IE < 7 transparent bekommst, gibts in diesem Forum genügend Hinweise.
 
Hmm, dann musst du eine andere Lösung wählen.
Erstelle ein DIV mit dem Bild drin, etwas so:
<div style="position: absolute; left: 0px; top: 100%; margin-top: -50px;"><img src="wiese.png"></div>
Zum Vergrößern anklicken....
Wobei du den margin-top auf die Höhe des Bildes setzt. Dann kannst du mit dem z-index auch die Ebene definieren, auf der sich das Bild befindet. Über allem drüber, oder unter allem, oder was weiss ich.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben Unten