it-swarm.com.de

HTML-Hintergrundbild um x Pixel von der Mitte versetzt

Ich möchte ein Bild als Hintergrund einer Webseite einfügen, aber es wird um einige Pixel in Bezug auf die Mitte versetzt.

Wie kann ich das machen?

Ich möchte:

background-image: url("bg.png");
background-position: 25% center;
background-attachment: fixed;
background-repeat: no-repeat;

aber statt 25% möchte ich etwas in der Art von "center - 50px". Gibt es eine Lösung dafür?

53

Ich glaube, ich habe eine Lösung, die das erreicht, was Sie wollen:

Ein Hintergrundbild (insbesondere ein Seitenhintergrund), das in Bezug auf die Mitte um einige Pixel versetzt ist.

Dies funktioniert nur mit HTML & CSS - kein Javascript erforderlich.


Aktualisieren

Dies kann nun einfach mit background-position Und calc als CSS-Einheit erreicht werden.

Das folgende CSS erzielt das gleiche Ergebnis wie die vorherige Lösung (siehe "Originallösung" unten):

#background-container {
    width: 100%;

    background-image: url("background-image.png");
    background-position: calc(50% - 50px) 50%;
    background-repeat: no-repeat;
}

Hinweis: Verwenden Sie diese Methode nicht, wenn Sie Unterstützung für ältere IE-Versionen benötigen.


Ursprüngliche Lösung

#background-container {
    width: 100%;
    left: -100px; /* this must be TWICE the required offset distance*/
    padding-right: 100px; /* must be the same amount as above */

    background-image: url("background-image.png");
    background-position: center;
    background-repeat: no-repeat;
}

Dadurch wird der gesamte Container horizontal um den angegebenen Betrag verschoben (in diesem Fall um 100 Pixel nach links). Da das Hintergrundbild relativ zum Container zentriert ist, wird es zusammen mit dem Container nach links verschoben.

Durch das Auffüllen werden die 100 Pixel Leerzeichen korrigiert, die beim Verschieben rechts neben dem Container angezeigt werden. Hintergrundbilder werden durch Auffüllen angezeigt). Da Browser zur Berechnung der Hintergrundgröße und -positionierung den Rahmenwert anstelle des Standardwerts für das Inhaltsfeld verwenden, wird das Hintergrundbild effektiv um 50px nach rechts verschoben - die Hälfte des Abstandes zum Auffüllen. (Danke an ErikE für die Klarstellung).

Ihr Versatz/Abstand muss also doppelt so groß sein wie der erforderliche Versatzabstand.

Ich habe hier eine Beispielseite für Sie vorbereitet: http://www.indieweb.co.nz/testing/background-offset-center.html

Spielen Sie mit der Größenänderung des Fensters. Sie werden sehen, dass das lila und blaue Hintergrundbild (über ein tieferes Hintergrundbild gelegt, das die Mitte der Seite markiert) genau 50px (die Hälfte des Versatzes/Abstandes) links von der Seitenmitte bleibt.


65
Luke

Mit background-position: center; ist das gleiche wie background-position: 50% 50%;.

Sie können also calc verwenden, um einige einfache Berechnungen in CSS als Ersatz für einen beliebigen Längenwert durchzuführen. Beispiel:

background-position: calc(50% - 50px) 50%;

Zentriert das Hintergrundbild, verschiebt es jedoch um 50 Pixel nach links.

47
hynick

Sie möchten es also zentriert um 50 Pixel nach links verschieben. Ich würde die 50 Pixel in Form eines transparenten Raums zum Bild hinzufügen, es sei denn, Sie haben es mit absoluten Dimensionen zu tun.

6
Dustin Laine

Die einzige Methode, die ich dafür gefunden habe, ist, den Hintergrund in einem anderen div zu haben und dann Javascript zu verwenden, um es neu zu positionieren ...

<style>
    body {
        width: 100%;
        overflow: hidden;
        }
    #bg {
        position: absolute;
        background: url(images/background.jpg) center top;
        }
</style>

<script>
    function recenter(){
        var $pos = $('#content').offset().left;
        $('#bg').css('left',$pos-580);
    }
    recenter();
    $(window).resize(function(){ recenter(); });
</script>

<body>
    <div id="bg"></div>
    <div id="content">
        blah
    </div>
</body>
0
neokio

Meine Antwort wird zu spät sein, aber irgendwie habe ich eine andere Lösung gefunden.

padding-left: 100px; /* offset you need */
padding-right: 100%;

oder

padding-right: 100px;
padding-left: 100%;

Die Beispiele haben den gleichen Effekt.

0
Jan Iwanow

wenn Sie die Breite des Bildes kennen, können Sie dies verwenden:

background-position: (BgWidth - 50)px 0px;

Beachten Sie, dass Sie es nicht so haben können, d. H. Sie müssen (BgWidth - 50) berechnen und dann die Zahl dort schreiben.

Wenn Sie die Breite nicht kennen, können Sie Javascript (mit oder ohne jQuery) verwenden und dann Folgendes verwenden:

$(#ID).css('background-position', (BgWidth - 50)+'px 0px');
0
Jonathan J

Es gibt keine offensichtliche CSS-Antwort. Sie müssten entweder JavaScript verwenden, um Werte zu berechnen, oder etwas Schwieriges tun. Sie können versuchen, background-position:25% center Beizubehalten und position:relative;left:-50px Oder margin-left:-50px Hinzuzufügen, aber diese funktionieren möglicherweise nicht, je nachdem, wie Sie das DOM-Element verwenden.

0
Jeff

Schöne Antwort Luke,

wenn Ihre Blockbreite größer als die Bildschirmauflösung ist, müssen Sie Ihren Block in einen anderen Container stellen und dies tun:

#container{
  position:relative;
  overflow:hidden;
}

#shadowBox{
  width: 100%;
  left: -100px; /* this must be TWICE the required offset distance*/
  padding-right: 100px; /* must be the same amount as above */
  background-image: url("background-image.png");
  background-position: center;
  background-repeat: no-repeat;
  position:absolute: /*this is needed*/
}
0
Mohd Sakib