Settings for modal buttons using background images?

[Anonymous 103878]

Anonymous 103878

September 18, 2016 at 2:26 pm

Hi Guys !

On that page: *Login to see link I have set 3 modal buttons using background images and I used following CSS to make it work:

Example related to the right button:

#pgc-1191-2-2 button.kad-btn.kad-btn-primary.lg-kad-btn {
background-image: url(*Login to see link
background-size: cover;
width: 100%;
height: 360px;
background-repeat: no-repeat;
}

Can you help me on the following points ?

1 – Depending on the web browser, when closing the modal box, a blue solid border appears around the button. It occurs under Safari and Chrome, under Chrome, this blue border also appears when the mouse cursor is rolling over the button. On the other hand, it seems quite OK under Edge.

Can you help me removing this blue solid border around modal buttons?

2 – As stated on the customized CSS, I used “width: 100%; height: 360px;” to display correctly the background images. But when resizing the browser window or when displaying this page on a mobile devices, the dimensions of those images used as modal buttons are not automatically adapted, images are cut/truncated.

Which CSS should I put to get the right display in all cases (regular/resized/mobile window)?

Thanks in advance for your help,

Marina