Add background image

🔒 Gradio
1

Hello,

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

css_code='body{background-image:url("/content/a.png");}

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

But the background image is not showing in the web page

How to solve this, thanks

2

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

css_code='body{background-image:url("https://picsum.photos/seed/picsum/200/300");}'

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

Which produces this:

image
image1425×767 146 KB

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

1 Like
3

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

4

@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)

demo.launch()
5

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 (github.com)

6

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'), \
    outputs=[gr.outputs.Textbox(label='VACANCIES'),\
      gr.Plot()],\
        css='div {margin-left: auto; margin-right: auto; width: 100%;\
            background-image: url("https://drive.google.com/uc?export=view&id=12345678900"); repeat 0 0;}')\
              .launch(share=False)
2 Likes