How do I set a background to the lower portion of screen? CSS/HTML
Question
I'm making this... "game". Currently, it's a little stickman that walks around. There's also a tree. But that doesn't matter for now. I'm trying to set a background to the lower part of the screen. I've looked around and I can't seem to find an answer.
I've tried to set DIV wrappers, but I already have one to make the background blue. Also, if I'd make a div wrapper, I can't just select the lower portion of the screen. I know that I could do something like this
div#wrapper {
margin-top: 700px;
background-image: url('terrain blah blah blah');
}
but that doesn't work, because it applies "margin" to every other thing with it. Since the div wrapper wraps the whole page.
Here's the link: http://www.dotcomaftereverything.com/jquery/game .
As you can see, the whole page is blue. Because of the sky's color.
Thanks in advance.
EDIT
I can't use margin-top, because the wrapper wraps the whole page, therefore taking everything else down with it.. Which results in a blank page.
4 answers
solution1
1 2013-02-03 15:42:47
I think this could be a possible soultion.
You already have a #terrain element into your page, so just wrap the part of HTML code relative to the game into a sub-container, add some CSS and you're done.
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Life of an unlucky person</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="http://jquery-rotate.googlecode.com/files/jquery.rotate.1-1.js"></script>
</head>
<body>
<div id='wrapper'>
<div id="playarea">
<p>Left/Right arrow keys to move, space to sit down.</p><br />
<img src='http://www.dotcomaftereverything.com/jquery/sprites/spritePerson.png' id='img' />
<img id='sitting' src='http://www.dotcomaftereverything.com/jquery/sprites/spriteSitting.png' />
<img id='tree' src='http://www.dotcomaftereverything.com/jquery/sprites/spriteTree.png' />
</div>
<div id='terrain'></div>
</div>
</body>
</html>
CSS
body {
margin: 0;
padding: 0;
background-color: lightblue;
}
#playarea {
position: relative;
width: 100%;
height: 70%;
}
#playarea p {
margin: 0;
}
#img {
position: relative;
margin-top: 375px;
}
#sitting {
position: relative;
margin-top: 375px;
}
#tree {
position: relative;
margin-top: 100px;
margin-left: 700px;
}
#terrain {
width: 100%;
height: 100px;
background-color: green;
}
JS
$(window).on('load resize', function () {
var playarea = $('#playarea'),
terrain = $('#terrain'),
pageHeight = $(window).height(),
areaHeight = playarea.height();
terrain.css('height', (pageHeight - areaHeight) + 'px');
});
$(document).ready(function () {
var sitting = $('#sitting'),
image = $('#img');
sitting.hide();
$(document).keydown(function (e) {
var keyCode = e.keyCode || e.which,
arrow = {
left: 37,
up: 38,
right: 39,
down: 40,
space: 32
};
switch (keyCode) {
case arrow.left:
if (!sitting.is(':visible')) {
image.add(sitting).stop(true).animate({
left: '-=60px'
}, 300, "linear");
}
break;
case arrow.up:
break;
case arrow.right:
if (!sitting.is(':visible')) {
image.add(sitting).stop(true).animate({
left: '+=60px'
}, 300, "linear");
}
break;
case arrow.down:
break;
case arrow.space:
image.fadeToggle(-100, function () {
sitting.fadeToggle(-100);
});
break;
}
});
$('#sit').click(function () {});
});
Here's a live example
solution2
0 2013-02-03 15:25:30
Try adding in position, repeat and attachment
div#wrapper {
margin-top: 700px;
background-image: url('terrain blah blah blah');
background-position:bottom left;
background-repeat:repeat-x;
background-attachment:fixed;
}
solution3
0 2013-02-03 15:26:19
Use this way:
div#wrapper {
margin-top: 700px;
background: url('terrain blah blah blah') bottom center repeat-x fixed;
}
solution4
0 2013-02-03 16:25:04
将底部的绝对位置设置为0不会解决您的问题吗？
<img src="http://img.wallpaperstock.net:81/floating-land-wallpapers_9536_1280x1024.jpg" style="position:absolute;bottom:0px;">
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.