html - Set two images in single background image with nice alignment? -

html - Set two images in single background image with nice alignment? -

how set 2 images in single background-image? have 2 pictures there issue separating 2 (one overlying on another).

below style div.

.layout_core_menu_logo { padding: 20px 0 0px 0; background: url(~/application/xxx.gif) transparent no-repeat top; background-size: 968px 200px; { background: url("/application/xx1.gif?c=573") no-repeat,url("/application/themes/xx2.gif")no-repeat; width:1160px; height: 187px; display: block; text-indent: -9999px; position: relative; top: 20px; left: 0px; } }

you need specify position , background size of each image.

.layout_core_menu_logo { padding: 20px 0 0px 0; background: url(http://www.mvploops.com/files/_willow/categories/281_sample- packs.jpg) transparent no-repeat top; background-size:100% 100%; } { background: url("http://www.detailinggurus.com/images/sample_bottles.jpg") no-repeat top left,url("http://www.mclub.com.ua/images/alb/cover42163_148565.jpg")no-repeat top right; background-size:50% 100%, 50% 100%; width:968px; height: 187px; display: block; text-indent: -9999px; position: relative; top: 20px; left: 0px; }

sample fiddle

html css