Background image size adjustment

Hi,

How can I get the background image size adjusted and fitted to the browser just like the front page slider’s image?

The BG image on this page shows its original size,
http://vizitstudio.com/twilight/

I’m guessing “cover” in that code???

Thanks.

Hello there,

Yes, you’re right the background size is cover by default. Please follow this short tutorial. I hope that works for you as well.

Regards,
Kharis

Thank you for your reply, Kharis. However, I checked out that linked post before and was confused at that time. That code didn’t work for those background sizes and it messed up the front page’s slider.

The front slider is totally fine as it is now. That code has prefix of “#slideshow” and I’m not sure if it works only for those background images size on the pages except the front one. Those original image size is about 2K.

Could you please try to apply the following CSS code through the Simple Custom CSS plugin or child theme’s style.css?

body{
  background-size: 100% !important;
}

Let me know how it goes.

Regards,
Kharis

Not quite as I was expecting, your code works for some but not others whose size is HD 1920x1080.

I have one of the same image in the front slider which is perfect display size but not these ones,
http://stylusdesign.co.jp/about/

I guess the image aspect ratio has something to do with it, would like it to display just like the slider.

Hello there,

Try the following:

body {
    background-size: cover !important;
}

Regards,
Kharis

Excellent, Kharis. That’s it, appreciated.

You’re welcome.

Please let us know in a new topic if you have any further questions, or if we can provide you with any other assistance.

Regards,
Kharis