Using Images as static Background watermark

  • 20 February 2019
  • 1 reply
  • 63 views

Badge +4

I want a static Watermark on my form and I dont want it to repeat. Now here i have this css I have used and i have also added the Data Label

Now How do i make the logo to be static so that The Views can scroll and have the watermark as background without it moving with the form

<script type="text/javascript">$(".panel-body-wrapper").css("background", "url(<a href="https://xxxxxxxxx/K2CustEnqApp/BLogo.png">https://xxxxxxxxx/K2CustEnqApp/BLogo.png</a>) no-repeat center");</script>


1 reply

Userlevel 4
Badge +13

Good day K2 Developer


 


By the looks of your requirement, it seem you are looking for a way to add a image to botht eh form and the view as the background, this image should be fixed and not repeat. The below should allow you to do all of the above, please follow the below steps to implement this functionality. Also take note that this is considered a custom change which woull not be directly supported by K2 Support.


 


Steps


1) From the item view add a data label on your view, ensure that is has the literal property enabled and the xss property must be disabled.


2) Now addd the following code snipped into a expresison and bind the expression to the control via the control properties or via a transfer data rule.


Note: The red section of the jQuery snippet can be changed to the hosted image of your choice.


<script> $('.panel-body').css({'background-image': 'url("https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSA5EnsSCNWGj21kiZUJGyo79ZG_v4xgAqOatSU0aQ-YPrCw881")', 'background-attachment': 'fixed', 'background-size':'cover','background-repeat':'no-repeat','background-position':'center center'})</script>

3) From the form add a data label on your view, ensure that is has the literal property enabled and the xss property must be disabled.


4) Now addd the following code snipped into a expresison and bind the expression to the control via the control properties or via a transfer data rule.


Note: The red section of the jQuery snippet can be changed to the hosted image of your choice.


<script> $('body').css({'background-image': 'url("https://i.ytimg.com/vi/YUDes_czZ3M/maxresdefault.jpg")', 'background-attachment': 'fixed', 'background-size':'cover','background-repeat':'no-repeat','background-position':'center center'})</script>

 


Results:


The above will add the specified image to both the view and the form allowing it to obtain the following result.



 


Your request  is a little vague though, would it be possible to provide  more context on your requirement should the above not be what you are looking for?


 


Should you feel that this post is of use and or an accurate solution to the raised question, I kindly encourage you to mark it as such using the 'Mark as Solution', 'Kudo' andor ‘Me Too’ options.


 


Kind Regards


Raymond


 

Reply