• Das Erstellen neuer Accounts wurde ausgesetzt. Bei berechtigtem Interesse bitte Kontaktaufnahme über die üblichen Wege. Beste Grüße der Admin

[GELÖST] Hintergrundbild

S

Spider67

Guest
Hallo,

ich habe teilweise ein Problem mit meinen Hintergrundbildern. Wenn die Grafik kleiner als die Seite ist, wird das Bild auf der Seite wiederholt. Nunmehr habe ich versucht, dies mit dem Attribut background-size cover zu umgehen. Dies funktioniert bei einem kleineren Bildschirm schon mal tadellos, jedoch bei größeren Monitoren oder anderer Auflösung kommt es wieder zu Wiederholungen des Bildes, obwohl ich kein background-repeat verwende (muss ich eventuell im code background-repeat: no verwenden?)

Danke für Eure Hilfe.
 
Zuletzt bearbeitet von einem Moderator:
am Beispiel einer Hintergrundgrafik, sieht der Code so aus:

Code: 
background: url(bg-header-holder2n.jpg) no-repeat;
 
Zuletzt bearbeitet:
Spider67 schrieb:
muss ich eventuell im code background-repeat: no verwenden?
Zum Vergrößern anklicken....

Wenn ich so etwas lese, dann denke ich mir immer wieder spontan: Warum probierst du es nicht einfach aus?

@dbarthel: Da fehlt noch die führende Klammer: background: url(bg-header-holder2n.jpg) no-repeat;
 
Zuletzt bearbeitet:
Ich würde aber das Leerzeichen nach url weglassen damit die Zugehörigkeit zu der folgenden Klammer deutlicher wird, denn so könnte man auch meinen es seien 3 Parameter angegeben...

PS: Ob Julians oder Korbinians CSS-String to CSS-Object parser da drüber stolpern würden?
 
background: no repeat war meine ursprüngliche Lösung. Erst als ich gesehen habe, dass dies in den meisten Browsern kein Ergebnis bringt, bin ich auf die Lösung mit background-size: cover gestoßen.

Wie angeführt funktioniert die auch teilweise sehr gut. Meine Frage hat daher darauf abgezielt, wie ich dieses Ergebnis auch bei anderen Bildschirmgrößen oder -auflösungen erreichen kann (bei denen cover scheinbar nicht so gut funktioniert)

ICh werde abends mla ein Code Beispiel posten, vielleicht sieht man dann die Problamtik besser.

Danke vorab.
 
Wenn du das wirklich als background: no repeat in deiner CSS-Deklaration stehen hast, kann das auch nicht funktionieren da syntaktisch falsch.

Aber erstelle mal deinen Beispielcode und dann sehen wir weiter.
 
Hallo

hier habe ich mal ein Beispiel von einer Datei angehängt. Das Hintergrundbild füllt die ganze Seite aus und wird auch weder vertikal noch horizontal wiederholt.

Auf einem größeren Bildschirm habe ich jedoch (in der Arbeit zB) sowohl vertikal als auch horizontal Wiederholungen mit dem selben Code.

Wo liegt also der Fehler?. Danke für Eure Hilfe.
 

Anhänge

  • beispiel.txt
    2,1 KB · Aufrufe: 7
Äh... warum verwendest du das schon fünf mal erwähnte background-repeat · css · WPD · WebPlatform.org nicht?

Es ist nur einiges mit den Leerzeichen schief gegangen - es muss immer no-repeat mit Bindestrich heißen.

PS: Ich würde ja keine Webseiten mit Frontpage erstellen...
PPS: ... so ist das HTML invalide - es fehlt v.A. einem DocType.
PPPS: Und mit latin1 würde ich auch nicht mehr arbeiten.
PPPPS: CSS-Angaben in HTML-Kommentare zu packen ist auch ziemlich veraltet und unnötig - außerdem ist dein CSS inkonsistent bis gar nicht formatiert.
 
Hallo,

der fehler ist dann klar (ich habe immer nur background Repeat: no verwendet). Weiters bin ich draufgekommen, dass die Werte "cover" und "contain" nur im Opera und Firefox funktionieren. Funktioniert dann die Sache auch mit no-repeat bezüglich der Größe, wenn die Hintergrundgrafik kleiner als das Objekt im Vordergrund ist (dh. wird die Grafik dann auch auf die Bildschörmgröße skaliert?)

@PS niemand erstellt hier eine Website mit Frontpage , sondern mit Dreamweaver
@PPS der DocType ist vorhanden (bei der Datei handelt es sich nur um Beispiel, wobei der relevante Code in einen Editor kopiert wurde)
@PPPS latin1 wird für ältere Dokumente der Site verwendet, die neue werden alle mit der aktuellen Iso-codierung erstellt (bei Gelegenheit werde ich das mal umstellen)
@PPPS bezüglich der CSS Anmerkungen und Angaben, könntest Du bitte etwas genauer werden

Vielleich wird hier auch nur vergessen, dass ich ein kompletter Laie, der sich alles im Selbststudium erarbeitet hat. Das heißt, mein CSS sieht so aus, wie es mein Editor (Dremaweaver CS6 - ich denke, der ist doch ziemlich nue oder nicht :):)) als Code lierfert. Wo also liegen hier bitte die Fehler.

Danke für Eure Hilfe!
 
no-repeat macht nichts anderes wie als die Definition aussagt, nämlich keine-Wiederholung, so wie es auch in dem Link von kkapsner erklärt wird:
http://docs.webplatform.org/wiki/css/properties/background-repeat schrieb:
Background-repeat defines if and how background images will be repeated after they have been sized and positioned
Zum Vergrößern anklicken....
oder hier nochmals auf Deutsch: CSS4YOU...Hintergrund wiederholen: background-repeat.

Wie kommst du daher auf die Frage mit dem skalieren?
 
Hallo,

weil die Werte "contain" bzw. "cover" beim Attribut background-size, auch das Hintergrundbild auf die Bildschirmgröße skalieren, ohne es zu wiederholen (dh. hierbei muss ich das Attribut background repeat gar nicht vergeben und es funktioniert auch).

Daher wollte ich wissen, ob bei no-repeat ebenfalls eine Skalierung stattfindet oder ob das Bild in irgendeiner Form (links, rechts oder zentriert) automatisch ausgerichtet wird, oder ob ich die Ausrichtung noch zusätzlich definieren muss.

Danke für die Hilfe.
 
Dann baue dir doch eine Testseite wo du verschiedene Szenarien vergleichen kannst, wie so z.B.:
HTML: 
<!DOCTYPE html>
<html lang="de">

<head>
	<!-- UTF-8 Prüfkommentar -->
	<title>contain and cover</title>
	<!-- META -->
	<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
	<meta name="author" content="Gobianweb.de" />
	<meta name="generator" content="Notepad++" />
	<meta name="keywords" content="background, background-size, contain, cover, background-repeat, no-repeat" />
	<!-- Stylesheet -->
	<style>
	h1 {
		font-size: 1.2em;
	}

	span.description {
		background-color: #ffffff;
		font-size: 1.2em;
		font-weight: bold;
	}
	span#current {
		color: #ff0000;
		font-size: 1.1em;
		font-weight: bold;
	}

	#bgSizeContainDemo {
		display: block;
	}
	#bgSizeCoverDemo {
		display: none;
	}
	#bgSizeOriginalDemo {
		display: none;
	}

	.bgSizeContain {
		height: 200px;
		background-image: url(https://developer.mozilla.org/files/2917/fxlogo.png);
		background-size: contain;
		border: 2px solid darkgray;
		color: #000;
		text-shadow: 1px 1px 0 #fff;
	}
	.bgSizeContainNoRepeat {
		height: 200px;
		background-image: url(https://developer.mozilla.org/files/2917/fxlogo.png);
		background-size: contain;
		background-repeat: no-repeat;
		border: 2px solid darkgray;
		color: #000;
		text-shadow: 1px 1px 0 #fff;
	}
	.bgSizeContainNoRepeatCenter {
		height: 200px;
		background-image: url(https://developer.mozilla.org/files/2917/fxlogo.png);
		background-size: contain;
		background-repeat: no-repeat;
		border: 2px solid darkgray;
		color: #000;
		text-shadow: 1px 1px 0 #fff;
		background-position: 50% 50%;
	}

	.bgSizeCover {
		height: 200px;
		background-image: url(https://developer.mozilla.org/files/2917/fxlogo.png);
		background-size: cover;
		border: 2px solid darkgray;
		color: #000;
		text-shadow: 1px 1px 0 #fff;
	}
	.bgSizeCoverNoRepeat {
		height: 200px;
		background-image: url(https://developer.mozilla.org/files/2917/fxlogo.png);
		background-size: cover;
		background-repeat: no-repeat;
		border: 2px solid darkgray;
		color: #000;
		text-shadow: 1px 1px 0 #fff;
	}
	.bgSizeCoverNoRepeatCenter {
		height: 200px;
		background-image: url(https://developer.mozilla.org/files/2917/fxlogo.png);
		background-size: cover;
		background-repeat: no-repeat;
		background-position: 50% 50%;
		border: 2px solid darkgray;
		color: #000;
		text-shadow: 1px 1px 0 #fff;
	}

	.bgSizeOriginal {
		height: 600px;
		background-image: url(https://developer.mozilla.org/files/2917/fxlogo.png);
		border: 2px solid darkgray;
		color: #000;
		text-shadow: 1px 1px 0 #fff;
	}
	</style>
	<!-- JavaScript -->
	<script>
	'use strict';

	function showDiv(id) {
		switch (id) {
		case 'bgSizeContainDemo':
			document.getElementById('bgSizeContainDemo').style.display = 'block';
			document.getElementById('bgSizeCoverDemo').style.display = 'none';
			document.getElementById('bgSizeOriginalDemo').style.display = 'none';
			document.getElementById('current').innerHTML = 'contain image';
			break;
		case 'bgSizeCoverDemo':
			document.getElementById('bgSizeContainDemo').style.display = 'none';
			document.getElementById('bgSizeCoverDemo').style.display = 'block';
			document.getElementById('bgSizeOriginalDemo').style.display = 'none';
			document.getElementById('current').innerHTML = 'cover image';
			break;
		case 'bgSizeOriginalDemo':
			document.getElementById('bgSizeContainDemo').style.display = 'none';
			document.getElementById('bgSizeCoverDemo').style.display = 'none';
			document.getElementById('bgSizeOriginalDemo').style.display = 'block';
			document.getElementById('current').innerHTML = 'original image';
			break;
		}
	}
	</script>
</head>

<body>
	<h1>Try resizing this window and see what happens.</h1>
	<span id="current">contain image</span>
	<button onclick="showDiv('bgSizeContainDemo');">contain image</button>
	<button onclick="showDiv('bgSizeCoverDemo');">cover image</button>
	<button onclick="showDiv('bgSizeOriginalDemo');">original image</button>
	<br />
	<br />
	<div id="bgSizeContainDemo">
		<div class="bgSizeContain">
			<span class="description">background-size: contain;</span>
		</div>
		<div class="bgSizeContainNoRepeat">
			<span class="description">background-size: contain; background-repeat: no-repeat;</span>
		</div>
		<div class="bgSizeContainNoRepeatCenter">
			<span class="description">background-size: contain; background-repeat: no-repeat; background-position: 50% 50%;</span>
		</div>
	</div>

	<div id="bgSizeCoverDemo">
		<div class="bgSizeCover">
			<span class="description">background-size: cover;</span>
		</div>
		<div class="bgSizeCoverNoRepeat">
			<span class="description">background-size: cover; background-repeat: no-repeat;</span>
		</div>
		<div class="bgSizeCoverNoRepeatCenter">
			<span class="description">background-size: cover; background-repeat: no-repeat; background-position: 50% 50%;</span>
		</div>
	</div>

	<div id="bgSizeOriginalDemo">
		<div class="bgSizeOriginal">
			<span class="description">original image</span>
		</div>
	</div>
</body>

</html>
 
Spider67 schrieb:
@PPPS latin1 wird für ältere Dokumente der Site verwendet, die neue werden alle mit der aktuellen Iso-codierung erstellt (bei Gelegenheit werde ich das mal umstellen)
Zum Vergrößern anklicken....
Du solltest besser gleich mit UTF-8 arbeiten:
Hast du dir eigentlich auch schon Gedanken darüber gemacht, ob das vom Server im Header mitgesendete Encoding mit dem im meta-Tag angegebenen übereinstimmt?

Spider67 schrieb:
Dremaweaver CS6 - ich denke, der ist doch ziemlich nue oder nicht
Zum Vergrößern anklicken....
Kannst dir ja einfach mal das hier oder 10 Good and 10 Bad Things About Adobe's Dreamweaver durchlesen...
 
Bezüglich der Kodierung und der Meta Tags darf ich mitteilen, dass die Seite ganz einfach schon über 10 Jahre läuft (und sie läuft für unsere Zwecke als Verein sehr gut). Neuere Bestandteile werden mit neuer Kodierung und neuen Meta Tags erstellt, ältere Bestandteile haben daher auch ältere Kodierungen (beim Kopieren von Seiten in Dreamweaver werden daher auch älter Einstellungen übernommen - das sollte eigentlich logisch sein denke ich mal!!!!) Also ich hatte bis jetzt noch kein Beschwerden, dass irgendeines unser Mitglieder irgendetwas auf der Seite nicht lesen kann oder, dass Dinge nicht funktionieren. Es ist auch nicht angedacht, dass User in Amerika oder Asien die Seite lesen oder benutzen, also wozu die sinnlose Aufregung.

Bezüglich Dreamweaver habe ich niemanden gefragt, ob der gut oder schlecht ist. Ich bin damit sehr zufrieden und damit werden wir das Thema auch schon belassen. Ob einer von den Profis was anderes verwendet oder nicht ist mir persönlich ziemlich egal.

Davon abgesehen wär es toll, die Tipps zu bekommen, bezüglich derer ich angefragt habe.

Also danke vorab dafür und LG

Spider67
 
Spider67 schrieb:
wozu die sinnlose Aufregung.
Zum Vergrößern anklicken....
Ich seh da auch keine „Aufregung”...
Völlig abgesehen ob ISO-8859-1 oder UTF-8, bleibt trotzdem noch folgende Frage offen:
j-l-n schrieb:
Hast du dir eigentlich auch schon Gedanken darüber gemacht, ob das vom Server im Header mitgesendete Encoding mit dem im meta-Tag angegebenen übereinstimmt?
Zum Vergrößern anklicken....


Spider67 schrieb:
Davon abgesehen wär es toll, die Tipps zu bekommen, bezüglich derer ich angefragt habe.
Zum Vergrößern anklicken....
Was genau möchtest du denn jetzt wissen? MiniA4k hat dir ja schon etwas gezeigt - gibt es dazu Fragen, hast du das schon ausprobiert, ...?
 
Spider67 schrieb:
Funktioniert dann die Sache auch mit no-repeat bezüglich der Größe, wenn die Hintergrundgrafik kleiner als das Objekt im Vordergrund ist (dh. wird die Grafik dann auch auf die Bildschörmgröße skaliert?)
Zum Vergrößern anklicken....
no-repeat macht nur das, um das du bittest. Es mach keine Wiederholung. Die Positionierung kannst du mit background-position · css · WPD · WebPlatform.org beeinflussen.
Spider67 schrieb:
@PS niemand erstellt hier eine Website mit Frontpage , sondern mit Dreamweaver
Zum Vergrößern anklicken....
Stand nur so in der HTML-Datei... aber Dreamweaver ist nicht viel besser - auf jeden Fall ist das JS, das er erzeugt schecklich.

Super finde ich ja in dem Artikel über DW, dass als erstes Pro für den DW Code-Highlighting steht.
Spider67 schrieb:
@PPPS latin1 wird für ältere Dokumente der Site verwendet, die neue werden alle mit der aktuellen Iso-codierung erstellt (bei Gelegenheit werde ich das mal umstellen)
Zum Vergrößern anklicken....
Was meinst du mit "aktuellen Iso-codierung"?

Spider67 schrieb:
@PPPS bezüglich der CSS Anmerkungen und Angaben, könntest Du bitte etwas genauer werden
Zum Vergrößern anklicken....
Dein CSS ist einfach schlecht zu lesen. Hier mal ein Beispiel, wie ich das formatieren würde:
HTML: 
<style type="text/css">
table.MsoNormalTable {
	mso-style-parent: "";
	font-size: 10.0pt;
	font-family: "Times New Roman";
}

p.MsoNormal {
	mso-style-parent: "";
	margin-bottom: .0001pt;
	font-size: 12.0pt;
	font-family: "Times New Roman";
	margin-left: 0cm;
	margin-right: 0cm;
	margin-top: 0cm;
}

body {
	background-image: url(../../../2011_hintergrund_1.png);
	background-size: cover;
}
</style>

Spider67 schrieb:
Wo also liegen hier bitte die Fehler.
Zum Vergrößern anklicken....
Es gibt keinen Fehler. Sind alles nur Hinweise, wie du deinen Code leichter lesbar und (v.A.) wartbarer machen kannst.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben