[Resolved] I want to use an image as the background for my site

[Author]

Posts

[julieP]

I would like to have an image as the background on my site. I'm using Toolset Starter Theme (Child) and Layouts. I had expected to be able to set this in Appearance>Customise but the option isn't there. How do I do this please?

[julieP]

I'm part the way there. I've put this in Layouts CSS:-

body {
  	background-image: url('XXX');
    background-repeat: no-repeat;
    background-position: center center;
  	background-attachment: fixed;
}

and I've set my rows in layouts to be the same width as the container and my image renders. However, the rows in Layouts have a transparent background. How do I change this to white please?

Thanks

[Luo Yang]

Dear julie,

I suggest you setup the background image with CSS codes, for example:
Dashboard-> Appearance-> Customize-> Custom CSS,
add below CSS codes:

body{
  background-image: url(<em><u>hidden link</u></em>);
}

[Luo Yang]

For your new question:
the rows in Layouts have a transparent background. How do I change this to white please?
Please describe detail steps to duplicate same problem:
How do you setup the row in layout?
take some screenshot for the problem row settings, I need test and debug it in my localhost, thanks

[julieP]

Thank you. I've done that with this CSS:

body {
    background-image: url('XXX');
    background-repeat: no-repeat;
    background-position: center center;
    background-attachment: fixed;
}

and I've set my rows in layouts to be the same width as the container. The image renders but the rows in Layouts have a transparent background. How do I change this to white please?

Thanks

[julieP]

I think we posted at the same time! I need to come back to this later today when I have more time to do what you ask. Please leave post open for the time being. Thank you

[Luo Yang]

You can customize specific row in layout with CSS codes, for example:
1) edit the specific row, add a custom CSS class name "my-row",
2) in Layouts CSS, add below codes to setup those row with CSS class name "my-row" as background white.

.my-row{
background: white;
}

See our document:
Using HTML and CSS to Style Layout Cells and Rows
https://toolset.com/documentation/user-guides/using-html-css-style-layout-cells/#adding-css-code-for-custom-styling

[julieP]

excellent - got to grips with that now and achieved what I wanted.

Thank you for your guidance and patience!