Partage

Mon background est tros petit

14 avril 2018 à 18:34:04

Je viens de remarquer que quand je dezoom sur mon site internet mon background avais un contour blanc comment je pourrais faire pour que quand l'utilisateur dezoom mon background est sur toute la page Voici mon code (je vais changer les margin)

Mon html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<link rel="stylesheet" href="Euskal style.css" />
		<title> Euskall Bass </title>
	</head>
	<body>
		<div id="menu">
		<nav>
			<ul>
				<li><a href="Euskal bass test.html">Acceuil</a></li><!--
				--><li><a href="Page3.html">C'est La Page 3</a></li><!--
				--><li><a href="Page4.html">C'est la Page 4</a></li><!--
				--><li><a href="Page5.html">C'est la Page 5</a></li>
			</ul>
		</nav>
		</div>
		<div id="son1">
			<iframe width="110%" height="166" scrolling="no" frameborder="no" allow="autoplay" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/320035561&color=%23ff5500&auto_play=false&hide_related=true&show_comments=true&show_user=true&show_reposts=false&show_teaser=true"></iframe>
		</div>
		<div id="ESKBson">
			<iframe width="110%" height="166" scrolling="no" frameborder="no" allow="autoplay" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/users/77905827&color=%23ff5500&auto_play=false&hide_related=true&show_comments=true&show_user=true&show_reposts=false&show_teaser=false"></iframe>
		</div>
		<div id="twitter">
			<a href="https://twitter.com/tonn_hardbass"><img src="twitter.png" title="Notre twitter"></a>
		<div id="soundcloud"><a href="https://soundcloud.com/euskal-bass"><img src="soundcloud.png" title="Notre soundcloud"> </a>	</div>
		</div>
		<div id="facebook"><a href="https://www.facebook.com/euskalbass/"><img src="facebook.png" title="Notre facebook"></a></div>
		<div id="youtube"><a href="https://www.youtube.com/channel/UCVm54zJynKZLJ6YusY8BiUg"><img src="youtube.png" title="Notre youtube"></a></div>
		<div id="twitch"><a href="https://www.twitch.tv/euskalbasstv"><img src="twitch.png" title="Notre twitch"></a></div>
		<div id="logo"><a href="Euskal bass test.html"><img src="logo.png" title="Acceuil"></a></div>
	</body>
</html>

Mon css

body
{
	background: url("test2.jpg") fixed no-repeat center;
}
#son1
{
	width: 500px;
	margin: auto;
}

nav, ul{
	padding: 0px; 
	margin: 0px;
	list-style-type: none;
	background: #333333
}

nav, li{
	display: inline-block;
	margin: 0px;
	padding: 0px;
	width: auto;
	height: 40px;
	border-right: 1px solid #CCCCCC;
	text-align: center;
	line-height: 40px;
}
nav li a{
	display: block;
	text-decoration: none;
	color: #FFFFFF
}
nav li :hover{
	background: #3388BB
}
#menu{
	width: 500px;
	margin: auto;
}
#ESKBson{
	width: 500px;
	margin: auto;
}
#twitter{
	margin-top: -375px;
	margin-left: 775px;
}
#soundcloud{
	margin-top: -30px;
	margin-left: 35px;
}
#facebook{
	margin-top: -29px;
	margin-left: 845px;
}
#youtube{
	margin-top: -30px;
	margin-left: 880px;
}
#twitch{
	margin-top: -38px;
	margin-left: 915px;
}
#logo{
	margin-top: -50px;
	margin-left: 320px;
}

Vous êtes demandeur d'emploi ?
Sans diplôme post-bac ?

Devenez Développeur web junior

Je postule
Formation
certifiante
Financée
à 100%
14 avril 2018 à 19:00:41

Tu peux gérer la taille de ton backgroun-image avec la propriété background-size

Par exemple

background-size: cover;

lui fera prendre toute la taille de l'élément.



-
Edité par Syltaen 14 avril 2018 à 19:00:52

15 avril 2018 à 10:07:21

Un bon article concernant background-size: cover qui te fera bien comprendre son utilité :

https://www.alsacreations.com/astuce/lire/1216-arriere-plan-background-extensible.html

Donne moi ton avis sur ma Reconversion professionnel en Développeur Web ----- Rejoins moi sur LinkedIn

Mon background est tros petit

× Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
  • Editeur
  • Markdown