I’m super new to coding, I understand how to write and read some code but when it comes to the more technical items I’m a bit lost. I’ve created a slideshow with 2 images which works fine on its own but when I add it into a code that has a video background it just disappears. I suspect it’s because it’s hiding in the background somewhere even though I thought I had set the video as the background element.
I have used ( z-index: -1 ) to make the video the background.
I would love to get some feedback on how to fix this and what elements to look out for?
Thanks
Ash
Unfortunately, as a new member it won’t allow me to post the code. ;(
You can embed code in your post, but you need to format it to display properly. You can highlight your code, then use the </> button in the editor window, which will format it.
Or you can place three backticks ``` (top left key on US/UK keyboards) on a line before your code, and three on a line after your code. I find this approach easier, but unfortunately some European and other keyboards don’t have that character.
If you have a link to a live page which demonstrates the issue, that’s fine, too.
function myFunction() {
if (video.paused) {
video.play();
btn.innerHTML = "Pause";
} else {
video.pause();
btn.innerHTML = "Play";
}
}// this one is missing
You are also missing the closing div for slideshow-container.
The prefix animations are redundant these days and only serve to confuse.
This is all that is needed.
/* Fading animation */
.fade {
animation: fade 1.5s;
}
@keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
You have a redundant css bracket here that will break things.
When learning to code your best friend is the w3c css and html validators as they will highlight simple typos like this and allow you to get on with the business of coding properly.
Make those changes and test again and then post your updated code if still not working. Consider setting up a free codepen account which will allow you to post demos and code much more easily.
Many thanks for your feedback, I will try these suggestions now & let you know how I get on.
I have been checking w3c css but obviously messed up on some items - eeekk but it’s all learning curves.
I will definitely look into the codepen account - thanks for this, it’s really helpful.
Happiness - That worked perfectly Paul. Thanks so much. You are a star!
Just read over your reply again and I have been taking code from w3c css but didn’t realise there are validators on the website - so thanks for that. I will definitely check into it.
Do you know how I can move the slideshow more to the right?
You are placing the slideshow absolutely to the right and then you are translating it to the left in this rule.
If you play around with those negative values you will be able to work out which does horizontal and which is vertical and then adjust to suit
I can’t say whether this is the right approach as I don’t know what you intend to do next. If indeed you want in flow content to follow the slideshow then you would need to use another method instead of absolute positioning.
