How to add full screen background?

mybne

I have an image 480*800 . I need to use this image as full page background and I am happy to stretch it. I don't want tiles. Below code works fine in Custom CSS After <head> for tiling but looks terrible. Ho can I stretch it?

<div style="background-image: url('images/stories/background.jpg');">

aman204

mybne Hi

In reference, You can view this concise tutorial in order to add background-size property along with appropriate property value accordingly

Alongwith, Try change the above inline CSS to one given below which would ensure that background image doesnt repeat :

<div style="background-image: url('images/stories/background.jpg');background-repeat:no-repeat;">

mybne

aman204
Hi Aman,

Thanks for your reply. I literally copied your command and added to Custom CSS --> and After <head> but seems has no effect at all. I am sure I am missing something. I also tried to use the lines in the After <body> section and didn't work either.
Tutorial link is great and many nice option there, thanks for that but first I have to make it work 🙂

Ninja

mybne
Hi
If you still have issue, kindly share the URL of site here, and provide a screenshot on which section you want to put this style, It will be more easy to suggest the changes based on your site.

Regards

mybne

Ninja

Hi pankaj and Aman,
I just found the issue. When I disabled the add-on called "Off-canvas Sidebar" background appeared as expected. Looks like "Off-canvas Sidebar" blocking it somehow.

Ninja

-mybne
Hi
Off-canvas sidebar push the main screen depend on the configuration applied, Kindly provide the site details so i can look over the issue,
without looking to site and screenshot of issue, its hard to assume the problem.