how to position two image as a background image on div by css

Question

here is my css by which i position one image on at center.

 .BusyStyles
 {
      background-image: url('../images/busy.gif');
      background-repeat: no-repeat;
      background-position: center center;
      height: 350px;
      width: 300px;
 }

can i enhance the above css as a result i can place another image at center on the div just below the busy.gif......is it possible? if yes then please give me the css by which i can position two image as background for div at center one after one. thanks

score 0 · Answer 1 · answered Oct 09 '12 at 07:47

0

You can only do this in CSS 3 (http://stackoverflow.com/questions/423172/can-i-have-multiple-background-images-using-css)

body {
    background-image: url(images/bgtop.png), url(images/bg.png);
    background-repeat: repeat-x, repeat;
}

answered Oct 09 '12 at 07:47

LiamB

18,243
19
75
116

how this two image will come...one after one. which one will come first. thanks – Thomas Oct 09 '12 at 08:42

score 0 · Answer 2 · answered Oct 09 '12 at 07:57

I agree with LiamB's solution to this if you have the ability to only support browsers that are compatible with CSS 3.

However, if you need to support more browsers than that I recommend you solve this problem by having 2 divs. Both divs will be positioned on top of each other. The div positioned below contains only a background image. The div positioned on top contains another background image (positioned to look as if it is below the background image from the other div) and any content you want to have.

score 0 · Accepted Answer · answered Oct 09 '12 at 10:44

0

Check sample for two background image in a single div tag.

CSS:

.container{
  width:300px;
  height:150px;
  background:url(http://img.b8cdn.com/images/icons/loading_large_icon.gif) no-repeat 50% 28%, url(http://twitter-badges.s3.amazonaws.com/t_logo-a.png) no-repeat 50% 60%;
  border:1px solid #CCCCCC;
}

answered Oct 09 '12 at 10:44

sureshunivers

1,753
12
27

thanks for answer. i have two question more. 1) does this css work in all browser. 2) if i like to set one background image at center on the div and another small text will be center but will come under busy image like text "loading..." if possible please shade some light and give demo url. thanks a lot again. – Thomas Oct 11 '12 at 07:06

how to position two image as a background image on div by css

3 Answers3