Add background image


I am trying to add background image in gradio,

there is a css class is available in gradio.Interface(),

I am adding this css code as string


gradio.Interface(fn=cc, ...., css=css_code)

But the background image is not showing in the web page

How to solve this, thanks

Hi @Vishakraj! Thanks for creating this issue. I tried your solution and some thing like this actually worked for me. Here is the complete code:

import gradio as gr


gr.Interface(lambda x:x, "textbox", "textbox", css=css_code).launch(debug=True)

Which produces this:

It could definitely look nicer with some more custom css, but it should work! This with gradio==2.9.1

1 Like

Yes, thanks for replying

I figured that out, but, when I give the path of the image which is saved in my google drive, it is not loading,

I even checked the syntax of css for giving the correct path for the images, still didn’t get

Could you please help me in that, thanks

@abidlabs @Vishakraj
I am on windows 10. The background image is not coming in the browser.

gradio version = 3.1.1

css1 = "body {background-image: url(r'.\static\ss\shap_force_plot.png');}"

demo = gr.Interface(fn=greet, inputs="text", outputs="text", css= css1)


Hi @Vishakraj perhaps it has something to do with the permissions on Google Drive. You could try a different image hosting solution, like imgbb and see if that works for you?

@priyank, for your issue, could you try prepending the path to the local file with “file/”. See this issue for more info: Adding image in markdown not working, gives broken image in the browser · Issue #1997 · gradio-app/gradio (

Looks like the documentation is wrong for the latest version of Gradio - 3.14.0, you have to use div instead of body. The working code looks like this:

demo = gr.Interface(fn=predict, inputs=gr.inputs.Textbox(label='CANDIDATE input'), \
        css='div {margin-left: auto; margin-right: auto; width: 100%;\
            background-image: url(""); repeat 0 0;}')\