CODEWITHSUNDEEP
javascripthtmlcssbackground-image
ChosenJuan
ChosenJuan

Reputation: 961

Stop Background-img from resizing when shrinking the browser window

I've been trying to stop the background-img from resizing, because It interferes with this JavaScript code that keep the red dots or pointer on the background-img as I resize the browser.

PROBLEM: When re-sizing the browser window the background-img resizes and the red-dots stay in the same place. I want it to STOP resizing. enter image description here

WHAT I WANT:

1. I want the red dots to NOT MOVE from the specific part of the background-img. I'm guessing we have to tweak the JavaScript for this.

2. When I resize or open a smaller browser window the background-Image should STAY THE SAME SIZE, and whatever is out of view should stay out of view.I'm assuming this is a CSS issue. Here's my fiddle

Please, let me know what change I should make to the JavaScript to make sure the red dots stay in the same place, and the CSS to make sure the background-img is not resized but left out of view. Thank you! CSS:

.container {
    background:url(http://www.seomofo.com/downloads/new-google-logo-knockoff.png) no-repeat center center fixed;
    width: 1000px;
    height: 380px;
     background-size:contain;
}

.wrapper  {     background-image: linear-gradient(360deg, #0d58a6, #0a488a);}
.top {height:100%; width:1000px: background:blue; }

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

HTML

<div class="wrapper">
<div class="container">
<div id="pointer1" class="pointer"></div>
<div id="pointer2" class="pointer"></div>
<div id="pointer3" class="pointer"></div>
<div id="pointer4" class="pointer"></div>
<div id="pointer5" class="pointer"></div>
<div id="pointer6" class="pointer"></div>
<div id="pointer7" class="pointer"></div>
<div id="pointer8" class="pointer"></div>
</div>
</div>

JS

var image = { width: 550, height: 190 };

var target = new Array();
target[0] = { x: 184, y: 88 };
target[1] = { x: 284, y: 88 };
target[2] = { x: 384, y: 88 };
target[3] = { x: 484, y: 88 };
target[4] = { x: 184, y: 150 };
target[5] = { x: 284, y: 150 };
target[6] = { x: 384, y: 150 };
target[7] = { x: 484, y: 150 };

var pointer = new Array();
pointer[0] = $('#pointer1');
pointer[1] = $('#pointer2');
pointer[2] = $('#pointer3');
pointer[3] = $('#pointer4');
pointer[4] = $('#pointer5');
pointer[5] = $('#pointer6');
pointer[6] = $('#pointer7');
pointer[7] = $('#pointer8');


$(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;
    }

    var arrayLength = target.length;

    for (var i = 0; i < arrayLength; i++) {
        pointer[i].css('top', (target[i].y) * scale + yOffset);
        pointer[i].css('left', (target[i].x) * scale + xOffset);
    }

    }

Upvotes: 0

Views: 3936

Answers (2)

Char
Char

Reputation: 2133

try adding min-width in the body

width: 100% !important;
min-width: 1000px;
height: 100%;
margin: 0px;
padding: 0px;

Upvotes: 0

Anthony
Anthony

Reputation: 1581

In .container change background-size:contain; to a set number of pixels, something like 800px.

Upvotes: 1

Related Questions