Provide Site Background Image in Theme Settings

Developer Support CMS Development
, ,
1

Hello,

I am trying to have a Theme field that allows people to set background image for their website, but the theme field has no field for that.

The background_image and url fields are only for modules.

Do you have any solution for that?

Thank you very much.

2

Hi @tiennguyenvan,

you can use the default image field and use the source as background.

Like

fields.json

 {
 "name": "image_field",
 "label": "Image field",
 "required": false,
 "locked": false,
 "inline_help_text": "",
 "help_text": "",
 "responsive": false,
 "resizable": false,
 "show_loading" : false,
 "type": "image",
 "default": {
 "size_type" : "auto",
 "src": "https://via.placeholder.com/1920/1080",
 "alt": null,
 "loading": "disabled"}
 }

theme.css

.YOUR-DIV{
background-image:url('{{theme.image_field.src}}')};
background-size:cover;
background-position:center center;
min-height:100vh;
width:100vw;
overflow:hidden;
}

But: Having an image as background set in the theme fields is not a “best practise”.

If you’d like to have a section with the same informations used over and over again, you should set it up once and save it as “saved section”.

best,

Anton

3

Wow. That’s a good work around. Thank you, Anton!

Can we get a default image url from local folder of theme? Thanks again.