# Add background image

**URL:** <https://discuss.huggingface.co/t/add-background-image/16381>\
**Category:** 🔒 Gradio\
**Created:** [April 1, 2022, 7:27pm UTC](https://discuss.huggingface.co/t/add-background-image/16381 "2022-04-01T19:27:29Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![Vishakraj](https://avatars.discourse-cdn.com/v4/letter/v/9dc877/32.png) [@Vishakraj](https://discuss.huggingface.co/u/Vishakraj)\
**Post date:** [April 1, 2022, 7:27pm UTC](https://discuss.huggingface.co/t/add-background-image/16381/1 "2022-04-01T19:27:29Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![abidlabs](https://sea2.discourse-cdn.com/hellohellohello/user_avatar/discuss.huggingface.co/abidlabs/32/21878_2.png) [@abidlabs](https://discuss.huggingface.co/u/abidlabs)\
**Post date:** [April 4, 2022, 3:39pm UTC](https://discuss.huggingface.co/t/add-background-image/16381/2 "2022-04-04T15:39:22Z")

</div>

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:

```python
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](https://us1.discourse-cdn.com/hellohellohello/original/2X/f/f7120e9c5b38fe14b5925e3cc59e70eb57c9a4f3.jpeg)

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

---

<div class="post-metadata">

**Author:** ![Vishakraj](https://avatars.discourse-cdn.com/v4/letter/v/9dc877/32.png) [@Vishakraj](https://discuss.huggingface.co/u/Vishakraj)\
**Post date:** [April 4, 2022, 6:04pm UTC](https://discuss.huggingface.co/t/add-background-image/16381/3 "2022-04-04T18:04:42Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![priyank](https://sea2.discourse-cdn.com/hellohellohello/user_avatar/discuss.huggingface.co/priyank/32/691_2.png) [@priyank](https://discuss.huggingface.co/u/priyank)\
**Post date:** [July 22, 2022, 12:45pm UTC](https://discuss.huggingface.co/t/add-background-image/16381/4 "2022-07-22T12:45:21Z")

</div>

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

gradio version = 3.1.1

```auto
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()

```

---

<div class="post-metadata">

**Author:** ![abidlabs](https://sea2.discourse-cdn.com/hellohellohello/user_avatar/discuss.huggingface.co/abidlabs/32/21878_2.png) [@abidlabs](https://discuss.huggingface.co/u/abidlabs)\
**Post date:** [August 17, 2022, 6:14pm UTC](https://discuss.huggingface.co/t/add-background-image/16381/5 "2022-08-17T18:14:54Z")

</div>

Hi @Vishakraj perhaps it has something to do with the permissions on Google Drive. You could try a different image hosting solution, like [imgbb](https://imgbb.com/) 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)](https://github.com/gradio-app/gradio/issues/1997)

---

<div class="post-metadata">

**Author:** ![Rubens](https://sea2.discourse-cdn.com/hellohellohello/user_avatar/discuss.huggingface.co/rubens/32/24132_2.png) [@Rubens](https://discuss.huggingface.co/u/Rubens)\
**Post date:** [January 1, 2023, 12:02am UTC](https://discuss.huggingface.co/t/add-background-image/16381/6 "2023-01-01T00:02:53Z")

</div>

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:

```auto
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)

```