Demi-Image background
Résolu
RCoder974
-
RCoder974 -
RCoder974 -
Bonsoir,
J'aimerai avoir une information au sujet de mon CSS ! J'aimerai avoir une vidéo en arrière plan qui tourne en boucle mais qui fait le demi du site (sans déformation).
Voici mon CSS actuel pour la vidéo :
.VideoIndex {
position: fixed;
z-index: -1;
}
video {
width: 500px;
height: 10px;
display: block;
margin: 0 auto;
background-size: cover;
transform: scale(120,54.6)
}
Dans une balise <style> de la balise <head>
J'aimerai avoir une information au sujet de mon CSS ! J'aimerai avoir une vidéo en arrière plan qui tourne en boucle mais qui fait le demi du site (sans déformation).
Voici mon CSS actuel pour la vidéo :
.VideoIndex {
position: fixed;
z-index: -1;
}
video {
width: 500px;
height: 10px;
display: block;
margin: 0 auto;
background-size: cover;
transform: scale(120,54.6)
}
Dans une balise <style> de la balise <head>
A voir également:
- Remove image background css
- Hiberfil.sys remove - Guide
- Image iso - Guide
- Remove empty directories - Télécharger - Nettoyage
- Remove wat - Télécharger - Nettoyage
- Reduire taille image - Guide
1 réponse
Bonjour,
Une solution possible est d'inclure l'élément video dans un autre élément html sur lequel on peut appliquer les propriétés overflow: hidden; et width: 50%; pour n'afficher que la moitié de la vidéo.
Démo : https://jsfiddle.net/Lu92dsc4/
Une solution possible est d'inclure l'élément video dans un autre élément html sur lequel on peut appliquer les propriétés overflow: hidden; et width: 50%; pour n'afficher que la moitié de la vidéo.
<!-- html --> <div class="video-crop50"> <video src="video.mp4" autoplay muted loop></video> </div> <p>Lorem ipsum</p>
/* css */
.video-crop50 {
position: fixed;
top: 0;
left: 0;
overflow: hidden;
width: 50%;
height: 100vh;
z-index: -1;
}
.video-crop50 video {
min-width: 100vw;
min-height: 100vh;
}
Démo : https://jsfiddle.net/Lu92dsc4/
Merci Pitet !