Updating webhelp tile image

ann.jensen
Posts: 240
Joined: Wed Jun 17, 2015 10:19 am

Updating webhelp tile image

Post by ann.jensen » Tue Mar 07, 2017 8:32 pm

Hi,
I currently have my webhelp transformation working with images configured on the background of the tiles on my index.html.
However, our UX designer wants me to change them so that the image appears above the tile title and shortdesc.
Can anyone advise on how I change this?
Thanks in advance,
Ann

alin
Site Admin
Posts: 176
Joined: Thu Dec 24, 2009 11:21 am

Re: Updating webhelp tile image

Post by alin » Wed Mar 08, 2017 12:32 pm

Hello,

You could use a padding-top value that is larger than the height of the background image.
For example:

Code: Select all


.wh_tile > div {
background-repeat: no-repeat;
background-position: center 0;
padding-top: 200px; /* In my case the background image has a height of 180 pixels and
the padding-top value should be large enough to render the image
above the tile content. */
background-image: url(resources/flowers_by_season_tile.png); /* Replace the URL with the path to your image.*/
}
Regards,
Alin
Alin Balasa
Software Developer
<oXygen/> XML Editor
http://www.oxygenxml.com

ann.jensen
Posts: 240
Joined: Wed Jun 17, 2015 10:19 am

Re: Updating webhelp tile image

Post by ann.jensen » Thu Mar 09, 2017 1:45 pm

That did the job perfectly.
Thanks Alin,
Regards,
Ann

Post Reply