proflat

Header background responsive pour Proflat - proflat

Header background responsive pour Proflat

Nouveau messagepar Soulaction » 23 Juin 2018 à 12:34

Bonjour bonjour :!:

J’avance peu à peu dans mon forum (toujours offline pour le moment).
Donc le style hérité de proflat que je suis en train de travailler commence à prendre forme. 8)

Je me là confronte à un petit problème :
J'ai fait un background aléatoire pour le headerbar afin de voir des message fun apparaitre tout au long de la navigation à coté du logo.
Pour cela j'ai fait des images.png avec un fond gamma le texte par dessus (2560*138px pour que ce soit de la largeur du fond principal). Intégrées via le code suivant :
Code: Tout sélectionner
.headerbar { background-image: url("./images/header/rotate.php"); background-size: cover; background-color: transparent; background-position: 80% -60%; background-repeat: no-repeat; }

Code: Tout sélectionner
rotate.php étant un script php permettant de random un dossier d'images

Toute fois j'imagine que l'on peut optimiser cela avec des petites images pile poile de la taille du texte (et très peu de fond gamma derrière donc) et leur donner une position relative par rapport au logo principal, ce qui serait l'idéal !
Mais c'est là mon gros problème : je n'arrive pas à les placer de manière responsive. Dès que l'on passe sur des largeurs d'écrans plus petits, le texte se balade de partout et fou tout en l'air.
Et je n'arrive même pas du tout à les placer si je fait des petites images optimisées. :oops:
Voir le gif ci dessous en mode développement avec firefox :
Image(cliquer pour zoomer)

Voilà donc là je bloque pour comprendre comment lui donnez un emplacement relatif par rapport au logo du site.

Merci d'avance de l'aide que vous pourrez m'apportez ! :mrgreen:
Avatar de l’utilisateur
Soulaction
Posteur néophyte
Posteur néophyte
 
Messages: 18
Enregistré le: 08 Juin 2018 à 10:41

Re: Header background responsive pour Proflat

Nouveau messagepar Mazeltof » 30 Juin 2018 à 15:41

'jour ici,

Le responsive annule justement tout le superflu sur petits écrans. (logo, description et boite de recherche via une icône) et la première réflexion qui me viens c'est que sur ce type d'écran, justement, ton logo + ton texte aléatoire ne passeront pas.

Et un logo aleatoire qui contiendrait ton logo et tes différents textes sur la même image, ça éviterai tous tes soucis de positionnement logo + textes :P (bon je sais c'est la facilité)
Image Image Image
Avatar de l’utilisateur
Mazeltof
Resp. des graphistes
Resp. des graphistes
 
Messages: 2977
Enregistré le: 09 Mar 2009 à 22:02
Localisation: Arras


Connexion  •  M’enregistrer

cron