Image backgrounds

[terrytring]

I might be missing something and it can easily be done in the code but it would be nice to be able to add image backgrounds to various elements directly in the properties panel - containers, jumbrotrons, divs etc

[George]

Well for this and other general CSS styling we have the CSS Designer, so just:

1. Select the element you need to style
2. go the the “Styles” panel on the left.
3. Click behind “element.style {”
4. beging typing with backgr… and select background-image
5. type as value: url(myimage.jpg)
6. hit enter and you are done

This produces the inline style in the html for the background image you need. You can add there in the same way many other CSS options as inline styles - or just create classes for reuse later on.

[terrytring]

Thanks George - I’ve just never clicked behind ‘element.style {’ before. I think out of habit I’ve been adding the css for anything that isn’t in the properties panel manually. So obvious, i might just have to feel a bit silly for a while - but I’ll get over it!

[George]

Yes a lot of hidden powers out there - but once you discover them - you love them

[randyrie]

I’ve tried using a ‘container’ element on my homepage to add a background image - doing just as you described. No image displays. Should I be using another element, nested inside the container where I want it to display?

Does it make any difference what image format (png, jpg, gif etc.)? I’m at a loss to what I’m doing wrong!

[brad]

Try giving your container an id and assign the background-image to #yourid

[randyrie]

Am I assigning the id incorrectly to the container element? Still not working.

[brad]

That’s not correct.

Select you container in design view. In the CSS Panel click to create a new rule and add your background there.

You should end up with somethingh like:

#home  {
background-image: images/crucifix_bkgrnd.jpg;
}

[Teodor]

Hello, the background image value you entered is wrong.
It should be:
background-image: url(‘path/image.jpg’)

[randyrie]

Thank you for the example… I finally got my background image to display.

(Please see my bug report about v1.0.5 in the “Bugs” category.)

[jnapadow]

So is there an image selection helper or must you hand code everything?

[randyrie]

I was using incorrect syntax and followed Teodor's suggested code in the Styles panel which worked for me. (I don't know if this has been updated or not in Wappler).

@Teodor

background-image: url(‘path/image.jpg’)