Using CSS for background image

I have a set of CCv5 connections. Each connection pulls records from a db using the category field. I want to use a background symbolic of each category: Banking using a financial symbol, Churches using praying hands.

In the Front List > List Display > Custom > Body Code I have added the following code:
<style>
form {
background-image: url("images/prayinghands.png");
background-repeat: no-repeat;
background-position: center;
}
</style>

When I test it from the admin area everything shows up fine. When I use the menu link to the page it does not show up. The code is present in the HTML. I attempted to look for the form name and found admin_form which I used in place of just form. The background did not show up from the front end or the back end.

Your efforts to assist me are appreciated.

Hi Atheron,

I'm guessing that the relative URLs for the images get broken. Use your browser web developer tools to check and see what image it is trying to load - probably the path will be something odd possibly linked to the template folder. Adding a / before the image URL may be enough depending on where they are actually saved.

Bob

Thanks, Bob, you are exactly right. It works now.

How can I reference the form and not use the HTML form tag? I wanted to have a login form on the right side of the page, however, it picks up the background image since it is also an HTML form. I am thinking I can use this with an onload call:

<script>
function myFunction() {
    document.getElementById("admin_form").style.backgroundImage = "url('/images/prayinghands.png')";
}
</script>

Is there a better approach?

Got it! Just added the class to the original code with the forward slash added.

<style type="text/css">
.chrono-page-container  {
    background-image: url("/images/prayinghands.png");
    background-repeat: no-repeat;
    background-position: center; 
}
</style>

Hi Atherton,

That's good. ChronoForms v5 forms are wrapped in a div with a class of gbs3 so you can always use .gbs3 to restrict CSS to your forms, if you need to restrict it to a particular form then it will have an id set so you can use #chronoform-form_name

Bob