Search code examples
htmlcssresponsive-designpositionresponsive

Responsive PNG image over background image?

I'm trying to make a page design like this one: click

I made it, actually. Problem is that when I change the resolution of my webpage, the elements overlap, the background div and the PNG acts different and everything looks awful. (I've tried with position: absolute (PNG) and position: relative (background))

Solution

  • You can use the background-size and background-position CSS properties. You should try this way:

    body {
  background-image: url("your-bg-image.jpg");
  background-size: cover;
  background-position: center;
}

.responsive-image {
  background-image: url("your-image.png");
  background-size: contain;
  background-position: center;
  width: 100%;
  height: 100%;
}