28172 sujets

CSS et mise en forme, CSS3

Positionner une image correctement

Bonsoir,

Je tente de faire un petit jeu et pour cela j'ai besoin d'une image de fond et d'un canvas par dessus.

Je débute quelque peu et je ne suis pas sûre de moi : où mettre la largeur/la hauteur... dans img ou dans le css ? et si c'est dans le css, dans celui du div ou de l'image ?
Je suppose qu'il vaut mieux mettre des % pour que tout le monde est le même rendu mais à ce moment, comment mettre le canvas au dessus du bon morceau d'image ?

Merci beaucoup
Désolée s'il y a des fautes ou si les réponses sont trouvables facilement mais j'ai tenté de chercher, mal certainement et aux vues de ma fatigue conjuguée à une rouille (et peu de pratique aussi...)...
Merci encore
104 vues et pas de réponse ? Ma question est peut-être trop évidente et je dois chercher la réponse moi-même... Mais si c'est le cas, pouvez-vous me le dire ? De plus je cherche dans tous les sens sans trouver ce que je veux... guidez moi s'il-vous-plait :'(
Hello,

Je pense qu'il n'y a pas de réponses car ce n'est pas très clair.
Quel type de jeu veux-tu faire ?

C'est un jeu sous forme de niveau dans lequel tu cours, ça ne sera pas la même chose que pour un jeu style démineur ou le fond ne bouge pas.

Quoi qu'il en soit, le fait de définir les tailles sur l'image ou dans le style css, cela ne changera pas grand chose mais tu devrais faire le maximum dans le fichier css.
Bonjour,

Merci de dire où ça va pas dans la question ^^

Pas de chance, tu arrives trop tard car j'ai trouvé ce que je cherché "background-size :contain" Voici le code au cas où ça serait améliorable :
<!DOCTYPE html>
<html lang="fr">
	<head>
		<title>Trions nos déchets</title>
		<meta charset="utf-8" />
		<link rel="stylesheet" href="tri.css" />
	</head>
	<body>
		<div id="fond">
			<div id="dechets">
			</div>
		</div>
		
		<script type="text/javascript" src="tri.js">
		</script>
	</body>
</html>


#fond
{
	width:100%;
	height:100%;
	position:absolute;
	left:15%;
	background: url(poubelles.png) no-repeat center center;
	background-size:contain;
	max-width:800px;
	max-height:600px;
}

#dechets
{
	width:10%;
	height:20%;
	position:relative;
	top:40%;
	left:44%;
	background:url(papier_propre.png) no-repeat center center;
	/*background-position: -0px -130px; pour me rappeler quoi faire*/
	background-size:contain;
}


Merci encore

PS Pas encore de JS
Modifié par Ccile13 (22 Oct 2013 - 16:33)
Sujet clos
Aller à