Community Forums

Hi there is no option for ‘contain’ – just cover and auto

This is the code I used for commercial page

@media (max-width: 480px){
.page-id-519 .row.cl_row-sortable.cl_row-fullheight.cl_row-flex.cl_row-cp-middle.cl-col-tablet-none {
min-height: 23vh !important;
}
body.page-template-default.page.page-id-519 {
background-image: url(https://dev.fergusonarchitects.co.za/wp-content/uploads/2018/04/commercial_new.jpg);
background-size: contain;
background-position: top center !important;
}
}

and this is what it looks like

https://belsandpeter.com/images/mobile_commercial.jpg

is the code Wrong?

Ok – there is no background size, just background position that has the options cover or auto.

Do I put it on auto?

https://belsandpeter.com/images/codelss_slider_design_panel.png

Great thanks

About us is working well but all the other pages are doing this

https://belsandpeter.com/images/mobile_contact_us.jpg
https://belsandpeter.com/images/mobile_commercial.jpg

Can I change the height somehow – don’t understand why about us is working nicely but all the other pages are doing this.

Hi unfortunately not what I need.

I would like the image to resize proportionally to the device – in other words at the moment you can only see a section of the image – I want to be able to see the whole image on a mobile and ipad like you do on a computer screen.

The image needs to resize with the size screen it is being displayed on.

Thanks

Morning

Please can you give me the Css code, to add to my background image on each page, to align them center-center

for example – what do I add to the below CSS to center-center align

body.page-template-default.page.page-id-517 {
background-image: url(https://dev.fergusonarchitects.co.za/wp-content/uploads/2018/04/estate_new-1.jpg) !important;
}

Thanks