Redimensionner fond selon résolution

Fermé
makao - 13 févr. 2008 à 14:14
 André - 8 mars 2012 à 21:33
Bonjour,

déjà, je dois préciser que je suis vraiment mais alors vraiment novice en HTML CSS etc etc... pour moi, c'est très très compliquée, d'autant que ca fait just 2 jours que j'ai mis le nez dedans, alors j'espère que vous serez indulgents!!!

Je viens de créer un page myspace, pour faire un peu de promo, j'ai récupéré à droite à gauche quelques lignes codes pour faire mon fond, et j'ai juste changé l'adresse pour le background.

J'ai réalisé mon fond selon mon écran principal (1680*1050), donc forcément sur mon écran à moi c'est niquel, mais (re)reforcément, sur une autre résolution ca merdouille!

j'ai fouillé sur le ent avant de venir poster mais impossible de trouver ma solution, j'ai pourtant essayer avec wigth:100%, mais rien n'y fait.
Est-ce que c'est à cause de la plateforme myspace?
De plus je me demande si le fait d'avoir une image uploader sur site (imageshack) au lieu du FTP classique de site, ca ne jouerais pas...

voilà mon code, HELP!

<style type="text/css">
body {background-color:; background-image:url(http://imageshack-france.com/out.php/i10315_fond2.jpg); background-position:Top Center; background-attachment:fixed; background-repeat:repeat-y;
width:100%;}

table table table td.text table table div img {visibility:visible;}
table table table td.text table table div { background-image:none;}
div table tbody tr td a, div table tbody tr td input, div table tbody tr td font {visibility: hidden}

div table tbody, div table tbody td {background-color: !important;}

div div table table tr td {background-color:transparent !important;}

div div table {postion: absolute; top: 1px; text-align: center;}

div table tbody tr td a.navbar, div table tbody tr td form input,
div table tbody tr td a img, div table tbody tr td div a {visibility: visible !important; display: inline !important;}

table tbody td table tbody tr td.text table table, table tbody td table tbody tr td.text table
table tbody td.text {visibility: visible;}
table, td {padding: none !important;}
body {background-color:transparent}
body table {background-color:transparent}
body table td {background-color: transparent;}
body table table {background-color: !imporant}
table tbody table tbody td, table tbody table tbody table {border: none;}
table tbody table tbody table table {background-color: !important; border: none; padding: none;}
table tbody table tbody table table td {background-color:; padding: 2px;}
table tbody table tbody table table td.text {background-color: transparent !important;}
table tbody td table tbody tr td.text table td.text table {border: none;}
table tbody td table tbody tr td.text table td.text {background-color: !important; border: none;}
table tbody td table tbody tr td.text table table {border: none;}
table table table table table {background-color: transparent;}
body {text-align: center !important;} .blacktext12 {visibility: hidden}

.orangetext15, .lightbluetext8, .whitetext12, .nametext, .btext, .redtext, .redbtext{color:748471;font-size:16px;font-weight:bold;text-decoration:none;font-style:normal;font-family:trebuchet ms,Verdana,arial,verdana,sans-serif;}
.redbtext.shadowed { filter: shadow( color=blue, direction=135 ); }
body, div, p, strong, td, .text, .blacktext10, .blacktext12, a.searchlinkSmall, a.searchlinkSmall:link, a.searchlinkSmall:visited{color:9DA793;font-size:8pt;font-weight:normal;text-decoration:none;font-weight:normal;font-style:normal;font-family:trebuchet ms,Verdana,arial,verdana,sans-serif;}
a, a:link, a:visited, a.navbar, a.navbar:link, a.navbar:visited, a.man, a.man:link, a.man:visited{color:748471;font-size:8pt;font-weight:bold;text-decoration:none;font-style:normal;font-family:trebuchet ms,Verdana,arial,verdana,sans-serif;}
a:hover, a:active, a.navbar:hover, a.navbar:active, a.man:hover, a.man:active, a.searchlinkSmall:hover, a.searchlinkSmall:active{color:9DA793;font-size:8pt;font-weight:bold;text-decoration:underline ;font-style:normal;font-family:trebuchet ms,Verdana,arial,verdana,sans-serif;}

td.text td.text table table td img {width:260px; max-width:260px; width:auto;}
td.text td.text table table td a img {width:90px; max-width:260px; width:auto;}
td.text td.text table table td div img {width:80px;}
html td.text td.text table table td img {width:260px;}
html td.text td.text table table td a img {width:90px;}
html td.text td.text table table td div img {width:80px;}

table table table td {vertical-align:top ! important;}
span.blacktext12 {
visibility:visible !important;
background-color:transparent;
background-image:url("");
background-repeat:no-repeat;
background-position:center center;
font-size:0px; letter-spacing:-0.5px;
width:435px; height:75px; display:block !important;
border:1px;
border-color:ffffff; }
span.blacktext12 img {display:none;
border-width:1;
border-color:ffffff;
}
.img {
border-width:1;
border-color:ffffff;
}
</style>

Merci beaucoup beaucoup beaucoup d'avance!

10 réponses

Enax Messages postés 203 Date d'inscription lundi 11 février 2008 Statut Membre Dernière intervention 16 mars 2010 145
13 févr. 2008 à 17:35
Il n'existe pas de propriété CSS permettant de la faire directement à ma connaissance. Mais en magouillant un peu, cela reste possible.

A noter que l'image sera adaptée à la résolution, et par conséquent déformée. Il faut donc garder un format d'image proche de celui d'un écran.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
	<head>
		<title></title>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
		<style type="text/css">
			html, html *
			{
				position:relative;
			}
			
			.img_fond
			{
				position: fixed;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
			}
		</style>
	</head>
	
	<body style="margin: 0;">
		<div class="img_fond"><img class="img_fond" src="test.jpg" alt="background"/></div>
		<div>
			<!-- Mette la page ici //-->
		</div>
	</body>
</html>
8
oups...
Ben je voudrais que mon image du fond s'adapte selon les diverses résolutions d'écran (qu'elle ne soit ni tronquée pou une résolution plus basse, ni en mosaïque pour une réolution plus forte)
0
donc ca je le colle ou? avant tout le reste?
0
très sincèrement je nage... c'est à dire qu'en dessous de <style type="text/css">
je colle l'intégralité du code que tu m'as fourni?
je laisse tout le reste identique (ma ligne de code déjà existant concernant mon fond par exemple)
qu'est-ce que je met à la place de "mettre la page ici"?
(j'ai hont...désolée d'être si nulle...)
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Enax Messages postés 203 Date d'inscription lundi 11 février 2008 Statut Membre Dernière intervention 16 mars 2010 145
14 févr. 2008 à 15:35
Tu n'arriveras à rien si tu ne connais pas un minimum le sujet. C'est comme si tu essayais d'expliquer la résolution de "x + 3 = 0" à un gamin qui n'a encore jamais vu les additions.

Je te conseille de lire des tutos sur HTML / CSS. Celui là est très bon : https://openclassrooms.com/fr/courses
Je te rassure, les bases du HTML et du CSS sont très simples et rapides à acquérir.
0
x + 3 = 0
x= -3
0
BRAVO maths ,le gamin a compris XD
0
dès que je peux m'y mettre je le fais, je te promet (vraiment)
je ne voudrais vraiment vraiment pas abuser de ta gentillesse, mais est-ce qu'éventuellement tu ne pourrais pas me mettre les lignes de codes à renter telles quelles (j'essaye et si ca marche pas, je te fais plus chier)?
parce que myspace et autres blog, c'est pour ma promo, moi, mon domaine c'est le dessin et la peinture (assez éloigné, la mine de plomb je maitrise, mais le langage HTML, c'est limite si ca me donne pas de l'urticaire)
le but c'était de me faire une plateforme, jolie, parce que forcément quand on essaye de promouvoir un travail artistique, on se doit de présenter quelque chose d'attrayant, je vend pas des WC quoi, mais sans me prendre trop la tête, en attendant de trouver quelqu'un qui veuille bien me faire un site (contre une bonne bouf), vu que je suis étudiante, pas beaucoup les moyens d'investir la dedans et surtout du temps relativement compté, puisque cette année je navigue entre 3 job, une prépa concours et mon mémoire, c'est pour te dire!
bref, j'essaye pas de t'apitoyer, sinon j'aurais balancé ça dès le début, juste que tu comprenne un peu mieux pourquoi je rame autant et pourquoi je cherche un peu des solutions faciles...
(s'il te plait, snif snif snif)
en tout cas, si c'est pas possible, merc quand même pour tes autres message, et de m'avoir accordé un peu de ton temps!
0
Un exemple et la méthode à utiliser figurent à cette adresse :

http://modifier-les-modeles-de-blogger.blogspot.com/2012/03/image-de-fond-correspondant-la.html
0
Enax Messages postés 203 Date d'inscription lundi 11 février 2008 Statut Membre Dernière intervention 16 mars 2010 145
13 févr. 2008 à 14:22
Bonjour,

Tout ça est très bien, mais tu ne nous dis pas où est le problème. :p
-1
Enax Messages postés 203 Date d'inscription lundi 11 février 2008 Statut Membre Dernière intervention 16 mars 2010 145
14 févr. 2008 à 13:22
En temps normal, tu pourrais mettre ton CSS dans une feuille de style à part ou entre les balises <style type="text/css"></style> et le code html de ta page dans le deuxième div.

Je ne sais pas comment ça se passe avec myspace. Là, c'est à toi de voir.
-1
Enax Messages postés 203 Date d'inscription lundi 11 février 2008 Statut Membre Dernière intervention 16 mars 2010 145
15 févr. 2008 à 13:31
Le problème, c'est qu'il n'existe pas de solution ultime. Il a des "principes" qu'il faut ensuite adapter à son propre site. Comme j'ai dit, je ne sais pas comment fonctionne myspace, mais je suppose qu'on n'est pas entièrement libre et qu'on ne peut pas moduler à sa convenance (mais peut-être que je me trompe).
Enfin, je vais quand même tâcher de t'expliquer succinctement comment utiliser le code que j'ai donné plus haut.

Le HTML est un langage de structuration, c'est-à-dire qu'il sert uniquement à organiser le contenu d'une page web. C'est le CSS qui s'occupe de toute la partie présentation. Le code que tu as mis dans ton premier message est du CSS. Pour savoir où le mettre, lis simplement la partie "Où mettre du CSS ?" de cette page :
https://openclassrooms.com/fr/courses#ss_part_1
(A priori, toi tu auras à l'écrire dans le header.)

Le contenu de ta page mettre (du code HTML, donc) est à mettre à la place de <!-- Mette la page ici //--> dans le code ci-dessus.

Voilà, j'espère que ça ira. Sinon, bah mets tout simplement en background un motif qui peut se répéter. :p
-1
Bonjour Enax, merci pour votre "tuto" !

J'ai réussi a le faire marcher, mais l'image ne reste pas en background d'une sorte que je puisse mettre le texte du site sur elle... le résultat que j'ai eu est une image dimensionné a la taille de la fenêtre et le reste du site après cette photo, comme si c'était une bannière...

Est-ce qu'il y a une façon de le faire vraiment en "fond de page" ?

Merci
0