CSS Position images in specific locations inside a background - css

Question

I have a background (used style="background-image:url('')) and 2 images.
I need the images to be positioned this way:
First image:
30px from top of the background
15px from the right
Second image
15px from the bottom of the background
15px from the left
my CSS classse:
myItem1 - first image class
myItem2 - second image class
BgGrass - the background
What i've been trying:
.BgGrass {
background-image:url('images/bg/grass.png');
width:800px;
height:480px;
}
.myItem1 {
position:absolute;
bottom: 15px;
left:15px;
}
.myItem2 {
position:absolute;
top:40px;
right:20px;
}
What's wrong?
Update: The solution here provided that I need to add the position:absolute to my background. The problem now is that all the content below this background is moving up inside it and making a total mess.
<div class='BgGrass'>
<img class='myItem1' src='http://cdn.mysitemyway.com/icons-watermarks/simple-black/raphael/raphael_gear-small/raphael_gear-small_simple-black_128x128.png' />
<img class='myItem2' src='http://iconizer.net/files/Brightmix/orig/monotone_close_exit_delete_small.png' />
</div>
<div class="clearfix"></div>
All content here is inside the background

Answer 1

It would have been easier if we could see the original page you're working on (html specifically)
Anyway, assuming this is your html:
<div class='BgGrass'>
<img class='myItem1' src='http://cdn.mysitemyway.com/icons-watermarks/simple-black/raphael/raphael_gear-small/raphael_gear-small_simple-black_128x128.png' />
<img class='myItem2' src='http://iconizer.net/files/Brightmix/orig/monotone_close_exit_delete_small.png' />
</div>
Then the CSS should be:
.BgGrass {
background-image:url('http://www.planwallpaper.com/static/images/744081-background-wallpaper.jpg');
width:800px;
height:480px;
position:relative;
}
.myItem1 {
position:absolute;
top: 30px;
right:15px;
width: 100px;
}
.myItem2 {
position:absolute;
bottom:15px;
left:15px;
width: 100px;
}
CSSfiddle: https://jsfiddle.net/5ndbzg6h/
Issue: you need to add position relative to your parent div.

Answer 2

From definition here
position:absolute The element is positioned relative to its first positioned (not static) ancestor element
By default, BgGrass is static, so you must give him an other position like relative.
.BgGrass {
background-color:red;
position:relative
width:800px;
height:480px;
}
.myItem1 {
position:absolute;
bottom: 15px;
left:15px;
}
.myItem2 {
position:absolute;
top:40px;
right:20px;
}
<div class="BgGrass">
<div class="myItem1">ABC</div>
<div class="myItem2">DEF</div>
</div>