Hintergrundbild zentrieren

lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript

Autor dieses Themas

13:31, 23.4.2011

Hallo,
ich schreibe grade an einer kleinen Seite.
Nun habe ich aber grade ein Problem damit, das Hintergrundbild des Contentbereiches zu zentrieren.
Mein HTML-Code sieht so aus:

<div id="content">
	<div class="con_ui con_title"><h2>Newstitel 1</h2></div>
    	<div class="con_ui con_cont">
        <div class="con_middle">
Newsinhalt 1
        </div>
        <div id="clear"></div>
        </div>
	<div class="con_ui con_bt"></div>
</div>

So..
und jetzt mein CSS-Code:

/* Content anfang */
#content {
	width:576px;
	float:left;
	vertical-align:top;
	margin: 6px;
	color:white;
	
}
	.con_ui {
		background:url(images/content_ui.png);
	}
		.con_title {
			height:55px;
		}
		.con_title h2 {
			float:left;
			font-size:100px;
		    text-shadow:0 2px 4px #000;
			line-height:15px;
			text-indent:20px;
			font-size:18px;			
		}
		.con_bt {
			height:15px;
			background-position:bottom left;
			margin-bottom:0px;
		}
		.con_cont {
			background-position:center right;
			background-repeat:repeat-y;
		}
			.con_middle {
				width:540px;
				margin:auto;
			}
		
/* Content ende */

Das wichtige ist, denke ich das hier, da dort das Hintergrundbild eingebunden wird:

.con_ui {
		background:url(images/content_ui.png);
	}

Nur bekomme ich es nicht hin, das ganze zu zentrieren.
Hat da vielleicht jemand eine Idee zu?

Danke,
Crown Network

Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

lima-city: Gratis werbefreier Webspace für deine eigene Homepage
fatfreddy

fatfreddy hat kostenlosen Webspace.

13:38, 23.4.2011

crown-network schrieb:
Nur bekomme ich es nicht hin, das ganze zu zentrieren.
Hat da vielleicht jemand eine Idee zu?

Guckst Du hier: http://www.css4you.de/background-position.html

FF
~~m******e~~

13:41, 23.4.2011
Und sollte das nicht reichen, bemühe doch mal die Suche, solche Fragen inklusive Antworten gab´s schon.

- Hintergrundbild zentrieren
- Bild zentrieren
Autor dieses Themas
crown-network

crown-network hat kostenlosen Webspace.
17:46, 23.4.2011
Vielen Dank für die schnelle Hilfe!
Konnte das ganze vorhin leider nicht ausprobieren, da ich mega die Kopfschmerzen hatte >.>

Ich komm mit dem background-position nicht zurecht. Ist
```
background-position:center;
```
Denn richtig, oder hab ich da was falsch verstanden?

Normal sieht es so aus: http://npshare.de/files/ae34ed1c/ohnecenter.png
Mit sieht es so aus: http://npshare.de/files/eeb39e7c/mitcenter.png

Die content_ui.png sieht so aus: http://npshare.de/files/771f19dc/content_ui.png
>.>

Beitrag zuletzt geändert: 23.4.2011 17:47:25 von crown-network
galaktica

galaktica hat kostenlosen Webspace.
19:40, 23.4.2011
crown-network schrieb:
Vielen Dank für die schnelle Hilfe!
Konnte das ganze vorhin leider nicht ausprobieren, da ich mega die Kopfschmerzen hatte >.>

Ich komm mit dem background-position nicht zurecht. Ist
```
background-position:center;
```
Denn richtig, oder hab ich da was falsch verstanden?

Normal sieht es so aus: http://npshare.de/files/ae34ed1c/ohnecenter.png
Mit sieht es so aus: http://npshare.de/files/eeb39e7c/mitcenter.png

Die content_ui.png sieht so aus: http://npshare.de/files/771f19dc/content_ui.png
>.>
Wie wärs mit nem Center-Befehl?

Z.B. das in Css rein:
background-position: center;

Ansonsten würd eich den Link von Fatfreddy empfehlen :)

Mfg
Autor dieses Themas
crown-network

crown-network hat kostenlosen Webspace.

22:06, 23.4.2011
background-position: center hab ich doch oben^^
things

things hat kostenlosen Webspace.
0:34, 24.4.2011
crown-network schrieb:
[...]
```
.con_ui {
	background:url(images/content_ui.png);
}
.con_bt {
	height:15px;
	background-position:bottom left;
	margin-bottom:0px;
}
.con_cont {
	background-position:center right;
	background-repeat:repeat-y;
}
```
Das wichtige ist, denke ich das hier, da dort das Hintergrundbild eingebunden wird:
```
.con_ui {
		background:url(images/content_ui.png);
	}
```
Nur bekomme ich es nicht hin, das ganze zu zentrieren.
[...]
Hallo!

Also:
Dein HG ist in con_ui. Dort gibst du aber keine Angaben über die HGposition. Die steht dann automatisch auf "top left".
In con_cont ist die HGpsition "center right" unsinnig. Entweder center ODER right. ;) Wahrscheinlich ist das das Problem - wenn es sich um den Hintergrund in dem Div "con_ui con_cont" handelt. Der richtige Code wäre
```
background-position:top center;
```
Ich hoffe, dass dir das weiter hilft. :)

Grüße
things
fatfreddy

fatfreddy hat kostenlosen Webspace.

0:36, 24.4.2011

galaktica schrieb:
Wie wärs mit nem Center-Befehl?

Z.B. das in Css rein:
background-position: center;

Ansonsten würd eich den Link von Fatfreddy empfehlen :)

Sag mal, liest Du auch die Beiträge, die Du zitierst?

crown-network schrieb:
background-position: center hab ich doch oben^^

Kannst Du die Seite mal irgendwo hochladen? Dann lassen sich Fehler besser erkennen, als bei irgendwelchen Screenshots.

FF
frederik-g

frederik-g hat kostenlosen Webspace.

12:29, 24.4.2011
geht auch mit einem einfachen padding oder margin
Autor dieses Themas
crown-network

crown-network hat kostenlosen Webspace.

13:41, 24.4.2011
Hat sich mitlerweile geklärt, da ich das ganze anders eingebaut habe^^
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

lima-city: Gratis werbefreier Webspace für deine eigene Homepage

Dir gefällt dieses Thema?

Über lima-city

lima-city bietet dir kostenlosen und werbefreien Speicherplatz für Deine Homepage. Sofort anmelden und direkt loslegen mit Webspace, PHP, Datenbanken, günstigen Domains und einer tollen Community!

kostenloser Webspace werbefrei: lima-city