Can a transformation div have more than one background image?

Heather Aluma asked on January 5, 2022 01:16

Hi. I am working on a page type transformation, and I'd like to have two background images on a div . Is this possible to do in Kentico? I am using version 11. I have two lines of code that work separately, but in every way that I've tried to combine them I have not been successful. The two lines of code are below:

<div class="title-container" style="background:url('<%# GetFileUrl("BgBanner") %>') no-repeat; background-size: 100% auto; ">

<div class="title-inner" style="background:url('<%# GetFileUrl("BgImage") %>') no-repeat right; background-size: contain;">

kentico 11

Correct Answer

vasu yerramsetti answered on January 5, 2022 06:03

I think you are using ASCX transformation. Please try to change your transformation from ASCX to text/xml and try below code snippet.

Here I mentioned example for Text/ XML transformation How to handle div with background conditionally -

{%if(MenuItemName == "Home"){ %}
<div style="background:red"> 
<p>Back ground is red</p>
{%} else {%}
<div >
<p>No Back ground color</p>
{%}#%}
</div>

NOTE: GetFileUrl is not support in Kentico 11 and it is changed from GetFileUrl to GetAttachmentUrlByGUID.

API changes Reference URL:https://devnet.kentico.com/documentation/api-changes/kentico-11/24985

Other way handling DIV with Multiple Backgrounds:

<div style="background: url('<%# GetFileUrl("BgBanner") %>'), url('<%# GetFileUrl("BgImage") %>');background-repeat:  no-repeat, repeat;background-size: 100% auto contain;">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
<p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
</div>

https://www.w3schools.com/css/css3_backgrounds.asp

https://stackoverflow.com/questions/11468604/multiple-backgrounds-with-different-background-size

0 votesVote for this answer Unmark Correct answer

Recent Answers

Heather Aluma answered on January 5, 2022 18:32

Thx, and thank you for the information about GetAttachmentUrlByGUID.

0 votesVote for this answer Mark as a Correct answer