Frage stellen

Bild Rechtsbündig fixieren als Hintergrund.

2.7k Aufrufe
Gefragt in Webseiten HTML von
Tag Zusammen,

Ich muss ein Hintergrundbild (oder Bild) als navigations Hintergrund einbetten, welches aber sich Browserfenstergrösse abhängig nach Links ausdehnt. Der Content soll aber Zentriert bleiben..

Hab dies probiert zu verbildlichen.

Schwarz: Browsergrösse
Rot: Content

http://s16.postimage.org/vdo3ksp2t/webkonzept.png



Hat jemand nen Lösungsansatz? Egal ob CSS / Jquery etc.

Merci.

10 Antworten

0 Punkte
Beantwortet von
Hi,
hast du es schon mit align=center versucht.

Wie lautet dein bisheriger Quell-Text zu dieser Seite?
0 Punkte
Beantwortet von aweleczka Einsteiger_in (13 Punkte)
Als hintergrund wäre eine negative background-position möglich
www.w3schools.com/cssref/pr_background-position.asp
0 Punkte
Beantwortet von
Danke erstmals für das Feedback.

@Solo der Content ist schon align=center. Jedoch wird "Standardmässig" Das Hintergrundbild von links nach rechts dargestellt, also genau verkehrt wie ich es brauche.

@AWeleczka Danke für den Tipp. Habe mir was ähnliches überlegt, dann müsste ich mit jquery herausfinden wie breit das DIV zur Zeit ist, und Anhand der Grösse die negative Position anpassen.
Oder wie hast du das gemeint?

Wenn möglich würde ich es gerne ohne Jquery hin bekommen, wenn möglich...

merci

Gruss bl00dy
0 Punkte
Beantwortet von
Bei SelfHTML unter "Wie kann ich Inhalte genau in der Mitte des Anzeigefensters positionieren?" findest du sicher eine Lösung.
0 Punkte
Beantwortet von
verwende einfach 2 Hintergrundbilder (zur Not eins davon transparent) und positioniere sie entsprechend.
0 Punkte
Beantwortet von aweleczka Einsteiger_in (13 Punkte)
-- zu meinem Vorschlag:

in der Theorie ganz schön, habe allerdings vergessen, das der
Hintergrund eines DIV natürlich auf die Größe des DIV beschränkt ist
(schande über mich)

Das einzige was mir spontan noch einfallen würde wäre getrixe mit
jQuery.width()
api.jquery.com/width/

oder einem Hintergrund (zb) im body -dem ganzen bild-
und dem gewünschten Ausschnitt im DIV
0 Punkte
Beantwortet von ennok Experte (1.2k Punkte)
Bis auf sehr schmale Browserfenster könnte das hier klappen:

<!DOCTYPE html>
<head>
<title>bgtest</title>
<style type="text/css">
#content {
width: 500px;
margin: 0 auto;
display: block;
position: relative;
top: -481px; /* Höhe Hintergrund */
}
#bg {
display: block;
width: 100%;
text-align: center;
overflow: hidden;
}
#bg img {
position: relative;
left: -500px;
}
body {
margin: 0;
padding: 0;
}

</style>
<body>
<div id="bg">
<img src="background.jpg" width="720" height="481" />
</div>
<div id="content">
<p>Lorem ipsum</p>
</div>
</body>
</html>
0 Punkte
Beantwortet von friedel Experte (3.3k Punkte)
Am einfachsten wäre es imho, wenn du einfach ein Bild nimmst, das doppelt so breit ist und dessen rechte Hälfte transparent ist. Dann kannst du das Bild mit
background-image:url(bild.png); background-repeat:no-repeat; background-position: center;
positionieren.
0 Punkte
Beantwortet von
@ Antworten 6-8
das erscheint alles unnötig kompliziert, bitte berücksichtigt, dass wir bei CSS3 angekommen sind, eure Lösungsansätze verharren in CSS1-2.

jquery-Einsatz und HTML-Code-Aufblähung (div-Suppen) sind zudem meiner Erfahrung nach immer wartungsungünstig - das was da passieren soll lässt sich nur selten nach einem Jahr noch nachvollziehen.
0 Punkte
Beantwortet von
Danke für alle Denkanstösse.

Hab es nun mit Jquery gelöst.

Und zwar so:





$(function(){
$(window).resize(function(){
var windowWidth = $(window).width();
var total = ((windowWidth - 400) / 2) - 230
$("body").css({
"backgroundPosition": total+"px 0px"
});
});
});


Gruss
...