Aller au contenu

Change
Photo

[Webmastering] - Souci de gestion du design


  • Veuillez vous connecter pour répondre
8 réponses à ce sujet

#1
Ashina

Ashina

    Geekette Royale

  • Membre
  • 5 904 messages
  • LocalisationLes Valettes [Suisse]
Bonjour à tous,

Je suis en train de développer mon futur site de photos et dessin, en PHP / MySQL / XHTML / CSS.
Pour créer le background de mon site, j'ai fait un fondu sous Photoshop (taille: 4x942px).

Ce que j'aimerais, c'est qu'il s'ajuste à la fenêtre du navigateur de l'utilisateur (pas de soucis avec la pixelisation, l'effet donne exactement ce que j'attendais après quelques tests sur différentes résolutions).

Est-ce possible, et si oui, comment ?

P.S.: Je m'excuse par avance pour les réflexions de boulet que je ne vais pas manquer de pondre, mais je suis... comment dire... une newbie en développement (sauf PHP / XHMTL).

MERCI ! :D
  • 0
T4G: HomeMade => Antec 902, Core2Quad Q9650, 8Gb RAM DDR2 1066MHz, SSD OCZ 120Gb, GTX 460 1Gb
ULTRAPORTABLE: Y'a plus non plus... :arf:
P4G: Y'a plus... :arf:

#2
ziwa_68

ziwa_68

    Geek confirmé

  • Membre
  • 933 messages
  • LocalisationHaut-Rhin
google : background css

http://www.quackit.c...round_image.cfm
  • 0

#3
Noir Seigneur des Sith

Noir Seigneur des Sith

    Noir Seigneur des Sith

  • Membre
  • 8 476 messages
  • LocalisationEtoile Noire
<style>
body{
background-image: url(http://www.ashina.com/background.jpg);
}
</style>

juste avant </head>
  • 0
20 pc & mac
Linux - macOS - Windows - Android
Mes machins préférés du moment :
NVIDIA SHIELD TABLET K1 - puissante, bon format, meilleure tablette 8"
AORUS X3 V5 - meilleur design, prix trop élevé

#4
Ashina

Ashina

    Geekette Royale

  • Membre
  • 5 904 messages
  • LocalisationLes Valettes [Suisse]
@ziwa_68: C'est pourtant la solution que j'essayais d'implémenter depuis hier après-midi, mais je viens de m'apercevoir que le problème que je constatais ne se produit que sur le poste du bureau (et c'est apparemment un module externe lié à notre application de ticketing qui casse tout). J'aurais donc pu encore essayer longtemps... Mais c'est bon à savoir que des modules d'applications webs peuvent à ce point em***.

Merci à toi, en tout cas.

@NoLife73: Cette solution marche bien quand l'image de background a déjà une taille honorable. Mais là, ce que je voulais faire, c'est faire répéter, en CSS, un fondu créé sur Photoshop pour que justement le background s'adapte à la taille de la fenêtre de l'utilisateur.
  • 0
T4G: HomeMade => Antec 902, Core2Quad Q9650, 8Gb RAM DDR2 1066MHz, SSD OCZ 120Gb, GTX 460 1Gb
ULTRAPORTABLE: Y'a plus non plus... :arf:
P4G: Y'a plus... :arf:

#5
Noir Seigneur des Sith

Noir Seigneur des Sith

    Noir Seigneur des Sith

  • Membre
  • 8 476 messages
  • LocalisationEtoile Noire
je fais ça aussi quand je fais des sites.
une image très étroite et très longue en fondu, qui se répète à l'infini pour prendre toute la fenêtre.
ça marche très bien avec ce code tout simple.
Si tu veux être sûre , tu peux aussi allonger l'image jusqu'à 2500 pixels.
  • 0
20 pc & mac
Linux - macOS - Windows - Android
Mes machins préférés du moment :
NVIDIA SHIELD TABLET K1 - puissante, bon format, meilleure tablette 8"
AORUS X3 V5 - meilleur design, prix trop élevé

#6
Ashina

Ashina

    Geekette Royale

  • Membre
  • 5 904 messages
  • LocalisationLes Valettes [Suisse]
J'ai essayé, mais sur de petites résolutions, on perd une partie du fondu. Et là, c'est purement sentimental, je n'ai pas envie de gâcher une partie de ce que j'ai soigneusement fait. :vert:
  • 0
T4G: HomeMade => Antec 902, Core2Quad Q9650, 8Gb RAM DDR2 1066MHz, SSD OCZ 120Gb, GTX 460 1Gb
ULTRAPORTABLE: Y'a plus non plus... :arf:
P4G: Y'a plus... :arf:

#7
Noir Seigneur des Sith

Noir Seigneur des Sith

    Noir Seigneur des Sith

  • Membre
  • 8 476 messages
  • LocalisationEtoile Noire
sinon tu rajoutes ça en css :

#background-image {
position fixed;
top:0%; height:100%;
left:0; width:100%;
}
et ça :

background-repeat: repeat;

Modifié par NoLife73, 03 février 2011 - 15:40.

  • 0
20 pc & mac
Linux - macOS - Windows - Android
Mes machins préférés du moment :
NVIDIA SHIELD TABLET K1 - puissante, bon format, meilleure tablette 8"
AORUS X3 V5 - meilleur design, prix trop élevé

#8
Ashina

Ashina

    Geekette Royale

  • Membre
  • 5 904 messages
  • LocalisationLes Valettes [Suisse]
J'ai aussi essayé, et sur des grands écrans avec une résolution élevée, l'image de background se répétait en bas de la page... Et comme c'est un fondu dégradé de gris graphique sur gris clair, tu avais une barre gris clair qui repartait sur le ton gris graphique du début de dégradé. Un peu moche, quoi...
  • 0
T4G: HomeMade => Antec 902, Core2Quad Q9650, 8Gb RAM DDR2 1066MHz, SSD OCZ 120Gb, GTX 460 1Gb
ULTRAPORTABLE: Y'a plus non plus... :arf:
P4G: Y'a plus... :arf:

#9
Noir Seigneur des Sith

Noir Seigneur des Sith

    Noir Seigneur des Sith

  • Membre
  • 8 476 messages
  • LocalisationEtoile Noire
<body style="margin:0px; padding:0px;">
<img src="background.jpg" style="width:100%;">
<div style="position:absolute; top:0px; left:0px;">
...
</div>
</body>

normalement avec les width et height en 100% ça devrait prendre toute la fenêtre...
  • 0
20 pc & mac
Linux - macOS - Windows - Android
Mes machins préférés du moment :
NVIDIA SHIELD TABLET K1 - puissante, bon format, meilleure tablette 8"
AORUS X3 V5 - meilleur design, prix trop élevé




0 utilisateur(s) li(sen)t ce sujet

0 membre(s), 0 invité(s), 0 utilisateur(s) anonyme(s)