html - positioning in having multiple background images in css -


i had image had used background in css. want have 2 images, 1 after other. think, earlier website had 1 sponsor, there 2 sponsors, , so, 2 logos.

i able add 2 background images googling around bit, position of second image right on top of first. when give pixel values, goes off well.

this code far

.app-header-logo {     background-image: url("../images/image1.png"),url("../images/image2.png");     background-position: center center, 200px center;     background-repeat: no-repeat;     float: left;     height: 50px;     vertical-align: middle;     width: 265px; }  .app-header-logo {     float:left;     width:190px;     height:50px;     text-indent:-999px; } 

how can have image2 right after image1?

this can accomplished using css sprites, sprites you'll able combine multiple images 1 single .png or .jpg file. there's great online tool combine images 1 single file , use them need call class example .sponsor-1 contain background-position sponsor numer 1 image, plus builds css automatically don't have worry finding right position of background each sponsor image. here's example of how use them:

.sponsor-1, .sponsor-2{     background: url(sprites.png) no-repeat; }  .sponsor-1{     background-position: 0 0;     width: 80px;     height: 50px; } .sponsor-2{     background-position: -26px 0;     width: 80px;     height: 50px; } 

Comments

Popular posts from this blog

java - Could not locate OpenAL library -

c++ - Delete matches in OpenCV (Keypoints and descriptors) -

sorting - opencl Bitonic sort with 64 bits keys -