Zaeo Zaeo - 6 months ago 9
CSS Question

Background in safari is distorted

I'm working on a new client's website, and everything looks good in every browser except safari. The Problem: The Background image is not responding to the css in place in safari(The 5px size).

.et_pb_section_0 { /* The background CSS */
background: url(http://www.elsyf-staging.com/esm/wp-content/uploads/2016/05/bg.png) 5px;
}


I have been unable to find any definitive information regarding this issue.

Because Safari shares webkit functionality with chrome, attempts to resolve this issue via that resulted in the site breaking in chrome. Is there a way to target safari specifically?

Answer

In the CSS background shorthand property, the background-position comes before background-size. This makes your 5px correspond to background-position, not background-size.

To fix this, add a background-position and separate it from background-size with a slash:

.et_pb_section_0 {
    background: url("http://www.elsyf-staging.com/esm/wp-content/uploads/2016/05/bg.png") 0 / 5px;
}

Alternatively, define background-image and background-size separately:

.et_pb_section_0 {
    background-image: url("http://www.elsyf-staging.com/esm/wp-content/uploads/2016/05/bg.png");
    background-size: 5px;
}
Comments