18041 sujets

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

Besoin d'aide pour un site internet

Bonjour, je suis un grand débutant en css/html et je me casse la tête depuis des jours à trouver des idées originales pour mon site internet.
J'ai envie de créer un site style "moderne" mais je ne sais pas comment faire.
Par exemple, chose qui peut sembler simple :
http://bazingalightroompresets.com/
Vous voyez l'image en pleins milieu ? Comment je peux intégrer la même chose sur mon site ? Un image fixe en pleins milieu de l'écran qui prend les dimensions etc, un vrai casse tête à trouver sur le net !
merci de vos réponses
Administrateur
Bonjour et bienvenue,

Si tu cherches quelque chose comme ça, c'était assez facile à trouver parmi les tutoriels en cherchant "arrière-plan" ou "background" sur alsacreations.com

Bonne chance Smiley smile
Modifié par Raphael (04 Dec 2014 - 12:28)
Merci pour ton aide, mais ce n'est pas ce que je cherche, je ne veux pas que mon image prenne toute la page ^^
Juste une partie
vmoulinier a écrit :
Juste une partie

Bonjour, je m'immice dans la conversation mais t'es pas obligé d'appliquer un backgroudn à une page complète. Le site que tu cite (le site que tu cite le cite que tu site le sit que tu site, pfiuu je fatigue !) utilise un DIV qui est dimensionné (x,y) et qui utilise une image de fond uniquement sur ce div.

A titre d'exemple :
<BODY><DIV></DIV></BODY>
BODY {WIDTH:100%;HEIGHT:100%;}
DIV {WIDTH:250PX;HEIGHT:250PX;BACKGROUND:URL('mon-image') NO-REPEAT CENTER;}

affichera un body grand comme la fenêtre avec dedans un div de 250px² ayant en image de fond 'mon-image'.

Entendies ?

Un exemple sur CodePen.io
Modifié par Greg_Lumiere (04 Dec 2014 - 15:28)
En effet y'a du progrès, merci !
Maintenant que j'ai réussi a ajouter cette image par dessus mon background, y a t'il un moyen de l'étirer aux 2 coins de l'écran ?
vmoulinier a écrit :
Maintenant que j'ai réussi a ajouter cette image par dessus mon background, y a t'il un moyen de l'étirer aux 2 coins de l'écran ?


"Vous pouvez répéter la question ?"
"Stéphanie De Monaco !"

Que veux-tu dire par "2 coins de l'écran" ? Tu parles de la largeur de la fenêtre ? Si c'est le cas, il suffit de dimensionner ta DIV en WIDTH=100% (soit largeur égale 100% de large du conteneur soit le body pour reprendre l'exemple précédent.
Olala je suis un vrai cancre ! Je te remercie vraiment pour ton aide pour le coup !!

EDIT : Voilà le résultât en 100%

http://puu.sh/dgJhk/00d0ea77d3.jpg

et mon css :

body {
background:url(img/bordeaux.jpg) no-repeat fixed center center;
background-size: cover;
}

div {
WIDTH:100%;
HEIGHT:250PX;
BACKGROUND:URL('img/galerie/bordeaux1.jpeg') NO-REPEAT CENTER;
}

Quand je parle au deux coins de l'écran j'espère plus un résultat dans ce sens la : http://puu.sh/dgJt6/1c8beeb935.jpg
Modifié par vmoulinier (04 Dec 2014 - 15:57)
Si le width à 100% ne suffit il faut se tourner vers le Css notamment les émargements avec Margin et Padding.

Pourrais-tu fournir plus de Css stp, ta Div bénéficie peut-être d'un héritage de propriété ?
Je travail sur un fichier html et css de test, je n'ai que peux d'informations dans mes fichiers, mais voici mon code html :
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
	<head>
		<title>Bordeaux</title>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

		<!-- Cascading Style Sheets -->
		<link href="page.css" rel="stylesheet" type="text/css" />
		<link href="style.css" rel="stylesheet" type="text/css" />

		<!-- Javascript -->
		<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
		<script type="text/javascript" src="js/jquery.diaporama.js"></script>
		<script type="text/javascript" src="js/script.js"></script>
	</head>

	<body>
		<center><div id="moncadre">
			<ul class="diaporama">
			<li><img src="img/galerie/bordeaux1.jpeg" alt="Image 1" /></li>
			<li><img src="img/galerie/bordeaux2.jpeg" alt="Image 2" /></li>
			<li><img src="img/galerie/bordeaux3.jpg" alt="Image 3" /></li>
			<li><img src="img/galerie/bordeaux4.jpg" alt="Image 4" /></li>
			<li><img src="img/galerie/bordeaux5.jpg" alt="Image 5" /></li>
			</ul>
		</div></center>
		<br>
		<div></div>
	</body>
</html>

Et le css
body {
background:url('img/bordeaux.jpg') no-repeat fixed center center;
background-size: cover;
}

div {
width:100%;
height:250px;
background:url('img/galerie/bordeaux1.jpeg') no-repeat center;
}


#moncadre {
	position:relative;
	width:1020px;
	height:510px;
	padding-top:10px;
    background:orange;
    border:1px solid #DDD;
    border-radius:5px;
    -webkit-border-radius:5px;
    -moz-border-radius:5px;
    }


.diaporama{
	background-size: cover; 
	width:1000px;
	height:500px;
}

.diaporama li{
	list-style-type:none;
	overflow:hidden;
	position:absolute;
	background-size: cover; 
}

J'ai déjà essayé le margin sans succès ^^
Modifié par vmoulinier (04 Dec 2014 - 20:11)
Si je peux faire des tests demain, j'y jette un oeil mais je peux déjà y voir des choses pas terribles :
* l'utilisation de la balise CENTER dans ton html : cet effet est à faire en Css - on joue sur une marge automatique
* le Break Row aussi n'est pas indispensable

C'est bien #moncadre que tu veux étirer d'un bout à l'autre ?
Et pourquoi #moncadre [Correction, à Div, ce qui revient au même] a une image de fond dans le Css ? Si c'est normal, il faut fixer background-size là aussi mais tu appliques aussi une couleur orange pour #moncadre..



Je ferais un test sur Codepen. L'idéal serait que tu prépares une feuille avec les liens de tes images ça aiderait.

En attendant, bon courage Smiley smile

PS : tu fermes aussi deux Div non ouvertes après ton BR.
PS n°2 : Tu fixes aussi la taille de #moncadre et tu déclares Div à 100%. #moncadre feras la valeur fixée. ni plus, ni moins. Tu devrais travailler en Css sur #moncadre plutôt que sur DIV.
Modifié par Greg_Lumiere (04 Dec 2014 - 20:28)
Ha non, pas du tout c'est ma balise div que je veux étirer d'un bout à l'autre !
Moncadre est juste un élément de décors qui vient se coller derrière mon diaporama d'image
=> http://puu.sh/dh2A4/6e97489bfa.jpg
Voilà ce que ca donne, en haut le diapo avec le cadre orange derrière et en dessous l'image que je cherche à étirer
Ha pardon, je me demandais justement ce qu'elle faisait là.

Par contre je te conseille de lui appliquer une Id ou classe à ta balise Div car quand tu la définie en Css, tu définie TOUTES les Div.

Et non aucun héritage n'est subbit. Ca fonctionne tel quel sauf qu'il faut définir background-size à la balise Div

Je t'ai fais l'exemple suivant sur CodePen et l'image s'étire bien d'un bout à l'autre. (j'en ai profité pour faire quelques retouches...)
Modifié par Greg_Lumiere (05 Dec 2014 - 08:37)
Tout d'abord, merci encore de ton aide, j’apprécie vraiment ce geste.
J'ai réussi plus ou moins à résoudre mon problème en me "perdant" sur le web et j'ai finalement pu obtenir le résultat suivant !

http://monsitehtml.lescigales.org/

Nouvelle petite question : L'image en fond par défaut est bien cadré sur mon PC : http://puu.sh/dhNBn/41d8fd1a1d.jpg

Ceci dit, sur d'autres PC elle peut dépasser ou ne pas toucher le bas de la page.

J'utilise le CSS suivant : 

footer
{
 
    width:auto;
 
    height:630px;
 
    background:url(http://i0.wp.com/bazingalightroompresets.com/wp-content/uploads/2014/04/Japan-2014-400.jpg?resize=1500%2C1000)  no-repeat fixed center;
 
    background-size: cover; 
}


Une idée pour que par défaut, elle prenne la totalité de la page sur laquelle on arrive ? mais que le scroll la fasse "disparaître" quand même ?

Comme ceci : http://puu.sh/dhNI3/b0293a09c3.jpg
Avec : 
height:auto ou 100%

j'obtient un résultat médiocre : http://puu.sh/dhO3R/e76c04612a.jpg
J'espère m'être fais compris, merci de vos futures réponses Smiley ravi
PS: Faites bien attention à ma barre de scroll sur le coté dans mes screens si vous ne comprenez pas tout !
Modifié par vmoulinier (05 Dec 2014 - 09:34)
Sujet clos
Aller à