Hintergrundbild repeat-x Problem

Dashmaster · 13. August 2015

Hallo Community und Herlferlein

Ich hab hier leider ein Problem, mit welchem ich so nicht mehr weiter komme.
Vielleicht kann mir hier jemand von euch weiter helfen

Und zwar, habe ich zwischen meiner <div class="header-cont"> und dem <div id="wrapper"> , für das anzuzeigende Hintergrundbild ein

HTML

<div id="orchi"></div>

angelegt.

Die CSS dazu, schaut so aus:

CSS

#orchi{
	margin-top: 130px;
	background-image: url(../img/bg/platzhalter.jpg);
	background-position: center;
	background-attachment: fixed;
	background-repeat: repeat-x;
	height: 400px;
}

Auf dem Laptop, funktioniert das ganze wunderbar.
Wenn ich jedoch über das Händi gehe, oder am Laptop die mobile Ansicht mache (Strg + Shift + M), dann ist das Hintergrundbild nur noch ein mal links zu sehen ( Screenshot angehängt ) und wiederholt sich nicht. Wenn ich das Browserfenster kleiner mache und unten dann ein
"Scrowlbalken" kommt, wird das Hintergrundbild beim nach rechts ziehen
abgeschnitten.

Kann mir vielleicht jemand weiter helfen?
Ware eine echt super Sache

Besten Dank schon mal für Hilfe

MrMurphy · 13. August 2015

Hallo,

deine paar Quellcodeschnipsel helfen bei der Problemlösung nicht weiter. Deshalb kann ich nur raten.

Hast du mal versucht dem div eine Breite (width) mit auf den Weg zu geben?

Erläuterung: Auf Desktop-PCs werden Blockelemente standardmäßig mit einer Breite von 100% angezeigt.

Smartphones (genauer: deren Browser) sind darauf getrimmt, den verfügbaren geringen Platz so effektiv wie möglich zu nutzen. Deshalb kann es sein das leere Blockelemente in ihrer Breite begrenzt werden. Und ein div mit nur einem Hintergrundbild hat halt keinen Inhalt.

Gruss

MrMurphy

Dashmaster · 13. August 2015

Hallo MrMurphy
Danke erst mal für den Hinweis und der Information der Smartphone-Browser.

Hier nochmal Mehr Quellcode zu der Geschichte:

Die index.html ist wie folgt ( habe mal den HTML-Code gekürzt )

HTML

<!DOCTYPE html>
<html lang="de">




	<head>
		<title>asdf</title>
		<meta charset="utf-8">




		<!-- Vergroesserung fuer Mobile Endgeraete "yes/no" = yes -->
		<!-- Favicon  -->
		<!-- CSS Reset, Color, Navigationen, Fonts, Layout -->
		<!-- Lightbox -->


	</head>

	<body>
		<div class="header-cont">
			<div class="header">
				<img id="logo" src="img/logos/logo_aufeghuebscht.png" alt="text">
			</div>

			<nav class="nav">
				<ul>
					<li><a href="index.html"  class="active" > ÜBER MICH </a></li>
						<li><a href="leistungen.html"> LEISTUNGEN </a>
							<ul>
								<li><a href="brautstyling.html"> BRAUTSTYLING </a></li>
								<li><a href="junggesellinnenabschiede.html"> JUNGGESELLINNENABSCHIEDE </a></li>
								<li><a href="preise.html"> PREISE </a></li>
							</ul>
						</li>
					<li><a href="gallery.html"> GALLERY </a></li>
					<li><a href="partner.html"> PARTNER </a></li>
					<li><a href="kontakt.html"> KONTAKT </a></li>
				</ul>
			</nav>
		</div>

		<div id="orchi"></div>

	<div id="wrapper">
		<div id="content">

	</div>
	</div>
	</body>
</html>

Alles anzeigen

Die CSS zum header-cont:

CSS

/* Fixierter Header */
.header-cont {
	width: 100%;
	position: fixed;
	top: 0px;
	background-color: #fff;
	z-index: 200;
}

Die CSS zum header:

CSS

/* Header */
.header{
	max-width: 2080px;
	margin: 0 auto;
}

Die CSS zum wrapper:

CSS

/* Hintergrundbreite */
#wrapper{
	width: 100%;
	padding-top: 20px;
	background-color: #fff;
	position: relative;
}

Die CSS zum content:

CSS

/* Hauptinhalt */
#content{
	width: 980px;
	margin: 0 auto;
}

Und eben die CSS zum Hintergrundbild:

CSS

#orchi{
	margin-top: 130px;
	background-image: url(../img/bg/platzhalter.jpg);
	background-position: center;
	background-attachment: fixed;
	background-repeat: repeat-x;
	height: 400px;
}

Zitat

Und ein div mit nur einem Hintergrundbild hat halt keinen Inhalt.

Bedeutet, wenn ich dem Hintergrundbild erst einen Text oder der gleichen geben würde, wäre das dann behoben, oder kann man das auch anders regeln?

Lg

MrMurphy · 13. August 2015

Hallo

Zitat

Bedeutet, wenn ich dem Hintergrundbild erst einen Text oder der gleichen geben würde, wäre das dann behoben, oder kann man das auch anders regeln?

Kein Ahnung. Ich habe doch geschrieben

Zitat

Deshalb kann ich nur raten.

Auch mit deinen zusätzlichen Angaben kann ich dein Problem nicht nachvollziehen. Bei mir wird das Hintergrundbild immer gekachelt angezeigt.

Gruss

MrMurphy

Hintergrundbild repeat-x Problem

Jetzt mitmachen!

Teilen