Responsive Intro image??

Hi,

Is there a way to make the Intro slide image responsive?

http://cleverinkdev.co.uk/stereo/

Thanks

It is already responsive
How would You like for it to act?

Yes you're right

When I drag to resize it doesn't respond but when loading the site in different sizes it does.

Thanks

What browser do You use? I have checked current Chrome, Firefox and Safari and it works well with changing browser width and height live.

Hi, any chance you can explain me how the picture (enter) is used in stead of the text? How should it be defined?

I checked your recommendation 'Url: [Different link]#gkHeader' but I can't get the correct parameter to load an image.

Thanks for your help!

It is done with css technique called image replacement:

Code: Select all

.gkIsWrapper-gk_creativity .figcaption > a, .enter {
    background: url("../images/live.png") no-repeat scroll 0 0 transparent !important;
    border: medium none !important;
    height: 100%;
    max-height: 100%;
    max-width: 100%;
    width: 155px;
}
.gkIsWrapper-gk_creativity .figcaption > a:hover {
    background:url(../images/hover.png) no-repeat !important;;
    color: #7484FF;
}


The code is placed in override.css and loads 2 images - in standard and hover state.

Dear Cyberek,

Thanks for the quick response. Works fine with one small issue: the image goes to the top of the screen where I would like to have it there where the original link was. Please check at http://www.awnederland.nl/test/#gkHeader

Any suggestion how to adjust this?

Modify the css:

Code: Select all

.gkIsWrapper-gk_creativity .figcaption > a, .enter {
    background: url("http://www.awnederland.nl/test/images/startscherm/logo-AW-startscherm-kleur.png") no-repeat scroll 0 0 transparent !important;
    border: medium none !important;
    text-indent: -9999px;
    height: 134px;
    width: 155px;
}
.gkIsWrapper-gk_creativity .figcaption > a:hover {
    background:url(http://www.awnederland.nl/test/images/startscherm/logo-AW-startscherm-grijs.png) no-repeat !important;;
    color: #7484FF;
}


This will place button back where it should be, and also remove text from it.

Great work, thanks a lot!