Background images for tiles in webhelp responsive

Edwin
Posts: 21

Background images for tiles in webhelp responsive

Mon Sep 24, 2018 1:26 pm

Hi,
we've managed to add images to the webhelp tiles, but would prefer to have the image as a background of the tile itself. Is there a quick way to achieve this?
Costin
Posts: 505

Re: Background images for tiles in webhelp responsive

Mon Sep 24, 2018 2:18 pm

Hello,

In your customization CSS, you should use the "background-image" property in a rule that matches your WebHelp tiles.
Something like:

Code: Select all

*[class=" wh_tile "]{
background-image: url("your_own_image.png");
}
Regards,
Costin
Costin Sandoi
oXygen XML Editor and Author Support
Edwin
Posts: 21

Re: Background images for tiles in webhelp responsive

Mon Sep 24, 2018 3:47 pm

Hi Costin, fair enough but that would give us the same image for all tiles. We would like an image per tile.
Costin
Posts: 505

Re: Background images for tiles in webhelp responsive

Mon Sep 24, 2018 4:23 pm

Edwin,

If you need to use different image backgrounds for different tiles, then you should use more specific selectors.
For example:

Code: Select all

div[class=" wh_tiles "] > div[class=" wh_tile "]:nth-of-type(1){
background-image:url("your_own_image.png");
}
To match other tiles you should use nth-of-type(2), nth-of-type(3), ASO.
Of course, you could also use :first-of-type / :last-of-type pseudo classes to match 1st / last tiles.

Regards,
Costin
Costin Sandoi
oXygen XML Editor and Author Support
Edwin
Posts: 21

Re: Background images for tiles in webhelp responsive

Thu Sep 27, 2018 10:50 am

Thanks, works like a dream

Return to “DITA (Editing and Publishing DITA Content)”

Who is online

Users browsing this forum: No registered users and 2 guests