Как центрировать движущиеся объекты с фоном?

Мое фоновое изображение - 1080x648 px, и у меня оно сосредоточено. Я ввел код javascript для мини-игры, где файлы изображений будут перемещаться по экрану, однако файлы изображений начинаются слева от экрана, вне моего фонового изображения. Есть ли способ сосредоточить его вместе с моим фоном?Как центрировать движущиеся объекты с фоном?

Вот мой код:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
<script> 

    function runIt(me) { 
     $(me).css("top",Math.random()*500) 
     .animate({"left":"1000px"},Math.random()*3500+1500,function(){$(me).css("top",Math.random()*500)}) 
     .animate({"left":"0px"},Math.random()*3500+1500,function(){$(me).css("top",Math.random()*500);runIt(me)}); 
    } 
    $(".target").each(function(){runIt($(this))}); 

score = 0; 
function calcScore(me){ 
    $(me).hide(); 
    score++; 
    $("#message").html("You shot "+score); 
    if(score==6){ 
    alert("Congratulations! You cleared the lake!"); 
    window.location.href = "alfheim_lake.html"; 
    } 
} 

$(document).ready(function(){ 
    $(".target").each(function(){runIt($(this))}); 
}) 

window.onload = function(){ 
    setInterval(function(){ 
     alert("You have drowned."); 
     window.location.href = "game_2.html"; 
    }, 60000); 
}; 
</script> 
<body> 
<div id="container"> 
<div id="background"> 
<div class="target" onclick="calcScore(this)"><img src="images/bottle.png" width="80" height="80" alt=""/></div> 
<div class="target" onclick="calcScore(this)"><img src="images/bottle.png" width="80" height="80" alt=""/></div> 
<div class="target" onclick="calcScore(this)"><img src="images/bottle.png" width="80" height="80" alt=""/></div> 
<div class="target" onclick="calcScore(this)"><img src="images/bottle.png" width="80" height="80" alt=""/></div> 
<div class="target" onclick="calcScore(this)"><img src="images/bottle.png" width="80" height="80" alt=""/></div> 
<div class="target" onclick="calcScore(this)"><img src="images/bottle.png" width="80" height="80" alt=""/></div> 
</div> 
</div> 
</body>

А вот мой CSS файл:

@charset "UTF-8"; 

body { 
    line-height:0; 
    text-align:center; 
    padding:8px; 
    padding-left:80px; 
} 

#container { 
    overflow:hidden; 
    float:left; 
    width:1080px; 
    height:648px; 
} 

#background { 
    background-image:url(images/underwater.jpg); 
    width:1080px; 
    height:648px; 
    float:left; 
    overflow: hidden; 
    background-repeat:no-repeat; 
} 

.target { 
    position:absolute; 
    width:80px; 
    height:80px; 
    cursor:pointer; 
}

источник

2016-01-15 Sergio Koh

Посмотрите на свойства CSS фон-размер: покрытие в сочетании с фоновой позицией –

Я думаю, что это должно работать для вас

#background{ 
width:1080px; 
height:648px; 
float:left; 
background: url(images/underwater.jpg) no-repeat center center; 
-webkit-background-size: cover; 
-moz-background-size: cover; 
-o-background-size: cover; 
background-size: cover; 
overflow: hidden; 
}

источник

2016-01-15 11:54:53

Как центрировать движущиеся объекты с фоном?

ответ

Смежные вопросы