Hintergrund an die Auflösung anpassen

[AzRaIL]

Moin,

ich weis nicht wie oft das hier gefragt wird aber ich hab ein großes Problem bei der erstellung einer Website

Die Seite soll ganz simpel aufgebaut sein, ein Hintergrundbild auf dem später etwas Text stehen soll

Jetzt gibt es ja mehrere Möglichkeiten dieses Bild reinzusetzen
zurzeit ist es in einem div tag das folgendermaßen aussieht:

<div id="bg"><img src="images/bg-1.jpg" width="100%" height="100%" alt=""></div>

Das funktioniert sogar fast, jedoch nimmt das Bild nicht den ganzen Platz ein sondern lässt noch einen weißen Rand

Ich bin noch relativ neu in sachen html und weis ehrlich gesagt nicht wie ich das Problem beheben soll :-(

Eine zweite Sache die mich stört ist, dass das ganze in einem div tag steht
Es gibt doch sicherlich noch andere, bessere Methoden oder?

hoffe ihr könnt mir weiterhelfen

lg

 

[prm]

Den id "bg" kannst du auch direkt dem image zuweisen. Sieh dir mal diese Konstruktion an.

Was den Rand betrifft, versuch's mal damit:

html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}

 

[cobrastyle]

Hmm ich hab hier mal gesagt bekommen das man NIEMALS Bilder oder die Webseite ansich an die Auflösung anpassen soll , sondern:

Das bild zb. 1280x1024px, und den Background einfach mit einer Farbe ausfüllen soll ..

 

[AzRaIL]

Den id "bg" kannst du auch direkt dem image zuweisen. Sieh dir mal diese Konstruktion an.

Was den Rand betrifft, versuch's mal damit:

html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}

Danke, hat geklappt damit
aber jetzt hab ich ein anderes Problem
hört sich jetzt bisschen Dumm an aber wie kann ich denn nun text auf das Bild schreiben?
denn wenn ich was über das div tag schreibe wird das Bild verkleinert und der Text steht drüber

@cobrastyle:

Also bei mir funktioniert es
Das Bild ist 1024 x 768 px groß und es wird automatisch vergrößert (ist zwar etwas pixeliger aber egal)

edit: Ok, das hab ich nun auch hinbekommen mit folgendem quelltext:

#content {
    position: absolute;
    top: auto;
    left: 275px;
    width: 100%;
    height: 100%;
    z-index: 2;
    overflow: auto;
    color:#FFFFFF;
    font-family:Arial, Helvetica, sans-serif;   
}

Hab halt noch ein div tag definiert und dann diese einstellungen übernommen
jetzt stört mich aber eine Sache...
und zwar das

left: 275px

kann man das nicht irgendwie einstellen das es immer in der Mitte steht?

 

[prm]

Setze innderhalb des #content noch einen Div für den gesamten Inhalt.
Gib dem eine fixe Breite und zentriere ihn so: Horizontale Zentrierung mit CSS

 

[Elroy]

Also ich würde ja sagen binde das Bild als Hintergrundbild ein. Ich glaube das ist genau das was du sucht.

 

[AzRaIL]

Also ich würde ja sagen binde das Bild als Hintergrundbild ein. Ich glaube das ist genau das was du sucht.

Ist zwar schon etwas älter aber ich hab das Problem immernoch
undzwar habe ich das Bild jetzt in Css als Background-Image eingebunden
jedoch wird es nicht vergrößert wenn ich die Auflösung höher stelle
das sieht dann so aus:

Pic-Upload.de - Kostenlos Bilder & Fotos hochladen

hier der Css Code:

#content {
    background-image: url(../images/bg-1.png);
    background-repeat: no-repeat;
    background-position: center;
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 2;
}

 

[prm]

Hintergrundbilder lassen sich nicht skalieren.
Deshalb musst du mit diesem "Trick" arbeiten: Bildschirmfüllende Hintergrundgrafik