Ricardo
·
Added a discussion
Site with multiple Background options?

I would like to have my homepage displaying a background that is totally different from the background of the rest of the site, is this possible with any of the templates or Apps?

With Protean, the background of the site can be edited under Body>Background. This affects the entire site, so it is not possible to selectively change the background of specific pages. Are there currently any alternatives to this in UNA?

  • 1937
Comments

    • Hello Ricardo!

      Seems you need to add some CSS rules to the Studio->Your current template->Styles->Custom Styles area. The homepage has the block of the main area with id=bx-"page-home". So you may add something like:

      #bx-page-home  {

      backgropund-image: [set of rules]

      }

      • Hi LeonidS,

        Many thanks for the reply.

        Thanks to your suggestions, I managed to place an image on the homapage that is unique to that page only. However, it seems I am not able to go beyond the limits defined by the 1024 value set under Template>Styles>Body>"Page Width".

        As you can see in the attachment, the image standing behind the sign up form is the image I added using the CSS code. I tried using different rules to control the image size, including background-size: cover; but the image hits a hardwall on that 1024 px limit.

        By contrast, the blurred image I load under Template>Styles>Body>"Background Image" reaches all corners of the screen.

        Essentially, I would like for the image I load with the custom CSS code to behave as the image I load via the background control with "Styles". Do you have any suggestions on how this could be achieved?

        Many thanks!

        • Sorry LeonidS, I ment to reply here. Please check my follow up question down this feed.

          • Hello Ricardo!

            Well, it can be done with Javascript tricks only. In Template->Styles->Custom Styles Studio->Designer->Injections->Head area you insert Javascript code like:

            UPD - noticed now my error there :-)

            • Thanks LeonidS!

              I tried your suggestion but it did not alter the default definitions.

              You can confirm my attempt in the attachment. I checked and modified the URL itself, but the homepage continues on displaying the exact image I selected under Template>Styles>Body.

              If no background image is selected in Body, the script does not alter that either.

              Could you please check the attachment to see if all is correct? I did not alter any files in my UNA project, so #bx references should be valid.

              Many thanks!

              R.

              • Well, to be sure you'd better use the image from the same URL as your UNA (just confused now as it is fro Wordpress site :-))

                • Hi LeonidS!

                  So I did try to use one of my images on my website, but it did not work.

                  In the meantime I spotted the lack of a closing parenthesis in the javascript code but correcting that also did not help.

                  Unfortunately I cannot paste here the exact code I use because I do not have premium membership. But again I attach a screenshot.

                  If this works for you, it might mean that simply I may be missing inputing some additional lines - 

                  any suggestions?

                  • By the way, the attach of the previous post states "backgroundImage" instead of "background-Image", but the hyphenated expression was used also. 

                    I also tried explicitly indicating if( $('#bx-page-home').length )>0 but also that did not work.

                    • I know you guys are busy but just wondering for the possibility of a reply... many thanks!

                      • JavaScript can't be inserted into Custom Styles block, it's for CSS only. Also I recommend another approach. Add "raw" block to your page with content like this:

                        <style>
insert custom CSS styles here for background image
</style>

                        • Many thanks Alex. Thank you for looking into my problem.

                          Login or Join to comment.