Affichage pour le moins curieux....!

[lmc38510]

Bonjour à vous,

deux bizarreries d'affichage que je soumet ...différent d'un ordi à l'autre...

ci dessus
Sur mon portable Image de fond page 2 photos....? celle de l’extrême droite est la bonne ....(un détail également le corps du Forum n'est pas centré à l'écran ce qui expliquerai ce décalage)

ci dessus
Sur l'ordi Image de fond de l'en-tête 2 photos.....? celles de droite n'est pas la bonne.... (détail le corps du forum est centré sur l'écran....ce qui expliquerai le décalage sur le fond de l'entête....????)

Question donc...?
Pourquoi un affichage différent d'un ordi à l'autre
dans chacun des ces deux cas, quel est le problème pour l'un comme pour l'autre...

Au plaisir de vous lire

[Dr. Karlos]

Bonsoir,

Vos deux problèmes sont reliés à la résolution d'écran des ordinateurs.

Pour l'affichage de l'image de fond de l'en-tête, insérez ce code dans votre CSS (PA | Affichage | Images et couleurs | Couleurs | Feuille de style CSS):

Code:

.headerbar {
background-color: #12A3EB;
background-image: url(http://www.archive-host.com/link/1bfea24ce9acc23ef1c54c888260f551ff248d98.jpg);
background-repeat: no-repeat;
background-size: 100% 100%;
margin-bottom: 4px;
padding: 0 5px;
}

Il empêchera la répétition du fond et l'élargira pour qu'il prenne toute l'en-tête.

Pour votre deuxième problème, je vous invite à lire ce sujet.


Cordialement.

[lmc38510]

Merci "Dr Karlos" ....code CSS appliqué...aucune modif sur l'affichage
Vérification faites sur les 2 ordi....."Sorry"

[Dr. Karlos]

Essayez plutôt avec ce code:

Code:

.headerbar {
background-color: #12A3EB;
background-image: url(http://www.archive-host.com/link/1bfea24ce9acc23ef1c54c888260f551ff248d98.jpg);
background-repeat: no-repeat;
background-size: 100% 100%;
margin-bottom: 4px;
padding: 0 5px;
}

Si ça ne fonctionne pas, pouvez-vous poster votre CSS personnalisé ici?


Cordialement.

[lmc38510]

Je suis donc le "tuto"
https://forum.forumactif.com/t325386-image-de-fond-changeante-selon-la-resolution-du-visiteur
Je vais donc héberger tous les formats précisés, ensuite faire le CSS comme indiqué...puis le 2ème CSS ...pour aligner votre fond au centre de l'écran

Je reçois ton 2ème message.... donc à suivre...!

[lmc38510]

Aucun changement avec 2ème CSS....
Qu'entend tu par CSS personnalisé.... tout ce que j'ai en CSS...?
Pour lesquels je te fais une copie sur ce "post"...?

[Dr. Karlos]

Re,

Avez-vous bien retiré l'ancien CSS. ?

Vous devez copier le contenu se trouvant dans la fenêtre où vous insérez le code CSS que je vous propose.



Cordialement.

[lmc38510]

Je confirme ancien CSS viré....remplacé par le nouveau...
Option sur toutes les pages "coché"

Précision
1er CSS communiqué:
.headerbar {
background-color: #12A3EB;
background-image: url(https://www.archive-host.com/link/1bfea24ce9acc23ef1c54c888260f551ff248d98.jpg);
background-repeat: no-repeat;
background-size: 100% 100%;
margin-bottom: 4px;
padding: 0 5px;
}

2ème CSS :
.headerbar {
background-color: #12A3EB;
background-image: url(https://www.archive-host.com/link/1bfea24ce9acc23ef1c54c888260f551ff248d98.jpg);
background-repeat: no-repeat;
background-size: 100% 100%;
margin-bottom: 4px;
padding: 0 5px;
}

Sauf erreur de ma part sont parfaitement identique....!!!

[Dr. Karlos]

Re,

Il me semblait avoir inséré un "w" de trop à quelque part. Avez-vous d'autres codes CSS présents avec "headerbar"?


Cordialement.

[lmc38510]

Re,

Il me semblait avoir inséré un "w" de trop à quelque part. Avez-vous d'autres codes CSS présents avec "headerbar"?
Cordialement.

Non aucun...

[Dr. Karlos]

Bonsoir,

Essayez avec ce code:

Code:

.headerbar {
background-color: #12A3EB;
background-image: url(http://www.archive-host.com/link/1bfea24ce9acc23ef1c54c888260f551ff248d98.jpg);
background-repeat: repeat-x;
background-size: 100% 100%;
margin-bottom: 4px;
padding: 0 5px;
}

Copiez le code dans l'encadré "CSS".


Cordialement.

[lmc38510]

Merci Dr Karlos .....mais aucun changement...!

suis en train de terminer l'application suite ton tuto....!

[lmc38510]

Je viens doncd'appliquer le "tuto"
https://forum.forumactif.com/t325386-image-de-fond-changeante-selon-la-resolution-du-visiteur

mis en place .....résultat...aucun changement....! mais....

Un détail : quel image faut-il mettre dans affichage-gestion des images-image de fond de page...
compte tenu des CSS appliquées avec le tuto.....?

[Dr. Karlos]

Re,

Normalement, l'image présente dans la gestion des images est celle-ci:
https://2img.net/i/fa/empty.gif

Pouvez-vous coller le code ici que vous avez inséré dans la gestion des codes Javascript? Le changement est difficile à voir puisque votre résolution d'écran n'a pas changé.


Cordialement.

[lmc38510]

Le code complet du CSS

$(function(){

var bg= "https://www.archive-host.com/link/adbcf072718483668a9f1b3c129973767a165340.jpg";

if(screen.width < 801) bg="https://www.archive-host.com/link/e350d92357a8680cdf8cc040e871c4f3f91a1630.jpg";
else if(screen.width < 1025) bg="https://www.archive-host.com/link/a17320851dfb4e6d699a0ec5288855af358d5a67.jpg";
else if(screen.width < 1281) bg="https://www.archive-host.com/link/f5536dbd920942f91cb2b5b85a3a638493587767.jpg";
else if(screen.width < 1601) bg="https://www.archive-host.com/link/251cbf3f9a7597e38b0619d795a8a79445d39de6.jpg";

document.body.style.backgroundImage="url(\""+bg+"\")";

});

[Dr. Karlos]

Bonsoir,

Insérez-vous bien le code CSS (pour l'image d'en-tête) dans votre panneau d'administration comme ceci?
> PA | Affichage | Images et couleurs | Couleurs | Feuille de style CSS


Et votre hébergeur semble faire défaut pour le code Javascript (image changeante), remplacez l'ancien code se trouvant dans votre panneau d'administration comme ceci:
> PA | Modules | Gestion des codes Javascript

Par celui-ci:

Code:

$(function(){

var bg= "http://i47.servimg.com/u/f47/16/57/66/20/fond2011.jpg";

if(screen.width < 801) bg="http://i47.servimg.com/u/f47/16/57/66/20/fond8011.jpg";
else if(screen.width < 1025) bg="http://i47.servimg.com/u/f47/16/57/66/20/fond1011.jpg";
else if(screen.width < 1281) bg="http://i47.servimg.com/u/f47/16/57/66/20/fond1211.jpg";
else if(screen.width < 1601) bg="http://i47.servimg.com/u/f47/16/57/66/20/fond1611.jpg";

document.body.style.backgroundImage="url(\""+bg+"\")";

});

Tentez aussi de vider le cache et les cookies de votre navigateur et d'essayer sous un autre navigateur.


Cordialement.

[lmc38510]

Grand Merci à toi oooooh DR Karlos...

aucun problème d'affichage sur l'autre ordi....

quel est le code CSS pour que l'image descende en même temps que la page...
Donc modifier celui actuel avec lequel elle est fixe...!

Spoiler:

par contre sur mon portable résolution 1024 x 768 aucun changement...
affichage identique avant modif du CSS...

Spoiler:

[Dr. Karlos]

Bonsoir,

Placez ce code dans votre CSS à la suite du code pour votre en-tête (et non la gestion des codes Javascript ):

Code:

body{
background-position: top center;
background-repeat: no-repeat;
background-attachment: scroll;
}

Pour le problème avec l'image changeante, remplacez votre code Javascript par celui-ci, comme mentionné dans mon message précédant:

Code:

$(function(){
 
var bg= "http://i47.servimg.com/u/f47/16/57/66/20/fond2011.jpg";
 
if(screen.width < 801) bg="http://i47.servimg.com/u/f47/16/57/66/20/fond8011.jpg";
else if(screen.width < 1025) bg="http://i47.servimg.com/u/f47/16/57/66/20/fond1011.jpg";
else if(screen.width < 1281) bg="http://i47.servimg.com/u/f47/16/57/66/20/fond1211.jpg";
else if(screen.width < 1601) bg="http://i47.servimg.com/u/f47/16/57/66/20/fond1611.jpg";
 
document.body.style.backgroundImage="url(\""+bg+"\")";
 
});

Cordialement.

[lmc38510]

Grand merci "DR Karlos".....tout est rentré dans l'ordre....! impeccable....!!!!

Je te remercie pour ta compétence, surtout pour ta patience... A force de rentrer des infos pour un débutant...ça fini par "bugger"....il faut le temps de digérer tout cela....
Donc encore :thanks: et t'es un chef...