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

#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