css background-position - png images not displayed as positioned in css

Question

for some reason the background-position is not working I am trying to set up a variety of planet divs filled with pngs so I can then do some other coding but the images are all appearing stacked atop eachother and some of them are cut up across the div.

CSS:

body{
background-image:url('../img/para2/space_bg.jpg');
}

#planet_1{
background:url('../img/para2/planet_1.png');
height:200px;
width:200px;
position:absolute;
margin:0;
padding:0;
display:block;
background-position: 400px 400px;
}

#planet_2{
background:url('../img/para2/planet_2.png');
height:200px;
width:200px;
position:absolute;
margin:0;
padding:0;
display:block;
background-position: 800px 600px;
}

#planet_3{
background:url('../img/para2/planet_3.png');
height:200px;
width:200px;
position:absolute;
margin:0;
padding:0;
display:block;
background-position:450px 700px;
}

#planet_4{
background:url('../img/para2/planet_4.png');
height:200px;
width:200px;
position:absolute;
margin:0;
padding:0;
display:block;
background-position:700px 350px;
}

html:

<!DOCTYPE html>
<html lang = en>
<head>
    <title>BASIC PARALLAX MOUSE 2</title>
    <meta charset = "utf8">
    <link rel = "stylesheet" href = "css/para2.css">
    <script src = "java/jquery-2.1.1.js"></script>
    <script src = "java/jquery_ui.js"></script>
</head>
<body>

    <div id = "planet_1"></div>
    <div id = "planet_2"></div>
    <div id = "planet_3"></div>
    <div id = "planet_4"></div>

</body>

</html>

it seems very strange that I cannot position my planets where I want, I'm sure I have the syntax correct on the background-position elements

score 0 · Answer 1 · answered Oct 28 '14 at 03:10

You didn't give any position to your divs. Try to add this CSS code to one of them:

top: 50px;
left: 50px;

You'll see it in a different position than the others. Maybe it is what you was trying to do with background-position, but this one is for the position of the background image, not for the HTML element itself.

Hope I could help you ;)

score 0 · Answer 2 · answered Oct 28 '14 at 03:24

Margins do not work on absolutely positioned divs. You need to use top, bottom, left and right - values to position an absolute positioned element. I made a JSFiddle for you so you can mess around changing the left and top values.

Link to JSFiddle

Some changes css (only made changes related to absolute positioning and made the divs have a background-color instead of image so you can see what happens in JSFiddle)

body{
background-image:url('../img/para2/space_bg.jpg');
}

#planet_1{
background:yellow;
height:200px;
width:200px;
position:absolute;
top: 250px;
padding:0;
display:block;
background-position: 400px 400px;
}

#planet_2{
background:green;
height:200px;
width:200px;
position:absolute;
left: 250px;
padding:0;
display:block;
background-position: 800px 600px;
}

#planet_3{
background:blue;
height:200px;
width:200px;
position:absolute;
left: 250px;
top: 250px;
padding:0;
display:block;
background-position:450px 700px;
}

#planet_4{
background:red;
height:200px;
width:200px;
position:absolute;
margin:100;
padding:0;
display:block;
}

Besides that I do not see what you are trying to do with the background-position values you are using (since they are higher than the divs heights and widths).

css background-position - png images not displayed as positioned in css

2 Answers2