Scaling orbit slider [closed]

Question

As it currently stands, this question is not a good fit for our Q&A format. We expect answers to be supported by facts, references, or expertise, but this question will likely solicit debate, arguments, polling, or extended discussion. If you feel that this question can be improved and possibly reopened, visit the help center for guidance.

Closed 8 years ago.

I'm working on a website that can be found there: http://odesktestanswers2013.com/Metareviewer/

I'm working on a 1920px wide monitor and I noticed on my girlfriend laptop (a 14inch mac with Safari) that the slider displays two black strips above and below the slider.

My sliders' pictures are 1920px but I thought they would just scale (and that I obviously wouldn't have those black strips).

Anybody knows where that's coming from ?

Answer 1

The problem is with the background-size values that you have defined. THey are using a % of the container. If you change your background-size to cover and your background-position to center center is will fix your problem

.main-wraper-present2 {
    background: url("../images/unes/une[2].jpg") no-repeat scroll center center #000000;
    background-size: cover;
}

Answer 2

Try background-size: cover; on your .main-wraper-present and .main-wraper-present2.

EDIT: Browser support for background-size has grown of late, with the current versions of most popular browsers now supporting the property, including Firefox, Safari, Chrome, Internet Explorer and Opera.