![]() Other solution, demoed in this fiddle :, as suggested by MilanSxD, to use inline-block elements. Solid state matrix - element image sensing and generating devices will be in- tegrated with. One solution would be to add a wrapping div element with correct aspect ratio, then both image and overlay could be inner elements with absolute full width and height, however, I don't know how to do that in a way that this div would be fully fluid in the container div image), so the red dot does not stick to its position relatively to the image.Īny idea how to achieve this without javascript ? Images are part of the DOM and are transformed into CSS background-image after they are fully loaded. This part will occupy 12 columns on a small screen, 8 on a medium screen, and 9 on a large screen. Resize the page to see the effect This part will occupy 12 columns on a small screen, 4 on a medium screen, and 3 on a large screen. has-bg-img class to parent element that you want to apply a background image. W3.CSS supports a 12 column responsive fluid grid. ![]() Problem is : The overlay has the wrong dimensions (. Overview Create responsive background image on any element without any CSS code. Image covering of the container is done using the contain CSS property of background-size. ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |