• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Background

J

Johannes11

Neues Mitglied
Hallo zusammen,

ich habe gerade ein kleines (und sehr simples) Problem. Ich möchte bei einer Seite ein Hintergrundbild einfügen, auf welchem sich dann das Menü und Links etc befinden. Wenn ich das Bild als <img src= .. einfüge, lässt sich keine Schrift darauf positionieren, da es ja nicht im Hintergrund ist. Wenn ich es in CSS im body als background: url .. einfügen, ist das Bild zwar im Hintergrund, aber wiederholt sich nahtlos (Kacheleffekt). Das Bild soll aber einzeln im zentrierten Wrapper sein. Kann mir da jemand helfen?

Vielen Dank und Grüße ..
 
Da im Stylesheet, wo du auch den Hintergrund definierst.

Etwa
Code: 
element {
    background-iamge: url(foo/bar.png);
    background-position: no-repeat;
}
 
Hi, erstmal vielen Dank. Ich habs jetzt so im Body eingetragen, aber das Problem ist, dass das Bild dann nicht mehr (im Wrapper) beim Fenster-vergrößern, zentriert ist. Und wenn ich den Code in den Wrapper-Stylesheet packe, ist es nicht mehr zu sehen ..?
body {
background-image: url(../img/site.png);
background-position: no-repeat;
}
 
CSS:

body {
font-family:Arial, Helvetica, sans-serif;
font-size:11px;
margin:0px;
padding:0px;
line-height: 20px;
text-align:center;
list-style-type:none;
color: #3e3d40;
background-image: url(../img/site.png);
background-repeat:no-repeat;
}




#wrapper {
width:1024px;
margin: 0 auto;
text-align:left;
}

HTML: (Ist gerade am Anfang bzw. noch nicht drinne)

<body>


<div id="wrapper">
















</div>




</body>
</html>
 
Das Bild wird angezeigt und bewegt sich auch zentral, wenn ich das Fenster skaliere. Jetzt ist das Problem, wenn ich Text einfüge, dieser sich im Wrapper bewegt. Das Bild bleibt aber auch wenn ich das Fenster ganz schmal ziehe immer mittig
 
Ja genau. Bis zu einem gewissen Grad bleibt der Text proportional auf dem Hintergrund, aber wenn das Fenster kleiner wird als der Wrapper, dann sieht man den Text nicht mehr (wie es auch soll). Der Hintergrund bleibt aber auch bis zum schmalsten Grade immer zentriert (er soll bei der Originalgröße immer zentriert sein, aber wenn das Fenster kleiner als diese ist, soll die Seite dann nur an dieser Seite "angeschnitten" sein .. keine Ahnung woran es liegt
 
Hallo,

Das Bild gehört in den Wrapper, wenn es sich so verhalten soll wie du es wünscht.

und Vitus37 schrieb
Ohne Inhalt hat dein Wrapper keine Höhe, also kann auch kein Bild angezeigt werden.
Zum Vergrößern anklicken....

Genau, du gibst also den Selektoren HTML Body und Wrapper die Höhe von 100%, dann wird es auch angezeigt und nichts verrutscht mehr.
Zudem musst du in deinem HTML-Code den Doctype angeben und den Zeichensatz.

Vitus37 hat übrigens ein sehr gutes Video bei Youtube reingestellt, wie man eine Webseite erstellt. Sehr lehrreich, wie ich finde.
Interessant ist das Vorgehen hierbei, das gerade Anfängern ein Gefühl vermitteln sollte wie man es machen sollte.
Hier findet man sein Video:
http://vlmedia.de/824/erstellung-einer-webseite-im-zeitraffer#more-824
 
Zuletzt bearbeitet von einem Moderator:
Ich habe jetzt das Bild in den Wrapper getan. Wenn das Fenster groß genug ist, bleibt es auch immer zentriert zusammen mit der Schrift (Bild 1). Wenn das Fenster aber kleiner als das Bild wird, "verschwindet" es aber nach links hin raus bzw bleibt dann auch noch zentriert, so dass die Schrift nicht mehr auf der richtigen Position ist (Bild 2). Weiss jemand woran das liegt?

Bild 1 Bild 2
Bildschirmfoto 2011-11-23 um 14.52.08.jpg Bildschirmfoto 2011-11-23 um 14.52.34.png
 
Ja super, jetzt klappts. Vielleicht kannst Du mir noch bei einem anderen Problem helfen (bzw. zwei). Ich habe oben links ein Logo Button eingefügt, welcher aber an der Oberkante "klebt". Wenn ich ihn mit margin anspreche bewegt er sich nur nach links oder rechts, aber geht nicht von der Oberkante weg. Ich habe es so im HTML-Dokument eingefügt:
<span style="margin:60px;">
<a href=><img src="img/logo.png"><a href="index.html"</a>
</span>

Das zweite Problem habe ich gerade bei der Vorschau in Firefox gesehen (sonst habe ich es mir nur in Safari angeguckt, wo alles normal aussah), wo das Logo einen farbigen Rahmen hatte. Weisst Du wie ich diesen wegkriege?

Viele Grüße
 
Falls Border:0 nicht den gewünschten Effekt bringt:

Border:0 ist nur dann richtig wenn es einen Rahmen gibt, der vorher erzeugt wurde. Ich denke hier handelt es ich aber um den Outline-Rahmen wie er bei Bildern erscheint, die schon mal angeklickt wurden.

Mit outline-style:none sollte es behebbar sein.
 
habe beides ausprobiert, sowohl in HTML: <span style="outline-style:none"> als auch im Stylesheet: #logo { outline-style:none }, aber der Rand bleibt in Firefox ..
 
Hast du eine Möglichkeit das mal hochzuladen oder stell den ganzen Code mal hier rein, damit man sich das mal ansehen kann.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben