csspositionbackground-imagecover

Position element over background image. But the BG img changes size with the window. CSS


I have a background image which changes size to the windows size, and I need to position an element on it so that it is always in the same place relative to the background image.

HOW!?

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";

The background image covers the entire background and changes size with the window but keeps proportions by having some overlay.

EDIT - 2016

My solution to this with pure CSS is to position the element in the middle and then offset it correctly using calc function. And then to resize it accordingly i use the vmin value:

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

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

Solution

  • What you are asking for is not a trivial thing at all, it basically involves figuring out how background-size:cover works and then positioning your element using JavaScript. Due to the nature of background-size:cover how the image can flow out of the x-axis or y-axis this cannot be done with CSS.

    Here is my solution to the problem, on load and resize it calculates the scale of the image and the x or y offset and draws the pointer at the relevant location.

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

    enter image description here

    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);
    }