Positionselement über Hintergrundbild. Aber die BG img ändert die Größe mit dem Fenster. CSS

Question

Ich habe ein Hintergrundbild, das Größe an die Fenstergröße ändert, und ich muss ein Element auf es so positionieren, dass es immer an der gleichen Stelle relativ zum Hintergrundbild ist.

WIE !?

CSS

background:url("http://placehold.it/100x100") no-repeat center center fixed; 
-webkit-background-size:"cover"; 
-moz-background-size:"cover"; 
-o-background-size:"cover"; 
background-size:"cover"; 

Das Hintergrundbild deckt den gesamten Hintergrund und ändert die Größe der Fenster, sondern hält Anteile durch eine Überlagerung mit.

EDIT - 2016

Meine Lösung dieses Problem mit reinem CSS ist das Element in der Mitte zu positionieren und dann Offset korrekt berechnet Funktion. Und dann, um die Größe es dementsprechend i den vmin Wert verwenden:

$offset-top: ...; 
$offset-left: ...; 

.element { 
    top: 50%; 
    left: 50%; 
    transform: translate(calc(-50% + #{$offset-top}), calc(-50% + #{$offset-top})); 
    width: 50vim; 
    height: 50vim; 
} 

Answer 1

Was für Sie fragen, ist keine triviale Sache überhaupt, es geht im Grunde herauszufinden, wie background-size:cover funktioniert und dann Element Positionierung mit Hilfe von JavaScript. Aufgrund der Natur von background-size:cover, wie das Bild aus der X-Achse oder Y-Achse fließen kann, kann dies nicht mit CSS getan werden.

Hier ist meine Lösung für das Problem, beim Laden und Ändern der Größe berechnet es den Maßstab des Bildes und der X oder Y Offset und zeichnet den Zeiger an der entsprechenden Stelle.

jsFiddle (red dot in Google's red 'o')

HTML

<div id="pointer"></div> 

CSS

body { 
    background:url(https://www.google.com.au/images/srpr/logo4w.png) no-repeat center center fixed; 
    -webkit-background-size:cover; 
    -moz-background-size:cover; 
    -o-background-size:cover; 
    background-size:cover; 
} 

#pointer { 
    margin-left:-10px; 
    margin-top:-10px; 
    width:20px; 
    height:20px; 
    background-color:#F00; 
    position:fixed; 
} 

JS

var image = { width: 550, height: 190 }; 
var target = { x: 184, y: 88 }; 

var pointer = $('#pointer'); 

$(document).ready(updatePointer); 
$(window).resize(updatePointer); 

function updatePointer() { 
    var windowWidth = $(window).width(); 
    var windowHeight = $(window).height(); 

    // Get largest dimension increase 
    var xScale = windowWidth/image.width; 
    var yScale = windowHeight/image.height; 
    var scale; 
    var yOffset = 0; 
    var xOffset = 0; 

    if (xScale > yScale) { 
     // The image fits perfectly in x axis, stretched in y 
     scale = xScale; 
     yOffset = (windowHeight - (image.height * scale))/2; 
    } else { 
     // The image fits perfectly in y axis, stretched in x 
     scale = yScale; 
     xOffset = (windowWidth - (image.width * scale))/2; 
    } 

    pointer.css('top', (target.y) * scale + yOffset); 
    pointer.css('left', (target.x) * scale + xOffset); 
} 

Answer 2

Ich werde auf Ihrem Markup zu erraten, aber vorausgesetzt, dass Sie einige Behälter für das Hintergrundbild und Ihr anderes Bild, das auch muss zentriert ist im Inneren, etwa so:

<div class="holdBGimg"> 
    <img src="image.jpg"> 
</div> 

Sie etwas tun, wie könnte:

.holdBGimg { 
    position: relative; 
} 
.holdBGimg img { 
    width: 100px; 
    height: 100px; 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    margin-top: -50px; 
    margin-left: -50px; 
} 

, wo man für den Versatz der Höhe und Breite kompensieren durch wegnehmen die Hälfte dieser Messung von den relativen Margen.

Wenn Sie es maßstab suchen, könnte die Lösung entlang der Linien von mehr sein:

.holdBGimg { 
    position: relative; 
} 
.holdBGimg img { 
    width: 20%; 
    height: 20%; 
    position: absolute; 
    top: 40%; 
    left: 40%; 
} 

Das ist alles abhängig von der Größe des Bildes, das Sie Zentrum versuchen.

Answer 3

hinzufügen Zentrierung Behälter:

#container { 
    position: fixed; 
    width: 0; 
    height: 0; 
    top: 50%; 
    left: 50%; 
    overflow: visible; 
} 

Und dann position: relative Elemente nach innen addieren.

Answer 4

Relative (skalierbar, reaktions Einsatz Schlagwort hier) Einheiten (%).

Responsive Design dauert viel mehr Arbeit. Sie müssen testen, wo die Regionen des Bilds, mit denen Sie eine Ausrichtung vornehmen möchten, der Fenstergröße entsprechen und diese Werte dann entsprechend der Fenstergröße an Ihre Elementplatzierung anpassen. Die Deckung wird jedoch vom Seitenverhältnis des Bildes selbst entfernt und entspricht entweder der Breite oder der Höhe. Je nach dem Seitenverhältnis des Fensters wird es also Ihr Layout durcheinander bringen.

Sie könnten versuchen, jQuery und Javascript zu verwenden, um die Dimensionen des Fensters abzurufen, jquery passt dann die Dimension Ihres Bildes an und ändert die Dimensionen Ihrer Elemente. Viel Programmierarbeit, hart auf Seitenlasten, aber wir müssen Opfer bringen, nicht wahr?

Answer 5

Ich würde eine Reihe von Positionen für die Requisiten erstellen, die Sie über den Hintergrund legen werden. Verwenden Sie die x- und y-Positionen innerhalb des in vollem Größe Hintergrundbildes ...

var propPositions = [ 
    { name: "StoveBurner1", x: 23, y: 566 }, 
    { name: "StoveBurner2", x: 676, y: 456 }, 
    { name: "TableChair1", x: 765, y: 35 }, 
    ... 
]; 

Sie müssen auch auf die Größe des Hintergrunds in voller Größe zu halten, so dass Sie es auf Größe ändern können einen Skalierungsfaktor berechnen .

var fullBackgroundSize = { width: 1920, height: 1080 }; 

Wenn die Bildgröße ändert sich, um den Skalierungsfaktor berechnen, und dann für jedes Element in der Anordnung der x- und y-Positionen skalieren ...

for (var i = 0; i < propPositions.length; i++) 
{ 
    propPositions[i].x *= scalingFactor; 
    propPositions[i].y *= scalingFactor; 
} 

Diese Sie alle genau Position erlaubt Ihrer Requisiten unabhängig von der Bildgröße.

Auf diese Weise können Sie auch Positionen nach Namen suchen, die es Ihnen ermöglichen würde, Dinge zu tun wie ...

placeObject(pot1, "StoveBurner1"); 
placeObject(pot2, "StoveBurner2"); 
placeObject(SittingPerson, "TableChair1"); 

Auf diese Weise der einzige Code, die Positionen berechnet und verschiebt Objekte, um sie in einem ist kleine Funktion.