Search code examples
htmlcsswebresponsive-designdolphin-browser

Background Image on div element not scaling correctly on Dolphin browser

I'm trying to make a fully responsive website using HTML, CSS and minor Javascript.

I've managed to achieve this across Chrome, Firefox, Opera, and IE. However Dolphin browser causes a malformed layout.

I have a background image on my div element which is not fully scaled and is cut off about 30% or so down the divs height.

I'm done some research and came up with nothing specific about Dolphin to cause this behaviour.

.cover-image {
background-image: URL("Images/background.jpg");
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;
background-size: cover;
height:90%;
}
Solution

  • I changed the height of the body to em units rather than vh units (viewport height) and this seemed to solve my issue on Dolphin while maintaining the same appearance on other browsers.