18041 sujets

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

Besoin d'aide pour un simple background ajustable..

Pages :
Bonjour

Je cherche désespérément un moyen de modifié cette lignes de code..
j ai crée une image 1920x1080,que je souhaite mettre en background..jusque la simple..
et écris ainsi : <body background="fond.jpg">
je la voie mais elle et a 100% si je clic sur la fenetre pour reduire la taille de fenetre,l image reste et devient hors cadre..

maintenant je voudrais ajouté a cette commande la possibilité que mon image de fond s ajuste a tout types d écran ou de résolution..bien sur pour du plus petit..donc que si sur mon portable je suis sur la page ce fond s ajuste a ma résolution plus petite..et non que je perde une grande partie de l image a droite en en bas..et qu elle ne soit plus centré..

donc un background qui soit 100 % centré et qui s ajuste a la fenêtre....

svp help
Je ne suis pas sur que l'affichage ( + temps de chargement ) d'une image aussi importante soit si utile au design de ton site.

regarde un coup du côté des CSS.
Merci pour cette remarque que je trouve hors sujet..

si cette image peserait 1 ou 20 mo je comprendrais ton avis,mais celle ci a était retravaillé sur photoshop afin qu'elle pèse moins de 0.3 mo...et pour ouvrir cette page je prend moins 1 secondes a l affiché et sur mobile en 2 secondes elle et ouverte..
et pour info une image hd en 1024x600 de 4 a 6 mo mettras plus de temps que la mienne en 1920x1080 allégé telle que je l ai fait ..

donc un avis plus pertinent sur le problème de mon code me serait favorable..

je suis novice et j apprend l ecriture html css donc svp partagé vos connaissance..
je voudrais juste savoir quoi rajouté a <body background="fond.jpg">
pour que mon image se size auto au navigateur et tjr centré..

merci de vos retour..
Bonjour,

Il n'y a aucun code CSS ou HTML que tu puisse ajouter à ce code pour rendre l'image extensible (c'est moyennement possible de base en fait). Il y a des bidouilles qui permettent de faire ce que tu veux, mais elles ont des inconvénients (code illogique, accessibilité).

Par contre, je suis du même avis que masseuro concernant ton image, 300ko pour une image de fond c'est énorme...
bon je crois que je me suis mal exprimé,l image et déjà assez grande..mais je voudrais qu elle s ajuste a un écran 1024x600 ou 1200x 768 etc..

donc y a t il un moyen de faire ceci?
sur mon wordpress je n ai eu aucun mal a insérer mon background en centré et a 100% que je redimm ma fenêtre ou pas ,le background resté au centre et bien sur tout types d ecrans..


donc je reviens vers cette histoires de poids de pages..certes c'est pas un background en texture qui pèse 20ko,mais c'est pour une pages perso qui sert a réveillé mon serveur depuis le web..donc seulement 5-10 personne connaissent l adresse et le mdp de celle ci..mais je compte gardé le design de cette page qui et unique .et vraiment superbe belle réa donc je ne changerais pas l image de fond..elle doit pouvoir être adaptable... et je pense ceci sans erreur ou defaut de code..

voila le code entier de la page :merci de me dire qu'elle modif entreprendre pour obtenir se dont je parle plus haut..

<html>
<title>Réveil de mon Home Server</title>
<meta http-equiv="refresh" content="60; url=https://XXXXXX.homeserver.com/Remote/logon.aspx?ReturnUrl=%2fremote%2fDefault.aspx" />
<body background="fond.jpg">
<?php
class Wol{
private $nic;
public function wake($mac){
// Remplacer votre_nom_de_domaine.homeserver.com (sans https://) par l'adresse de votre serveur à allumer et remplacer le port 7 selon votre configuration
$this->nic = fsockopen("udp://XXXXXX.homeserver.com", 7);
if( !$this->nic ){
fclose($this->nic);
return false;
}
else{
fwrite($this->nic, $this->pacquet($mac));
fclose($this->nic);
return true;
}
}

private function pacquet($Mac){
$packet = "";
for($i = 0; $i < 6; $i++){$packet .= chr(0xFF);}
for ($j = 0; $j < 16; $j++){
for($i = 0; $i < 12; $i=$i + 2){$packet .= chr(hexdec(substr($Mac, $i, 2)));}
}
return $packet;
}
}
$wol = new Wol();
// Remplacer 001122334455 par l'adresse MAC du serveur à allumer
$wol->wake('001122334455');
?>
<br><br>
<center>
<table>
<tr><td>&nbsp;</td>
<td width="20" align="left" valign="top">&nbsp;</td>
<td align="left" valign="top">
<table>
<tr><td width="140" height="120" align="center" valign="top">
<img src="serveur.png" align="top">
</td>
<td>
&nbsp;&nbsp;&nbsp;&nbsp;
</td>
<td align="left" valign="top">
<font face="Tahoma" size=2 color=white>
Nom du PC : <strong>HomeServer</strong><br>
Description : <strong>Windows Home Server</strong> <br>
<br>
Action en cours : <strong>R&eacute;veil du serveur</strong><br>
<br>
</font></td>
</tr>
</table>
<div align="center">
<p>&nbsp;</p>
<p><font face="Tahoma" size=2 color=white><strong> Dans 1 minute vous serez sur la page web du serveur</strong></font><br>
<br>
<br>
</p>
</div></td>
</tr></table>
</center>

</html>

sur mon wordpress je vien de ragardé et j ai ceci dans mon body qui permet se dont je voudrais en html :

body
{
margin: 0 auto;
padding: 0;
background-color: #E0E0E0;
background-image: url('images/Page-BgTexture.jpg');
background-repeat: no-repeat;
background-attachment: scroll;
background-position: top full;
}

help Smiley decu
Eh bien pourquoi tu n'essaye pas de mettre la même chose sur ton autre site si ce code fait ce que tu souhaites sur wordpress ?

Donc au lieu de faire :
<body background="blabla">

Si tu tiens tant à insérer ce code dans le html (bien que ce soit du code css) tu mets :
<body style="
margin: 0 auto; 
padding: 0;
background-color: #E0E0E0;
background-image: url('images/Page-BgTexture.jpg');
background-repeat: no-repeat;
background-attachment: scroll;
background-position: top full;">


Etant évident qu'une feuille de style css ou du moins une balise style dans le head de ta page serait plus appropriée.

En espérant que ça marche !
A+
merci de ta réponse.. enfin une idée a mon problème..

je viens de testé en remplaçant : <body background="blabla">

par
<body style="
margin: 0 auto;
padding: 0;
background-color: #E0E0E0;
background-image: url('images/Page-BgTexture.jpg');
background-repeat: no-repeat;
background-attachment: scroll;
background-position: top full;">

et j'ai donc remplacé ('images/Page-BgTexture.jpg'); par ('le dossier de l'image/fond.jpg)

et désormais l'image n'est plus visible..
j'ai tenté de remplacé ('le dossier de l'image/fond.jpg) par (fond.jpg) directement et la j ai des erreurs du php qui s affiche sur la page donc revenue en arrière ..

maintenant comment faire pour que ce code récupère bien l image et la place ..?
une fois ceci reussie j arriverais a faire se dont je souhaité car j ai reussi sur mon wp a aligné parfaitement le fond comme je voulais..

merci de m'aidé pour cette dernière choses..
j'ai réussi a l insérer,mais il me manque le bas de page ,rien na faire pour que sa rentre sur tout le navigateur..je pense qu il manque du code pour que l image soit a 100% dans la fenêtre..
bizarre j'ai testé de nombreuse modif pour essaye de l avoir entière mais rien n y fait..

déjà vraiment content de l avoir centré comme je voulais merci a toi pour ton code qui marche..
mnt plus que le bas de l image qui et hors cadre..

background-position: top center;">

voila le code que j ai utilisé pour centré la pics sur ma page..

merci de m aiguillé pour la suite ..

et encore mille millier de merci pour le premier code qui a marché a merveille..
et si je me mets en scroll l image reste figé,pas de scroll en place sur la page ?ca devrait etre le cas pourtant..

<html>
<title>Réveil de mon Home Server</title>
<body style="
margin: 0 auto;
padding: 0;
background-color: #E0E0E0;
background-image: url('fond.jpg');
background-repeat: no-repeat;
background-attachment: scroll;
background-position: top center;">

Smiley confus
oliviadox a écrit :
Eh bien pourquoi tu n'essaye pas de mettre la même chose sur ton autre site si ce code fait ce que tu souhaites sur wordpress ?

Donc au lieu de faire :
&lt;body background=&quot;blabla&quot;&gt;

Si tu tiens tant à insérer ce code dans le html (bien que ce soit du code css) tu mets :
&lt;body style=&quot;
margin: 0 auto; 
padding: 0;
background-color: #E0E0E0;
background-image: url('images/Page-BgTexture.jpg');
background-repeat: no-repeat;
background-attachment: scroll;
background-position: top full;&quot;&gt;


Etant évident qu'une feuille de style css ou du moins une balise style dans le head de ta page serait plus appropriée.

En espérant que ça marche !
A+



peut tu m en dire plus sur l insertion d'une balise div? ? est ce possible sur mon doc?
Car apres avoir testé le nouveaux code,il marche tres bine pour centré mon image ,mais il ne prend pas en compte sa taille sur un ecran 15 pouces l image et au millieu mais détouré sur tout les cotés.. et moi j aurais aimé que cette image soit a 100 % das tout types d ecran ..
Si tu mets l'image en fond via des css elle ne sera pas redimensionnée.
Il faudrait que tu mettes cette image directement dans le code source html.
Je vais te donner une façon de faire tout en ne la recommandant pas forcément mais bon tu as l'air d'y tenir.

Alors dans le html (ou template php) tu vas rajouter ça aux endroits précisés (et pas ailleurs !!) :


<head>
...
<!--ICI juste avant la fermeture de head tu rajoutes ça-->
<style>
<!--
.maGrandeImage{
	width:100%;
	height:100%;
	position:absolute;
	top:0;
	text-align:center;
	z-index:1;
}
#monConteneur{
	position:relative;
	z-index:2;
}
-->
</style>
<!--fin du rajout de CSS-->

</head><!-- = fermeture de head-->

<body>
<!--rajoute les 2 ligne ci-dessous juste en dessous de body-->
<img class="maGrandeImage" src="image/mon_image.jpg" alt=""/>
<div id="monConteneur">
...
<!-- ICI le contenu de ton site normal-->
...
</div><!--Et tu rajoute ça juste avant la fermeture de body-->
</body>


Et en théorie ça devrait marcher. Pense à ajuster le chemin de l'image par rapport à ta page html ou php (si la page html est dans un dossier www et que l'image qui s'appelle mon_image.jpg est dans un dossier image qui se trouve dans le dossier www tu changes rien).

Un dernier conseil, si faire des petits sites t'intéresse tu devrais apprendre au moins les bases de html et css ça pourrait t'aider Smiley cligne
++
J'avais pas vu ton code tout pourri qui n'a ni head ni body, hum.. Je reprend donc...

Rajoute la balise head (première ligne) juste en dessous de la balise html du début :
<html>
<head><!--ICI-->
<title>Réveil de mon Home Server</title>
...

Puis rajoute tout ça à la place de ta ligne <body background=".."> :
<!--ICI juste avant la fermeture de head tu rajoutes ça--> 
<style> 
<!-- 
.maGrandeImage{ 
    width:100%; 
    height:100%; 
    position:absolute; 
    top:0; 
    text-align:center; 
    z-index:1; 
} 
#monConteneur{ 
    position:relative; 
    z-index:2; 
} 
--> 
</style> 
<!--fin du rajout de CSS--> 
 
</head><!-- = fermeture de head--> 
 
<body> 
<!--rajoute les 2 ligne ci-dessous juste en dessous de body--> 
<img class="maGrandeImage" src="image/mon_image.jpg" alt=""/> 
<div id="monConteneur">


Et enfin rajoute ça juste avant la balise </html> (avant dernière ligne) :
</div><!--Et tu rajoute ça juste avant la fermeture de body--> 
</body>
oliviadox a écrit :
J'avais pas vu ton code tout pourri qui n'a ni head ni body, hum.. Je reprend donc...


Désolé pour le code,mais sache qu'il a était écris il y a 5-7 ans et fait par un amateur de code..

et sachant que cette page et personnel et voir privé,je trouve logiques qu'il n y et pas de head body pour ce genre de page perso privé..on va quand même pas encore y mettre des mots clés pour que cet page soit référencé??vu qu elle ne sert qu'a réveillé un serveur ou un pc depuis le web,bref,désolé que ce ne soit pas parfait comme codes mais on se débrouille comme on peu..

donc je viens de testé tes modif et ceci fonctionne bien,exactement se dont je voulais faire..
mais il se trouve que l image soit légèrement décalés et il reste un trait blanc en bas et a gauche ..pourtant l image fait 1920x1080 donc elle peut largement remplir le navigateur ..

y a t il une solution a ces bande blanche??
voila un petit lien de la page en question que tu puisse voire de se dont je parle..
http://rvbob67.free.fr/testwol/
Il y a 5-7 ans les standard de l'HTML4.1 étaient déjà définis, donc l'age de la page n'a rien à voir avec le fait qu'elle soit mal codée.

Le référencement d'une page n'a rien à voir avec le head du code et encore moins avec les "mots clés" qui pourraient y être placés.

Par contre un code incorrect peut être la cause de nombreux bugs...



ps. : on est pourtant pas vendredi...
et bien oui peut être mais vous vous y connaissez,donc soyez indulgent avec ceux qui débutent et se script je l'ai repris d'un suisse qui l a écris il y a 5 bonnes années,depuis tout le monde c'est contenté de s'en servir tel quel,et je comptais le remettre au gout du jour,avec la participation de gens qui s'y connaissent..c'est bien pour sa que je suis venue ici demandé!..

donc je ne comprend pas vos remarques si ce n'est pas pour apporté votre aide..

je suis content de l'aide de oliviadox qui ma permis d'avancé dans mon idée..

Donc et il possible de réécrire cette page afin qu'elle respecte tout les standards wc3.?.

je sais que pour vous cette page et peut etre imparfaite etc mais moi je debutent et je compte bien progressé et apprendre les bases pour faire de belle page ..mais paris ne s'est pas construit en un jour..


donc pouvez vous m aidez ici a reprendre cette page en vue de la rendre standart et avec les fonctions de page ajustable sur tout types d affichages..
oui ou non?

et merci encore a ceux qui mon déjà aidé ..
et pour en reprendre avec mon problème ,le défaut de l image qui me laisse un trait blanc serait a cause de l'écriture qui n'est pas parfaite?

j'ai tenté plusieurs modif encore et l image me laisse un trait a gauche et a droite blanc qui ne se masque pas ,en bas idem mais c et encore plus grand..donc fraudais t il que je recommence tout le doc sur un modèle vierge et la seras t il possible de parvenir a mais fin.?..

merci de vos conseils sur le sujet ..
me revoilà après avoir voulue rendre ce doc standard j ai repris un modèle vierge auquel j y et ajouté ce qu'il me fallait..
et miracle grâce a se nouveaux doc de type php sur dreamweaver et après avoir repris tout le fichier j en suis a sa et cela a corrigé mon problème de bande blanche..


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="refresh" content="30; url=https://lifestylefrance.homeserver.com/Remote/logon.aspx?ReturnUrl=%2fremote%2fDefault.aspx" />
<title>Réveil de mon home server</title>
<style>      
.maGrandeImage{
	width:100%;
	height:100%;
	position:absolute;
	text-align:center;
	z-index:1;
	top: 0px;
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
	left: 0px;
	right: 0px;
	bottom: 0px;
}  
#monConteneur{  
    position:relative;  
    z-index:2;  
}  
-->  
</style>  
<!--fin du rajout de CSS-->  
</head><!-- = fermeture de head-->  
<body>  
<!--rajoute les 2 ligne ci-dessous juste en dessous de body-->  
<img src="fond.jpg" alt="" width="100%" class="maGrandeImage"/>  
<div id="monConteneur">
<center>
<p>&nbsp;</p>
<table height="355">
<tr><td>&nbsp;</td>
<td width="20" align="left" valign="top">&nbsp;</td>
<td align="left" valign="top">
<table>
<tr><td width="140" height="120" align="center" valign="top">
<img src="serveur.png" width="140" height="150" align="top">
</td>
<td>
&nbsp;&nbsp;&nbsp;&nbsp;
</td>
<td align="left" valign="top">	
<font face="Tahoma" size=2 color=white>
Nom du PC : <strong>Serveur</strong><br>
Description : <strong>Windows Home Server</strong> <br>
<br>
<br>
<br>
<table><tr><td width="55" height="107"><font face="Tahoma" size=2 color=white>Action : </font></td><td width="218">&nbsp;&nbsp;<b><font color="a0bdea"><a href="wake.php"><img src="bouton1.png" alt="Réveiller mon Home Server" border=0></a></font></b> &nbsp;&nbsp;</td>
</tr></table>
	
</font></td>
</tr>
</table>
<br>
  <br>
</tr></table>
</center>
</div><!--Et tu rajoute ça juste avant la fermeture de body-->  
</body>
</html>


et encore merci a vous de votre aide..
et til possible de demandé au #monConteneur de se centré lui aussi avec tout se qui s y trouve dedans..?
rajoute une largeur au conteneur et un margin automatique :
(à rajouter dans la balise de style)

#monConteneur{
width:960px;
margin:0 auto;
...
}


Pour ton code avoir rajouter un doctype et les balises minimum doit aider à la bonne interprétation du code ça c'est sur. Par contre il faudrait dans l'idéal mettre le reste à l'avenant.

Renseigne toi sur le code html et css et avec un peu de pratique tu devrais comprendre ce que tu fais et comment ça marche et pouvoir faire des jolis sites respectueux des standards. Pour débuter il y a un bon tutoriel sur le Site du zéro puis ensuite tu reviens sur Alsacréations et tu pioches dans tout les articles pour parfaire ta pratique.

Enfin sache que head et body n'ont rien à voir avec le fait que le site soit "privé" ou perso, c'est juste une façon d'écrire. Comme quand tu écris un mail tu mets un objet même si c'est un mail perso que je sache et bien là c'est exactement la même chose.
Bon courage pour la suite.
un grand merci a toi oliviadox,j'ai suivie ton conseil et suis allé sur le site du zero..et vraiment il et super se site il y a toutes les balises html css,et bien expliqué et tt..

vraiment merci encore pour ton aide qui m a etait tres précieuse..

je vais apprendre ces fameuse balises qui permettent tant de chose..meme si je mets une années a bien retenir se dont j ai besoin mais je vais m y mettre a fond sur se site qui et un incontournable pour les debutant tel que moi..

je suis heureux d avoir pu réalisé mon idée tel que je la souahité,meme si le montage qui a etait fait n'est pas a recommandé et j ai compris pourquoi mais cela correspond a se dont je voulais ..

bonne continuation a toi et au forum de alsacréation ..
Pages :
Sujet clos
Aller à