-
AuthorPosts
-
May 27, 2016 at 11:52 am #639228
Good morning,
I’m facing with a problem that I think it’s not depending on my code. This is why the same code into another website with enfold works, and in this one not..
Anyway I’ll try to explain as best as I can: I have a section (#mission) with a .jpg background, so I created the following css
#mission:hover {
background-repeat: no-repeat;
background-image: url(‘http://aderal.es/wp-content/uploads/2016/05/home-aderal-promo-message-video.gif’);
background-attachment: scroll;
background-size: cover;
background-position: center center;
z-index: 9999;
}The goal is to load the gif image when I over into the div section, but not working. Same issue happens with social icons in the footer, but the same code works into the other website. I’ll place the links into the private content..
is this a bug or my fault?
Regards,
DavideMay 27, 2016 at 12:15 pm #639239Hey aderal2016,
To change the div background image you need to set the background for it in css instead of setting the background image in backend.
#mission{ background-image: url(‘background_1.jpg’); } #mission:hover { background-image: url(‘background_2.jpg’); }
The social icons do not change color on hover because it is a image. please use the default social icon included in the theme and apply the working css you already have on the blog page to change the background color.
Best regards,
VinayMay 27, 2016 at 12:22 pm #639241Hi Vinay,
thanks for ur answer but it doesn’t work :( check… neither the main bg now is shown..
May 27, 2016 at 4:14 pm #639360Hey!
I think what you have is correct but the image path is wrong. Please remove old code and replace the image path in the below code and use it. I have tested this on your site and it works :)
#mission { background-repeat: no-repeat; background-image: url('http://aderal.es/wp-content/uploads/2016/05/home-aderal-promo-message-video.gif'); background-attachment: scroll; background-size: cover; background-position: center center; } #mission:hover { background-image: url('http://aderal.es/blog/wp-content/uploads/2016/05/Slide_REACTVERTISING.jpg'); }
Cheers!
VinayMay 27, 2016 at 5:28 pm #639408Hi Vinay,
Sorry I think there’s a misunderstanding..
I want to keep this jpg as main, and the gif when hover
static state: http://aderal.es/wp-content/uploads/2016/05/home-aderal-claim.jpg
hover state: http://aderal.es/wp-content/uploads/2016/05/home-aderal-promo-message-video.gifCode:
#mission {
background-image: url(‘http://aderal.es/wp-content/uploads/2016/05/home-aderal-claim.jpg’);
}#mission:hover {
background-image: url(‘http://aderal.es/wp-content/uploads/2016/05/home-aderal-promo-message-video.mp4’);
}Doesn’t working…neither the static image in not hover statement..
May 28, 2016 at 8:56 am #639686Hi!
Please use the code provided here and don’t forget to replace the images with your own :)
Cheers!
VinayMay 29, 2016 at 1:24 am #639879Now it works the hover, but doesn’t show the hover image :D
May 29, 2016 at 8:35 am #639908Hi,
Please make sure the background image path is correct it will work :)
open the image in media library and copy the URL
Best regards,
Vinay- This reply was modified 8 years, 5 months ago by Vinay.
May 29, 2016 at 12:02 pm #639954Hi Vinay,
the patch is correct
http://aderal.es/wp-content/uploads/2016/05/home-aderal-claim.gif
Best
DavideMay 29, 2016 at 12:13 pm #639957Hola,
El estado hover es un video o un gif? ninguno de los dos links que has puesto retorna un archivo (404):
[video src="https://aderal.es/wp-content/uploads/2016/05/home-aderal-promo-message-video.mp4" /]
http://aderal.es/wp-content/uploads/2016/05/home-aderal-promo-message-video.gifSaludos,
JosueMay 29, 2016 at 12:44 pm #639977Hola Josue,
si porqué por sea caso he cambiado el nombre y he vuelto a subirlo.. esto es el nuevo path en los CSS
http://aderal.es/wp-content/uploads/2016/05/home-aderal-claim.gifGracias,
DavideMay 29, 2016 at 12:48 pm #639979Este código debería funcionar:
#mission:hover { background-image: url('http://aderal.es/wp-content/uploads/2016/05/home-aderal-claim.gif'); }
Asegurate de resetear todas las minificaciones / cacheos que tengas activados.
-
AuthorPosts
- You must be logged in to reply to this topic.