Background images for tiles in webhelp responsive

Post here questions and problems related to editing and publishing DITA content.
Edwin
Posts: 22
Joined: Tue May 17, 2016 4:58 pm

Background images for tiles in webhelp responsive

Post by Edwin »

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: 828
Joined: Mon Dec 05, 2011 6:04 pm

Re: Background images for tiles in webhelp responsive

Post by Costin »

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: 22
Joined: Tue May 17, 2016 4:58 pm

Re: Background images for tiles in webhelp responsive

Post by Edwin »

Hi Costin, fair enough but that would give us the same image for all tiles. We would like an image per tile.
Costin
Posts: 828
Joined: Mon Dec 05, 2011 6:04 pm

Re: Background images for tiles in webhelp responsive

Post by Costin »

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: 22
Joined: Tue May 17, 2016 4:58 pm

Re: Background images for tiles in webhelp responsive

Post by Edwin »

Thanks, works like a dream
Post Reply