[RÉGLÉ] thème responsive et déplacement background

[elo5370]

bonsoir, j'ai 2 problèmes de background d'un site avec un thème responsive, en fonction de la taille d'affichage (sur ordi, tablette, smartphone, etc)

1)Le background contient la photo d'une personne que j'aimerais toujours voir autour du coin supérieur gauche de l'emplacement des articles. Mais le background se décale différemment et je n'arrive pas à avoir un fond propre avec la photo bien placée, autant sur ordi que smartphone. En petite dimension il disparait même, le background se décalant trop
Si je mets sa photo dans un module du haut, c'est franchement laid et ça décale surtout les module dessous encore plus bas...


2) Idem pour le nom du site (au nom de l'individu en question) que j'ai placé dans un module logo, il est trop long pour s'afficher sur un smartphone. Y-a t'il moyen d'avoir un redimensionnement des logos (dans un module) en fonction de la taille de lecture du site ?

Est-ce que vous avez des idées de solution ?
Dois-je oublier l'idée responsive et proposer des thèmes différents en fonction de ordi ou smartphone ?
Cordialement,
Elo

[toffffe]

Re : thème responsive et déplacement background

Salut
As-tu essayer de mettre l'image de fond en position center
Mais là sans lien ...

[ghazal]

Re : thème responsive et déplacement background

Salut,
en CSS3, on peut utiliser "cover":

html {
background: url("http://farm8.staticflickr.com/7450/8720531021_63bbb11552_h.jpg") no-repeat center center fixed;
-moz-background-size: cover;
-webkit-background-size: cover;
-o-background-size: cover;
-ms-background-size:cover ;
background-size:cover;
}

Démo:

http://jsfiddle.net/6Hzbp/show/

[lomart]

Re : thème responsive et déplacement background

Bonsoir,

Il suffit d'utiliser les media-queries pour définir les positions ainsi que la taille du titre.

[elo5370]

[Réglé] thème responsive et déplacement background

Bonsoir,
l'image était je pense déjà centrée, d'où le problème.
La solution de Ghazal "cover" ne convient pas dans le cas précis de cette image notamment quand on passe à de petits formats de smartphone car c'est une zone précise sur le côté de l'image qui doit toujours être visible, mais je ne connaissais pas et utiliserai surement dans d'autres cas.
Finalement la solution de Lomart est impec, je fais juste plusieurs images de fond différentes et ça marche. Par ailleurs les tailles d'écrans sont déjà définies dans un css du template avec des media queries, donc je n'ai plus qu'à rajouter le bon background au bon endroit.
Grand merci à tous les 3, bonne soirée,
Elo