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
Post a Comment