Wednesday, April 6, 2016

Android LayerDrawable in HTML using CSS

So a neat feature for Android is the LayerDrawable which lets you make an image compiled from other images. You define an array of images that shuld be drawn on top of each other and receive the resulting image.
This feature exists in CSS too. It's called background-image and lets you define one or more images to be displayed as a background of a container.

background-image: url(front.png), url(behind.png);





Remember to make the container a block element and if you don't have any content in it you should set the container height and width or a padding-bottom to give it size (Otherwise you will be shown approximately 0px of your background). See http://stackoverflow.com/questions/1495407/css-a-way-to-maintain-aspect-ratio-when-resizing-a-div

.container-with-background-image {
    width: 100%;
    padding-bottom: 75%;
}


Source:
http://www.css3.info/preview/multiple-backgrounds/
http://stackoverflow.com/questions/5846637/why-an-inline-background-image-style-doesnt-work-in-chrome-10-and-internet-ex

No comments:

Post a Comment