Hintergrundgrafik fixieren

**ptn_n** · 31.10.2010 19:02

Hallo

Ich würde gerne die Hintergrundgrafik fixieren.
In der Sufu habe ich nichts gefunden und die google ergebnisse haben mir nicht den erfolg gebracht.

Das muss man ja in der css machen nehme ich an wenn ich den befehl eingebe.

Code:

<body style="background-image: url(images/bild.gif);
 background-attachment:fixed;">

Seiteninhalt ...

</body>

Passiert da garnix.

Wie muss das denn bei mir aussehen das der Bg fixierd ist.

Hier ma meine Css.Ich komme infach nicht drauf.

HTML-Code:

body {
	background:url(../images/bg.png) repeat-x #e9e9e9;
	font-size: 13px;
	color:#666;
	font-family:Tahoma, Verdana, sans-serif;

	margin-top:0;
	margin-bottom:25px;
	margin-left:0;
	margin-right:0;
}

a:link, a:visited {
	text-decoration:none;
	font-weight: bold;
	color:#555;
}

a:hover, a#active_menu-nav{
	text-decoration:none;
	color:#999;
}

a img {
	border:none;
}


.clr {
	clear:both;
}


/*****************************************/
/*** Template specific layout elements ***/
/*****************************************/

#full {
	margin:0 auto;
	width:920px;
}

#head {
	height:150px;
	width:878px;
	background:url(../images/head_bg.gif) repeat;
	border: 1px solid #cfcfcf;
	padding:20px;
	overflow:hidden;
}

#logo {
	float:left;
	margin-left:20px;
	margin-top:20px;
	margin-right:20px;
	width:300px;
	background:transparent;
}

#newsflash {
	margin-left:400px;
	opacity:0.7;
	filter: alpha(opacity = 70);
	max-height:120px;
}

#newsflash:hover {
	opacity:1;
	filter: alpha(opacity = 100);
}

#topnav {
	width:920px;
	height:120px;
	margin-top:-2px;
	background:url(../images/blue/bar.png) no-repeat;
}


/* horizontal menu */

#pillmenu {
	text-align:left;
	margin: 0;
	margin-left:15px;
	}
	
#pillmenu ul {
	margin: 0;
	padding: 0;
	list-style: none;
	line-height:50px;
	}
	
#pillmenu li {
	float: left;
	margin-bottom:0;
	margin-right:0;
	height:50px;
	width:115px;
	background-image:url(../images/btn_top.png);
	background-repeat:no-repeat;
	text-align:center;	
	}

#pillmenu li a {
	font-family:Tahoma, Verdana, sans-serif;
	color:#fff;
	font-size: 12px;
	font-weight: bold;
	text-align:center;
	display: block;
	line-height:49px;
	text-decoration: none;
	text-transform:uppercase;
	}

#pillmenu li a:hover {
	color:#000;
	opacity:1;
	filter: alpha(opacity = 100);
	}

#pillmenu li:hover {
	background:#fff;
	opacity:0.3;
	filter: alpha(opacity = 30);
	}

#breadcr {
	height:29px;
	background:url(../images/breadcr_bg.png) repeat-x;
	border:1px solid #cfcfcf;
	padding-left:15px;
	line-height:29px;
}

#contcontainer {
	border:1px solid #b4b4b4;
	background:#f8f8f8;
}

#sidebarleft {
	float:left;
	display:inline;
	margin-right:15px;
	padding:10px;
	width:225px;
	border-right:1px solid #e1e1e1;
	background:#f1f1f1;
}

#content {
	margin:15px 15px 15px 15px;
}

#bottommods {
	background:#e2e2e2;
	border:1px solid #b4b4b4;
	border-top:1px solid #e2e2e2;
}

#footer {
	width:920px;
	height:50px;
	margin-left:0px;
	line-height:50px;
	background:url(../images/blue/footer.png) no-repeat;
	color:#fff;
}



/*****************************************/
/*** Joomla! specific content elements ***/
/*****************************************/


h1,.componentheading {
margin-left:2px;
font-size:1.5em;
color:#555;
text-decoration:none;
height:20px;
line-height:20px;
}

h2,.contentheading {

font-size:1.5em;
color:#555;
text-decoration:none;
height:20px;
line-height:20px;
}

h3 {
	
}


h4 {
font-size:1.2em;
}


h5 {
	font-size:1.1em;
}


h6 {
	font-size:1em;
	font-weight:700;
}

#footer,.small,.createdate,.modifydate,.mosimage_caption {
	font:0.5em;
	color:#999;
}


.breadcrumbs {
	font-weight:bold;
}

.pathway {
	padding-bottom:8px;
	display:inline-block;
}


.contentpane {
	width:640px;
}





table.moduletable th {
  color: #666;
}

.moduletable_menu li {
	list-style-type:none;
	line-height:30px;
	margin:0 0 1px -38px;
	width:217px;
	/*height:30px;*/
	background:url(../images/nav_bg.png) no-repeat left top;
	opacity:0.6;
	filter: alpha(opacity = 60);
}

.moduletable_menu li:hover {
	opacity:1;
	filter: alpha(opacity = 100);
}

.moduletable_menu li a{
	width:210px;
	font-weight:bold;
	color:#666;
	text-align:left;
	text-decoration:none;
	padding:0 0 0 15px;
}

.moduletable_menu li a:hover{

}

.moduletable_menu li li a:hover{
	color:#000;
}

.parent .active {
	color:#000;
}

#current a {
	color:#000;
}

.moduletable_menu li li {
	margin:0 0 0 -32px;
	height:30px;
	width:208px;	
	border-top:1px solid #c4c4c4;
}

.moduletable_menu li li a{
	background:url(../images/menue_bg.png) no-repeat left center;
	padding:0 0 0 20px;
	
}

.moduletable_menu li:hover{

}

table.moduletable th {
	font-size:1.3em;
	color:#330066;
	text-decoration:none;
	background:url(../images/menue_balken_blau.png) no-repeat left center;
	padding-left:15px;
}





div.moduletable,
div.moduletable_menu {
	
}

div.moduletable h3,
div.moduletable_menu h3 {
	color:#666;
	font-size:14px;
	margin: 0;
	margin-bottom:5px;
	margin-top:5px;
	font-weight: bold;
	padding-left:15px;
	background: url(../images/mod_bg.png) no-repeat top left;
	overflow:hidden;
	height:42px;
	line-height:40px;
	
}





/* spacers */
span.article_separator {
	display: block;
	height: 20px;
}

.article_column {
	padding-right: 5px;
}

.column_separator {
	border-left: 1px dashed #e0e0e0;
	padding-left: 10px;
}

td.buttonheading {

}

td.buttonheading img {
	border:none;
}

.clr {
	clear: both;
}

td.greyline {
  width: 20px;
  background: url(../images/mw_line_grey.png) 50% 0 repeat-y;
}

div#maindivider {
  border-top: 1px solid #ddd;
  margin-bottom: 10px;
  overflow: hidden;
  height: 1px;
}

table.blog span.article_separator {
	display: block;
	height: 20px;
}




/* System Standard Messages */
#system-message { margin-bottom: 20px; }

#system-message dd.message ul { background: #C3D2E5 url(../../system/images/notice-info.png) 4px center no-repeat;border-top: 3px solid #DE7A7B; margin:0px; padding-left: 40px; text-indent:0px;}


/* System Error Messages */
#system-message dd.error ul { color: #c00; background: #E6C0C0 url(../../system/images/notice-alert.png) 4px center no-repeat; border-top: 3px solid #DE7A7B; margin:0px; padding-left: 40px; text-indent:0px;}


/* System Notice Messages */
#system-message dd.notice ul { color: #c00; background: #EFE7B8 url(../../system/images/notice-note.png) 4px center no-repeat; border-top: 3px solid #F0DC7E; margin:0px; padding-left: 40px; text-indent:0px;}




/* forms */
table.adminform textarea {
  width: 540px;
  height: 400px;
  font-size: 1em;
  color: #000099;
}

form#form-login fieldset { border: 0 none; margin: 0em; padding: 0.2em;}
form#form-login ul { padding-left: 20px; }

form#com-form-login fieldset { border: 0 none; margin: 0em; padding: 0.2em;}
form#com-form-login ul { padding-left: 20px; }

Ich habe hier zb nen 22" Tft Widescreen,andere haben vieleicht noch nen 17" Röhrenmonitor.
Die Hintergrundgrafik sollte aber in allen Auflösungen voll zu sehen sein ohne das man groß Scrollen muss.

Mir wurde bisher hier super geholfen und hoffe auch dieses mal auf eure tolle Hilfe.

Als Style verwende ich: tvilium-1.0
Link zu meiner Seite: http://www.mjpythons.de/

mfg und dank im vorraus

**C.A.M** · 31.10.2010 19:27

Moin, moin.

Versuchs mal damit:

body {
background:url(../images/bg.png) repeat-x #e9e9e9;
background-attachment:fixed;
font-size: 13px;
color:#666;
font-family:Tahoma, Verdana, sans-serif;

margin-top:0;
margin-bottom:25px;
margin-left:0;
margin-right:0;
}

Hat mir die Tante Google verraten und funzt bei mir auf mehren Seiten prima !

MfG, C.A.M .

**mont-bit** · 31.10.2010 19:28

CSS-Code:

Code:

body {
	background:url(../images/bg.png) repeat-x #e9e9e9;
	background-attachment:fixed;
        .........
}

Der rote Code fixiert Dir den Background, wenn der Inhalt gescrollt wird.

Edit: C.A.M war schneller mit der richtigen Antort

**ptn_n** · 31.10.2010 19:51

WoW super das hat schon mal geklappt.Vielen Dank dafür.
Nun habe ich noch nen neuen Hintergrund erstellt in der Auflösung 1600x900(meine Auflösung)

Ich sehe ja das Bild dann ganz normal,aber sobald einer kommt und hat nur 1024x768 muss er scrollen oder ?

Aber auch da solle sich der Hintergrund an der Auflösung der Besucher anpassen,wie geht das ?

mfg

**mont-bit** · 31.10.2010 19:55

Stop!!!
So ein grosses Bild ist irre.
Mach ein Streifen von 1px breite und schreibe neu in Body die Zeile -> background-repeat: repeat-x;
und nur so hoch, bis der Balken fertig ist. die Hintergrundfarbe übernimmt den Rest.

Edit: Welches Hintergrund Bild ist nun das Endgültige? Vorher war es hellgrau mit einem Balken oben und nun dunkelgrau mit einer Schlange unten links.

**ptn_n** · 31.10.2010 20:07

Hallo

Ich bin gerade dabei den Hintergrund zu erstellen.
Unten Links ne Schlange und unten rechts soll eine kommen.

mfg

**C.A.M** · 31.10.2010 20:08

Mein Bg ist sogar 1920px .

Einen Dynamischer BG ist nicht so einfach zu reallisieren.

Vor ein Paar Wochen hab ich jedoch mal einen Bericht darüber überflogen den ich aber auch grad nicht auf die schnelle wiederfinde.

Tante Google weis fast alles, man darf halt nur nicht so schnell aufgeben.

MfG, C.A.M .

**mont-bit** · 31.10.2010 20:13

Aber niemals so ein riesengrosses Hintergrundbild!

Das musst Du unbedingt anders lösen. Lies Dich auf SelfHtml schlau, wie Du mit "Z-Index" Sachen positionieren kannst. Nur so als Tipp am Rande bemerkt.

**ptn_n** · 31.10.2010 20:19

Hallo

Was ist so schlimm an so nem großen Hinergrundbild ?
Verstehe gerade die Aufregung deswegen nicht ?

mfg

**mont-bit** · 31.10.2010 20:23

Nicht jeder verfügt über einen superschnellen Internetzugang.

Dasselbe Verbrechen, Thumbnails anzuzeigen die von 1200x800 auf 120x80 im Browser skaliert werden.

Edit: Spätestens dann, wenn Deine Site jede menge Besucher aufweist und Deine Trafficgrenze überschritten wird, Du für den Mehrtraffic zur Kasse gebeten wirst, wirst Du überlegen, wie Du den Traffic verringern kannst.

Thema: Hintergrundgrafik fixieren

LinkBack

Themen-Optionen

Thema durchsuchen

Anzeige

Hintergrundgrafik fixieren

Backgrount Fixieren

Erhielt Danksagungen von:

Erhielt Danksagungen von:

Backgrount Fixieren

Erhielt Danksagungen von:

Erhielt Danksagungen von:

Erhielt Danksagungen von:

Lesezeichen

Lesezeichen

Berechtigungen