CSS background image on top of

by

You could use a pseudo-element. In this example, the :after pseudo element is absolutely positioned relative to the parent element. It takes the dimensions of the entire parent element, and the size of the parent element is determined by the size of the child img element.

.test {
  display: inline-block;
  position: relative;
}
.test:after {
  content: '';
  position: absolute;
  top: 0; right: 0;
  bottom: 0; left: 0;
  background: url(http://placehold.it/20x20/1) repeat;
}
<div class="test">
    <img src="http://lorempixel.com/200/200">
</div>

As a side note, your example wasn’t working for a couple of reasons. The parent element has a background image, but since the child element establishs a stacking context within the parent element, it’s not possible for the parent’s background image to appear above the child img element (unless you were to completely hide the img element). This is why the z-indexs weren’t working as expected.

In addition, the img element was absolutely positioned. In doing so, it is removed from the normal flow, and since it was the only child element, the parent element therefore collapses upon itself and it doesn’t have any dimensions. Thus, the background image doesn’t show up. To work around this, you would either have to set explicit dimensions on the parent element (height/width), or you could remove the absolute positioning on the child img element.

More Related Contents:

  1. Centering in CSS Grid
  2. Positions fixed doesn’t work when using -webkit-transform
  3. Styling text input caret
  4. How to make this arrow in CSS only?
  5. Can specific text character change the line height?
  6. Why does overflow:hidden not work in a ?
  7. Rotate objects around circle using CSS?
  8. Make Iframe to fit 100% of container’s remaining height
  9. Bootstrap 3 two columns full height
  10. CSS media queries for screen sizes
  11. What is syntax for selector in CSS for next element?
  12. How to make div occupy remaining height?
  13. 7 equal columns in bootstrap
  14. How to draw a trapezium/trapezoid with css3?
  15. All widths set to width of widest element
  16. Table scroll with HTML and CSS [duplicate]
  17. How to center the contents of an HTML table?
  18. How to hide Table Row Overflow?
  19. Bootstrap print CSS removes background color
  20. text-align: right; only for placeholder?
  21. How to change the inner white color of Font Awesome’s exclamation triangle icon?
  22. Make content horizontally scroll inside a div
  23. HTML5 Required input styling
  24. CSS overflow hidden with absolute position
  25. Why is ‘font-family’ not inherited in ” tags automatically?
  26. Right align text within Bootstrap 4 breadcrumbs
  27. Aligning to the bottom in flexbox
  28. Fixed footer in Bootstrap
  29. CSS On hover show another element
  30. Image center align vertically and horizontally [duplicate]

Leave a Comment