18041 sujets

Questions générales et questions de débutants

Image qui ne se fixe pas en O; O;

Bonsoir, actuellement en plein travail sur mon portfolio j'ai décidé de mettre une image dans une div pour faire l'effet paralax, le problème c'est que l'image ne se met pas en haut à gauche. Un grand espace blanc est donc visible. Pourtant dans mon html j'ai mis un reset margin ; 0 et padding : 0 et la div est mise en premier dans le body.
Quelqu'un saurai d'où vient le problème?

Voici un screen de mon problème : http://image.noelshack.com/minis/2016/43/1477416956-sans-titre.png
D'accord, voici une partie du code concerné alors.
HTML :
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title> Mon Portfolio </title>
<link href="style.css" media="screen" rel="stylesheet" type="text/css" />
<link rel="icon" href="" type=""> <!-- A compléter -->
<script type="text/javascript" src="jquery-3.1.1.min.js"></script>
<script type="text/javascript" src="script.js"></script>

</head>

<body>
<div id="background">
<img src="bg2.jpg">
</div>
<div id="Status"></div>

<div id="titre">
<div id="bienvenue">Bienvenue sur le Portfolio de</div><br>
<div id="JH"><h1>JORDAN HURÉ</h1></div>
<div id="fleche"><img src="fleche.png" align="center"></div>
</div>


<nav>
<ul class="menunormal">
<li><a class="target-section1" href="index.html">Accueil</a>
<li><a class="target-section2" href="#section2">A propos</a>
<li><a class="target-section3" href="#section3">Mes compétences</a>
<li><a class="target-section4" href="#section4">Mes créations</a>
</ul>
</nav>

<div id="main">
<section class="section2">
<section class="apropos">
<p>Salut ! ...

CSS :
html,body{
margin: 0px;
padding: 0px;
}

#background img{
max-width: 100%;
height: auto;
position:fixed;
z-index:0;
}


#titre{
margin-left: auto;
margin-right: auto;
width: ...;
position:relative;
text-align:center;
margin-top:40vh;
transform: translateY(-41%);
font-family:'911Fonts.com_CenturyGothicRegular__-_911fonts.com-fonts-mhpY';
z-index:999;
}
Bonjour,

Attention à bien fermer les balises en html.

Ce serait mieux de placer l'image de fond en css:


#background{
      background-image:url('monimage.jpg');
}
Merci allan00958 effectivement cela venait du background-image. Par contre j'ai été obligé de le mettre dans le html, body pour avoir le rendu que je voulais, sinon dans ma div background comme la div est vide l'image ne s'affiche pas.
Je viens de regarder un peu sur internet mais les gens ont généralement des height et width = a des pixels précis alors que moi ce sont un height:auto et un max-width:100%.

Mais merci parce que par le html cela fonctionne quand même.
Tu peux rajouter du padding au div pour créér de l'espace à l'intérieur et de ce fait afficher l'image.
Sujet clos
Aller à