How to change the background image using img file from database in Web2py

Question

What I am trying to do is to keep changing the background image using image files that are uploaded in the database instead in the 'static', 'images' folder.

I obviously can't do this in the css, actually, I am not sure if this is even possible. Can I make this work in the layout.html or in the View somehow?

This is how I would display an image in the View if it wasn't intended to be a background-image:

<img src="{{=URL('download', args=pic_row.pics)}}"/>

Of course, this approach to display a background-mage won't work:

<section id="main" class="main row" style="background-image:{{=URL('download', args=pic_row.pics)}}">

..but is there a way I can actually achieve this?

score 1 · Answer 1 · edited May 23 '17 at 11:51

1

Please read Anthony´s answer.

With this it should be possible if you include

<style>
    body {
        background: url('{{=URL('download',args=picture_name)}}')
    }
</style>

into your view.

edited May 23 '17 at 11:51

Community

1
1

answered May 13 '15 at 11:19

Rockbot

935
1
6
24

Thanks for the answer, I tried it seceral different ways but it doesn't seem to work for some reason. – Joe T. Boka May 25 '15 at 11:50
1

This is close, but the URL must be surrounded by quotes: `url('{{=URL('download', args=pic_row.pics)}}')`. – Anthony May 25 '15 at 20:41
@Anthony Thanks! Updated. – Rockbot Jul 29 '15 at 15:48

score 0 · Answer 2 · answered May 11 '15 at 17:05

Why wouldn't it work in CSS?

I'm not sure this is the best way, but surely you can construct a controller that returns an image from the database?

controllers/random.py:

def image():
    image = db(db.images ...).select().first() # get the image from db
    from io import StringIO
    stream = StringIO(image.bytes)
    response.headers['Content-Type'] = 'image/png'
    return response.stream(stream, 1024**2)

And then just point your stylesheet to it.

some_view.html:

...
<style>
body { background: url("/random/image"); }
</style>
...

The `image` function is unnecessary, as web2py already includes a built-in facility for streaming uploaded files. Otherwise, this method should work. — Anthony, May 25 '15 at 20:36

score 0 · Accepted Answer · answered May 25 '15 at 20:39

<section id="main" class="main row" style="background-image:{{=URL('download', args=pic_row.pics)}}">

The above method proposed in the question is close, but the CSS syntax is incorrect. The style attribute should be:

"background-image: url('{{=URL('download', args=pic_row.pics)}}')"

How to change the background image using img file from database in Web2py

3 Answers3

Linked