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

Hintergrundbild fixed

G

GrafAlucard

Neues Mitglied
hallo alle zusammen,

in der suche habe ich nicht genau gefunden was ich suche, ich hoffe ihr könnt mir helfen.
ich möchte ein bild als hintergrundbild im body per css machen. klappt auch alles soweit. leider wird das bild bei den verändern der seite, also größer oder kleiner scrollen mit der maus nur so dargestellt wie ich es nicht will, da dann weiße streifen auftauchen.

ich möchte das bild so, das es egal wie die auflösung oder sonst was ist, immer 100% ausfüllt.
quelltext:
body {
color: white;
background-image: url(bg.jpg);
background-position: center;
background-repeat: no-repeat;
background-attachment: scroll;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 0.8em;
line-height: 1.5;
}

ich habe es schon mit width: 100%; versucht aber das nimmt er nicht für das bild.

gruß Graf
 
Hallo,

Der folgende CSS-Code funktioniert in allen modernen Browsern und IE ab Version 9, da es sich um eine neue CSS3 Eigenschaft handelt. Ältere Browser zeigen das Bild zentriert in der Mitte mit der original Grösse an.
Wichtig ist, dass du dem Element html und body jeweils die Höhe und Breite von 100% zuweist.

Code: 
html {
    height: 100%;
    width:100%;
}
body {
    height:100%;
    width:100%;
    font-family:verdana, arial, sans-serif; font-size:12px;
    background-image: url(bg.jpg);
    background-repeat:no-repeat;
    background-position:center center;
    background-attachment:fixed;
    -o-background-size: 100% 100%, auto;
    -moz-background-size: 100% 100%, auto;
    -webkit-background-size: 100% 100%, auto;
    background-size: 100% 100%, auto;
}

Die Browser-Präfixe kann man in Zukunft auch weglassen.
 
und was anderes noch, wenn ich in meinem menü auf einen punkt klick läd der ja neu, da flackert das bild immer erst einmal kurz weiß, weiste wie ich das noch dazu weg bekomme?

und wie kann ich jetzt anchdem allesauf 100% steht dan wrapper noch runterstellen? mir ist die ganze seite an sich zu breit, würde die lieber statt 100 auf 85 setzen
 
Zuletzt bearbeitet:
muss ich das jetzt in de css oder in die html dateien eintragen?
Zum Vergrößern anklicken....
Lesen und verstehen ist wohl auch eine Kunst. Ich schrieb:"Der folgende CSS-Code ".
Somit kommt der Code-Schnipsel in die CSS-Datei und zwar an den Anfang.

wenn ich in meinem menü auf einen punkt klick läd der ja neu
Zum Vergrößern anklicken....
Wer? Der Menüpunkt? Nö, der ist im Speicher, warum soll der neu geladen werden.

Nutzt du etwa Frames?
 
neee frames nicht, ich meine das bild der hintergrund läd neu, und flackert da kurz weiß auf.

und wie kann ich jetzt anchdem allesauf 100% steht dan wrapper noch runterstellen? mir ist die ganze seite an sich zu breit, würde die lieber statt 100 auf 85 setzen?

p.s. ich mache HTML seit ca ner woche:(
 
Graf Alucard möge doch den kompletten HTML- und CSS-Code ins Wunschforum stellen, damit die untertänigen Zauberposter, denen die Glaskugel gerade in den Brunnen gefallen ist, sich der Sache annehmen können.
 
ich kann nicht von den css dateien und den html seiten alles rein stellen.

es tut mir echt leid das ich noch so ein anfänger bin, aber du bist bestimmt auch nicht als profi auf die welt gekommen, keiner zwingt dich mir zu helfen, aber mit so nem text brauchste mir nicht kommen...
da lieber verzichte ich auf deine hilfe!
 
der code ist ok. habe jetzt soweit alles hinbekommen was gehen soll. nur das dumme hintergrundbild blitzt 1x weiß auf wenn ich mich im menü bewege.
quasie, du bist auf der startseite udn klickst auf impressum, da ändert sich ja zb der text im textbereich. und bei diesem wechsel blitzt der hintergrund weiß auf.
 
Ich verstehe wohl dein Problem, nur ist es ohne Code wirklich nicht nachvollziehbar. Es reicht auch wenn du nur den HTML und CSS code der Seite wo das Problem auftritt hier reinstellst. Kannst ja den Text rauslöschen, der hier niemanden etwas angeht.

Normalerweise tritt das Problem nur auf wenn Hintergundbilder neu geladen werden müssen und diese sehr gross sind, es kann auch ein langsamer Hoster Schuld sein, aber das ist alles wie fischen im trüben Wasser.
 
ok ich geb mal den text rein, nicht wundern, ist ein text der nach einem buch entstanden ist und jetzt passend abgeändert wird^^ die css ist kein ding, nur bei der html weis ich nicht was ich dir da geben soll, denn das tritt ja auf der ganzen seite auf.
hier aml der css code:

html {
height: 100%;
width: 100%;
}
body {
height: 100%;
width: 100%;
font-family:verdana, arial, sans-serif; font-size:12px;
background-image: url(bg.jpg);
background-repeat:no-repeat;
background-position:center center;
background-attachment:fixed;
-o-background-size: 100% 100%, auto;
-moz-background-size: 100% 100%, auto;
-webkit-background-size: 100% 100%, auto;
background-size: 100% 100%, auto;
line-height: 1.5;
}
#wrapper {
color: black;
background-color: white;
width: 80%;
border: 2px solid #b79348;
margin-top: 15px;
margin-right: auto;
margin-bottom: 15px;
margin-left: auto;
}
#kopfzeile {
position: relative;
color: black;
background-color: #B2EB8F;
padding-top: 15px;
padding-right: 20px;
padding-bottom: 38px;
padding-left: 20px;
}
#kopfzeile p {
position: absolute;
left: 10px;
font-variant: small-caps;
font-size: 105%;
font-weight: bold;
color: #434242;
}
#kopfzeile p span {
color: silver;
font-style: italic;
}
#kopfzeile img {
position: absolute;
right: 10px;
}
#navigation {
color: black;
background-color: #B2EB8F;
padding-top: 10px ;
padding-right: 0px;
padding-bottom: 3px;
padding-left: 20px;
border-bottom-width: 2px;
border-bottom-style: solid;
border-bottom-color: gray;
}
#navigation ul {
margin-bottom: 0;
}
#navigation li {
display: inline;
margin: 0;
}
#navigation a {
color: black;
background-color: #f3ffb1;
text-decoration: none;
padding-top: 4px;
padding-right: 10px;
padding-bottom: 4px;
padding-left: 10px;
border-width: 2px;
border-style: solid;
border-color: gray;
}
#navigation a:hover {
color: black;
background-color: white;
}
#navigation a:active {
color: black;
background-color: blue;
}
#startseite #navi01 a,
#informationen #navi02 a,
#impressum #navi03 a {
color: black;
background-color: white;
border-bottom-color: white;
font-style: italic;
}
#textbereich {
padding: 20px;
}
#fusszeile {
color: black;
background-color: #B2EB8F;
text-align: center;
padding-top: 10px;
padding-bottom: 5px;
}
p, ul {
margin-top: 0 ;
margin-right: 0 ;
margin-bottom: 1em ;
margin-left: 0;
}
ul ul {
margin: 0;
}
li {
margin-top: 0 ;
margin-right: 0;
margin-bottom: 0;
margin-left: 1em;
}
#textbereich h1 {
font-size: 145%;
letter-spacing: 1pt;
}
#textbereich h2 {
font-size: 125%;
letter-spacing: 1pt;
}
a:link { color: red; }
a:visited { color: maroon }
a:hover { background-color: #ffeda0; }
a:active { color: white; background-color: red; }

/*Gestaltung der Tabelle*/
table {
width: 100%;
text-align: center;
background-color: #F3FFB1;
color: black;
border-width: 2px;
border-style: solid;
border-color: #D6D5D5;
border-collapse: collapse;
}
th {
padding: 5px;
font-variant: small-caps;
background-color: #9DD1D1;
color: black;
border-width: 1px;
border-style: solid;
border-top-color: white;
border-right-color: gray;
border-bottom-color: gray;
border-left-color: white;
}
td {
padding: 3px;
border-width: 1px;
border-style: dashed;
border-color: #D6D5D5;
}
tr.zebra {
background-color: #D5F238;
color: black;
}
td.variante1 {
background-color: #BDF9F9;
color: black;
}
td.variante2 {
background-color: #93E3E3;
color: black;
}
tr:hover {
background-color: #9cc;
color: #000;
cursor: pointer;
}
 
Zuletzt bearbeitet:
Bei der HTML die gesamte HTML-Datei.
Der CSS-Code ist in Ordnung.
Wie gross ist denn dein bg.jpg Bild.
Welchen Browser nimmst du zum testen.
 
ich nehme firefox und das bild ist ca ein halbes MB.
ok mal kurz ne frage, ich ahbe 2 css dateien, eine für den style den anderen wegen drucken der seite.
bei den html habe ich die index seite und dann für jeden menüpunkt ne neue html datei. diese wird aber gesamt genommen und nicht in der box textteil geladen sondern komplett. quasie das was auf der index seite ist ist identishc mit der zb impressum, nur der inhalt anders im textteil.
ich zeig dir mal den code der index html:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>KGV-Einigkeit e.V.</title>
<link rel="stylesheet" type="text/css" href="mylayout.css" media="screen" />
<link rel="stylesheet" type="text/css" href="printlayout.css" media="print" />
</head>
<body id="startseite">
<div id="wrapper">
<!-- im Browser sichtbarer Teil -->
<div id="kopfzeile">
<p><span>KGV-Einigkeit e.V.</span></p>
<img src="logo.png" alt="Logo" width="80" height="80" />
</div>
<div id="navigation">
<ul>
<li id="navi01"><a href="index.html">Startseite</a></li>
<li id="navi02"><a href="vereinsgeschichte.html">Vereinsgeschichte</a></li>
<li id="navi03"><a href="vereinsleben.html">Vereinsleben</a></li>
</ul>
</div>
<div id="textbereich">
<h1>Überschrift</h1>
<p>Satz<br />
Satz</p>
<h2>kleine Überschrift</h2>
<p>Satz</p>
<ul>
<li>erste Ebene
<ul>
<li>Satz</li>
<li>Satz</li>
</ul>
</li>
<li>wieder die erste Ebene</li>
<li>wieder die erste Ebene</li>
<li>wieder die erste Ebene</li>
</ul>
<p>Satz
<a href="http://www.css-einfach.de" title="Quickinfo">Link</a> Satz</p>
</div>
<div id="fusszeile">
© by Heinz Homepagebauer
</div>
</div>
</body>
</html>
 
Habe das jetzt mal mit mehren Browsern und einer 470kB grossen Grafik getestet. FF, Chrome und Safari flackert bei mir nicht, IE8 und Opera flackern dagegen. Sieht man auch schön wenn man F5 drückt.

Das Flackern kommt vom neuen Laden der Hintergrundgrafik und ist Einstellungssache des Browsers. Es wird sich somit kaum vermeiden lassen. Allerdings ist dein Bild auch sehr gross von der Dateigrösse her. Etwas Abhilfe schaffst du, in dem du zusätzlich eine Hintergrundfarbe definierst, die nicht so kontrastreich ist, wie dein weiss.
 
also lieber grau nehmen? und das bild verkleinern?
edit: ok bild geändert und es flackert nix mehr:) danke:)

ps das nächste problem^^ ich wollte die ecken abrunden, mit dem border-radius: 10px; das geht auch... aber bei meiner kopfzeile amcht er dann ja alle 4 ecken rund, aber es sollen ja nur die oberen runde werden. bei dem befehl mit top drin geht aber gar nix mehr. nur der normale geht. liegt das am firefoy? habe auch mit dem -*- davor probieret was ja speziell für ihn gedacht is aber nix.
 
Zuletzt bearbeitet:
das schon kalr, nur ich will nicht 4 ecken amchen sondern 2.
dazu das top in den befehl rein. leider zeit der befehl mir dann nichts mehr an^^
also das was er mahcne soll ist in der page nicht zu sehen...
entweder alle ecken rund oder gar keine^^
 
Div#beispiel
{
border: solid 3px red;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
Erstellt im Container beispiel einen roten Rahmen mit 3Pixeln dicke und die beiden oberen Ecken abgerundet.

Getestet im FF, Chrome, Safari und Opera.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben