Full Screen Owl Slider Background Images

[middlemann]

Hello,

I want to make the background images in the Owl Slider scale to fit on mobile. So the height of the images should scale to match the height of the slider.

Right now the image size is way too big on mobile.

I think you already sent me the code to right-justify the images too. Basically on mobile I want to see the right side of the image – is that right-justified or left-justified?

---

[Support]

This reply has been marked as private.

[middlemann]

for the first option, do i need to add any classes or ids to the html? or just add the css to the custom.css file?

---

[Support]

Just add that to css/custom.css and you will see that the image will be aligned to right and set to 100% on height. If you want to change the position for a specific slide you can just do that on “nth-child”, which starts on 0

---

[middlemann]

background-position: 100% 0 !important;

so the number 0 is the number I change to change the horizontal position?

---

[middlemann]

i also noticed when i turn my phone sideways the bg images tile, how do i account for that? shouldn’t it just scale to that height as well?

---

[Support]

This reply has been marked as private.

[middlemann]

background-position: 100% 0 !important; so the 100% number changes the horizontal position?

---

[Support]

Yes, exactly.

---

[middlemann]

Hello again,

so I’ve been playing around with the first number (horizontal adjustment) and i’m not seeing any change i the mobile browser:

@media (max-width: 991px) {
#home .owl-item {
background-size: auto 100% !important;
background-position: 100% 0 !important;
}

#home .owl-item:nth-child(0) {
background-position: 50% 0 !important;
}

i’ve done -50% and 50% etc etc

---

[Support]

This reply has been marked as private.

[middlemann]

what i see in google dev is not what i see on my phone.
google dev shows it the way i want it to look
but reality is different – just need to get all the images to shift to the right about 15%

Sorry, it starts on 1, not on 0 like I said before. – i thought this number was for vertical adjustment and the 100% was for horizontal

---

[Support]

Hi,

To make sure your clear cache on Mobile you can add this to the file in the HTML:

To change the position of the image on mobile for the first slide you need this:

@media (max-width: 991px) {
    #home .owl-item:nth-child(1) {
		background-position: 100% 0 !important;
    }
}

Not nth-child(0) as my first reply.

So if you want to change it to center of the image on mobile you need this to use background-position: 50% 0 !important;

---

[Author]

Posts