[Resolved] .container full image background

[Author]

Posts

[famaraM]

Hello
I am trying to set a background image for the container and i want the background to apply to all the website layout but instead of that it is repeating the background for each row i'm using the starter theme
If someone can help about this that would be great
Thank you !

[Beda]

I understand you want a Background Image applied to your entire Site/page, with CSS background property, is that correct?

CSS background properties are described here:
hidden link

For not repeating background property use this:

body {
    background-image: url("img_tree.png");
    background-repeat: no-repeat;
    background-position: center center;
} 

Does that help?

The DOC for Toolset Starter is here, in case you need it:
https://toolset.com/documentation/user-guides/toolset-starter-theme/

Please let me know if you need further infos about this.

Thank you for your patience.

[famaraM]

Hello Beda Thank you for your reply.

This is the website : hidden link
i'm trying to apply this image hidden link as background to the container not the body background but as you see it repeats the background for each row even if i do a "background-repeat: no-repeat; " when i do a background-position: center center; it seems to use only one background but the background image is not looking the same anymore.

Thanks for your help!

[Beda]

If you want to address specific elements with CSS you need first to give the HTML a specific Class or ID.

On your provided Site you apply the Background to the Container, that seems to be fine.

If you want it only on a Row, apply the Background to the Row.
The Row will need a specific class or ID to be addressed

If you want it on one container only, also the Container must hold a specific ID or Class, so you can change your CSS pointer.

Instead of .container you will use .container.my-class as example.

This needs to be added to the HTML as a Class or ID first.
In Layouts you can add classes and ID's when editing Rows, Cells and grids.

This is explained here:
https://toolset.com/documentation/user-guides/using-html-css-style-layout-cells//

If you don't use Layouts, you need to edit either your Theme's templates or you can use Content templates on the_content() part.

CSS and HTML are something that Toolset does not provide and are a required ability of the Developer.
You can learn more about this on here:
hidden link
hidden link

Those are 2 amazing good DOC and tutorial parts, that I myself use a lot for reference.

Please let me know if you have further questions regarding the issue mentioned in this Thread

Thank you for your patience.

[famaraM]

Hi

Thank you for your reply i managed to find a solution but the main issue i got was when you set a specific id and set a background using that id every row you add on layouts repeat the background.

Thank you anyway for the links it was very helpful