CSS: Mon image s'affiche a moitié et se répète ainsi...
Sims1234
Messages postés
7
Statut
Membre
-
Sims1234 Messages postés 7 Statut Membre -
Sims1234 Messages postés 7 Statut Membre -
Bonjour, je débute en HTML/CSS pour le moment et j'ai un problème avec une image. Le cadre de l'image est bien centré mais malheureusement l'image ne démarre qu'au milieu puis se répète dans mon cadre. Print screen => http://imageshack.com/a/img819/4755/9vda.png . Voici l'image de base qui commence bien plus à gauche => http://imageshack.com/a/img837/1025/vkbx.jpg ... Je ne comprends pas pourquoi cette image ne s'affiche pas normalement :(
Et voici mon code:
Besoin d'aide SVP merci :)
Et voici mon code:
div.background{
background: url("../images/background3.jpg")fixed;
height:1950px;
margin-left:23%;
margin-right: 25%;
margin-bottom:0;
padding:30px 20px;
background-color:#ffffff;
border:3px solid black;
opacity:1;
}
Besoin d'aide SVP merci :)
A voir également:
- CSS: Mon image s'affiche a moitié et se répète ainsi...
- Css download - Télécharger - HTML
- Enlever soulignement lien css ✓ - Forum CSS
- Enlever le soulignement d'un lien css ✓ - Forum Réseaux sociaux
- Css ligne horizontale ✓ - Forum CSS
- Enlever le soulignage des lien. - Forum CSS
4 réponses
salut
.background{
position:fixed;
background-image: url("../images/background3.jpg");
background-repeat:no-repeat;
background-position:left top;
width:1000px;
height:1950px;
margin:50px;
margin-bottom:0;
padding:30px 20px;
background-color:#ffffff;
border:3px solid black;
opacity:1;
}
ton image doit avoir une taille de 1000 x 1950
si ce n'est pas le cas rajoute
background-size: 100% 100%;
ou
background-size: contain;
Un petit merci vaut mieux qu'une grande ignorance !
Donc si votre sujet est résolu une réponse avec merci c'est pas de refus.
.background{
position:fixed;
background-image: url("../images/background3.jpg");
background-repeat:no-repeat;
background-position:left top;
width:1000px;
height:1950px;
margin:50px;
margin-bottom:0;
padding:30px 20px;
background-color:#ffffff;
border:3px solid black;
opacity:1;
}
ton image doit avoir une taille de 1000 x 1950
si ce n'est pas le cas rajoute
background-size: 100% 100%;
ou
background-size: contain;
Un petit merci vaut mieux qu'une grande ignorance !
Donc si votre sujet est résolu une réponse avec merci c'est pas de refus.
Voilà, j'espère que c'est pas trop brouillon comme je dis je débute :)
HTML:
CSS:
HTML:
<!DOCTYPE html> <html lang="fr"> <head> <meta charset="utf-8" /> <link rel="stylesheet" href="styles/style.css" /> <title>Light Heaven</title> </head> <body> <header> <img src="images/head.jpg" alt="Light Heaven" Title="Bienvenue chez Light Heaven"/> </header> <div class = "background"> <nav> <ul><li><a href="site.html"> Accueil<br/><br/><br/></a></li> <li><a href="carte.html"> Carte<br/><br/><br/></a></li> <li><a href="contact.html"> Contact<br/></a></li></ul> </nav> <h2> A la carte : </h2> <br/> <h3> Salades : </h3> <ul><li> Salade chèvre & bacon -- 10€</li> <li> Salade poulet maïs -- 9€</li> <li> Salade niçoise -- 10,5€</li> <li> Salade tomate mozzarella et basilic -- 9,5€ </li> <li> Salade saumon fumé et fenouille -- 12€</li></ul> <br/> <h3> Cuisine Chinoise : </h3> <ul><li> Boeuf sauté au riz -- 8,5€ </li> <li> Boeuf sauté aux nouilles - <em>"plat gourmand" </em>-- 9,5€</li> <li> Porc sauté au riz -- 7,5€</li> <li> Porc sauté aux nouilles -- 8,5€</li> <li> Riz aux légumes -- 7€ </li> <li> Riz aux oeufs -- 6,5€</li></ul> <br/> <h3> Cuisine Italienne : </h3> <ul><li> Pizza mozzarella -- 8,5€ </li> <li> Pizza prosciutto -- 9€</li> <li> Spaghetti bolognaise -- 8,5€ </li> <li> Spaghetti au pesto -- 7,5€</li> <li> Calzone quatre fromages - <em>"plat gourmand" </em>-- 8€</li></ul> <br/> <h3> Cuisine Française : </h3> <ul><li> Steak tartare 7,5€ </li> <li> Boeuf bourgignon -- -- 10,5€</li> <li> Magret de canard - <em>"plat gourmand" </em>-- 12€</li> <li> Confit de canard - <em>"plat gourmand" </em>-- 13€ </li></ul> <br/> <h3> Cuisine Marocaine :</h3> <ul><li> Couscous royal -- 10€</li> <li> Couscous agneau -- 8,5€ </li> <li> Tajine poulet au citron -- 11€</li> <li> Tajine agneau aux raisins et amandes -- 12€</li></ul> <br/> <h3> Cuisine au Grill : </h3> <ul><li> Assortiment de grillades (boeuf, porc, agneau) - <em>"plat gourmand" </em> 16€</li> <li> Asado de poulet -- 14€</li> <li> Asado de boeuf -- 14€</li> <li> Asado de fruits de mer - <em>"plat gourmand" </em>-- 16€</li></ul> </div> <footer> <p>Auteur : Simon Oldenhove - Création le 23 novembre 2013 - Tous droits réservés(ou presque).<br/> Contact information: <a href="mailto:someone@example.com">lightheaven@example.com</a></p> </footer> </body> </html>
CSS:
html, body{
background: url("../images/background.jpg") fixed;
height:100%;
margin:0px;
padding:0px;
}
*{
margin:0;
}
header{position:relative; top: 30px;margin-left:90px;}
audio{
position:fixed;
top: 10px;
right: 150px;
}
h1 {
margin-left:450px;
color: rgb(253,174,86);
font-size: 3em;
font-style: oblique;
font-family: Arial, "Trebuchet MS", serif;
text-shadow: 2px 2px 1px black;
}
p{
color: white;
text-align: center;
font-size: 1.5em;
font-family: Calibri, "Trebuchet MS", serif;
text-shadow: 2px 2px 0px black;
background-color: rgba(39,22,117, 0.3);
margin-top: 60px;
}
h2{
color: white;
text-align:center;
font-size: 1.8em;
font-family: Calibri,"Trebuchet MS",serif;
text-shadow: 2px 2px 1px maroon;
background-color: rgba(0,0,0,0.6);
margin-top:40px;
}
h3{ background-color: rgba(0,0,0, 0.6);
font-family: Calibri, serif;
color:white;
text-shadow: 2px 2px 0px black;
font-size: 1.7em;}
div.menu {
border: 5px groove rgb(39,22,117);
border-radius: 10px;
background: url("../images/plate2.jpg") no-repeat;
position: fixed;
left: 200px;
right:350px;
bottom: 80px;
top : 180px;
}
#accueil{
position:fixed;
bottom:0;
left:0;
right:0;
}
div.background{
background: url("../images/background3.jpg")fixed;
width:1000px;
height:1950px;
margin:50px;
margin-bottom:0;
padding:30px 20px;
background-color:#ffffff;
border:3px solid black;
opacity:1;
}
ul li {
padding:10px;
background-color: rgba(0,0,0, 0.6);
color: white;
font-family:Calibri, serif;
font-size: 1em;
border-bottom: 2px;
line-height: 1.7em;
text-align: left;
margin: 0.5em 0 0 0;
}
div.contact{
background: url("../images/resto.jpg") no-repeat;
margin : 100px 10px;
margin-bottom: 20px;
padding: 10px 10px;
height: 400px;
color:white;
text-shadow:2px 2px 1px black;
}
div#fond{
margin-right:170px;
}
form{
margin-right:100px;
}
textarea{
width: 335px;
height: 100px;
}
nav {
border: 1px solid rgba(13,19,69,0.8);
border-radius:10px;
background-color: rgba(13,19,69,0.8);
vertical-align: top;
padding-right:25px;
position: fixed;
padding-top: 175px;
right: 0px;
top: 0px;
bottom:0px;
}
nav ul li{
background-color:rgba(0,0,0,0);
font-size: 1.2em;
font-family:Calibri, serif;
}
a:visited{
color: white;
text-shadow: 2px 2px 1px maroon;
}
a:hover{
color: blue;
text-decoration: underline;
}
a{
color: white;
text-shadow: 2px 2px 1px black;
}
footer{position:relative; bottom:0;width:90%;overflow: hidden;}
footer p{
border-top: 2px solid rgba(13,19,69,0.8);
border-radius:2px;
position:relative;
bottom:0;
font-size:1em;
font-family:"Lucida Sans Typewriter", serif;
background-color: rgba(13,19,69,0.9);
text-shadow:0 0 0 white;
color: white;
overflow: hidden;
}
