28172 sujets

CSS et mise en forme, CSS3

GIF en fond de page

Bonjour,

Je suis confronté à un soucis en CSS. Je cherche à mettre un gif précédemment tournée (en CSS) en plein écran. J'ai essayé plusieurs solutions comme les propriétés width et height à 100% mais rien ne marche.

Voici mon code :
<html>
	<head>
		<meta http-equiv="refresh" content="300">
	</head>
	<BODY id="container_2" width="100%" ; height="100%" style="width=100% ; height=100% ; display=block">
		<img src="test/test.gif" name="menu" style="margin-left: 90px; margin-right:0px ; display:block ; moz-transform: rotate(270deg) ; -webkit-transform: rotate(270deg);">
	</BODY>
<HTML>
C'est pour faciliter la création du gif. Le gif doit être changé tous les jours par des personnes qui ne connaissent rien du tout à l'informatique.
Modérateur
Bon...

Du coup j'ai tenté un petit truc à base de :
width: 100vh;
height:100vw;


Ça a l'air de marcher : https://jsfiddle.net/f8gfo31a/6/

Et si tu veux pas qu'ils soit tronqué il faut juste rajouter :
background-size: contain;
background-repeat: no-repeat;
Meilleure solution
C'est parfait merci beaucoup Smiley smile

Par contre, il reste de l'espace sous le gif. Comment le virer ?
Modérateur
Tu l'as mis avec le 
background-size: contain;

Cover et contain conserve le bon ratio de l'image.
Contain fera en sorte que le gif rentre totalement dans le bloc quitte a mettre un espace autour.
Cover lui fera en sorte que l'image recouvre totalement la zone quitte a rogner l'image.

Si tu veux que l'image recouvre toute la surface du bloc il faut utiliser 
background-size: 100% 100%;

mais le ratio de l'image ne sera pas respecté : elle sera déformée.
Ce n'est pas grave pour moi, c'est exactement ce que je cherchais. Il y a une propriété qui peux supprimer l'espace blanc sous la photo et les ascenseurs ?
J'ai trouvé, il faut ajouter :

overflow: hidden;

Modifié par Kodeur (18 Jul 2017 - 09:48)
Sujet clos
Aller à