Partage
  • Partager sur Facebook
  • Partager sur Twitter

Image de fond adaptable suivant la resolution

mon image de fond = mon design : comment l'adapter ?

Sujet résolu
    10 décembre 2005 à 22:52:10

    Bonjour a tous les zer0 qui lisent mon post :) .
    Alors voila, pour la futur version de mon site, j'ai un petit problème grave :euh: .
    En effet, j'ai essayer de faire un désign assez "novateur", constitué d'une seule image .jpg, qui sert de fond, et ou dessus je place des block invisible, avec du texte dedans, comme un calque quoi ;) .
    Le problème est que mon image ( donc mon désign ), très belle, est en 1024*768, et quand je l'ouvre avec Mozilla firefox, elle n'apparait donc pas entièrement ( sauf si j'affiche ma page en pleine écran avec F11 ).
    En gros, quelqu'un qui va avoir une resolution de 1280*1024 va avoir une marge blanche a coté de l'image, qui va etre trop petite, et les personnes qui ont une réso de 800*600, vont avoir une image trop grosse, et vont donc pas pouvoir par exemple voir le menu, ils ne pourrront que voir la moitié de la page quoi ;).

    D'autant plus, que si je continue mon site en placant mes block par rapport a des % ( design extansible ) tout va être decallé.
    Je voudrais donc avoir une fonction ( javascript, css, xhtml, voir autres ) qui permettent d'adapter l'image de fond par rapport a la résolution du visiteurs, voir a la fenetre que mozilla affiche !

    Merci donc de me renseigner et de m'aider, je vous en serez très reconnaissant.

    Sur ceux, bonsoir les zorro :zorro:, euh ... Zer0 o_O .

    Ps : voici mon code css :

    body
    {
    background-image: url("design sombre.jpg");
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-position: 100%;
    width: 100%;
    }

    a
    {
    color:#635fa9
    }

    a:hover
    {
    text-decoration: underline;
    color: red;
    }



    • Partager sur Facebook
    • Partager sur Twitter
      11 décembre 2005 à 10:05:13

      Slt,

      une image background extensible ce n'est malheureusement pas possible en CSS2.1. La solution est donc de faireça avec une image :
      <img src="monimagedefond.png" alt="" id="background"/>
      #background{
      width:100%;
      height:100%;
      z-index:-100;
      }


      Après, tu places tes autres blocs par dessus en absolu.

      a+
      • Partager sur Facebook
      • Partager sur Twitter
        11 décembre 2005 à 10:43:42

        La solution de SirWam n'est pas trop mal, mais je te conseille de faire le contraire:
        tu places tes blocs de background en absolute. Et comme ca, ca n'interfere pas avec le reste.
        #background
           position: absolute;{
           width: 100%;
           height: 100%;
           z-index: -1; /* -1 suffit */
        }

        Voilà ^^
        • Partager sur Facebook
        • Partager sur Twitter
          11 décembre 2005 à 15:35:18

          bonjour,
          pour info: un z-index seul qui n'est pas associer a un position:relative ou absolute est ineficace,... car dans ce cas le navigateur n'a pas de "reference" pour savoir au dessus ou au dessous de quoi il doit gerer l'affichage.
          en position relative, il pourra estimer le contenu static a sa valeur par defaut 0 .une valeur negative, le placera en dessous, et vice versa.

          Mais cette idée peut-etre contraignante, pixelisation de l'image, , faut-il aussi etirer sur la hauteur de la page, deformations des visages ou objets, etc....

          Un exemple: une page avec un fond extensible. Juste pour te rendre compte des limites de l'idée...
          Il y a aussi un article interessant dans la faq d'alsacreations, avec des explications.

          (Le sujet a deja ete abordé sur le forum)

          a plus
          • Partager sur Facebook
          • Partager sur Twitter
            11 décembre 2005 à 19:14:16

            Ok, merci ca marche, mais j'ai un petit problème ...
            En utilisant la methode de Kels, je des petits bords blancs ( enfin noirs maintenant grâce à un background-color dans le body ) qui fait pas génial, et de plus, quand j'augmente ma réso, l'image ne s'aggrandis toujours pas, elle reste bien en haut a gauche, mais c'est tout :(.
            Alors justement, j'aimerai soit qu'elle s'étire, soit qu'elle se centre :)

            Merci d'avance ;=)
            • Partager sur Facebook
            • Partager sur Twitter
              11 décembre 2005 à 23:45:47

              rebonjour,
              si tu avais suivis le lien qu e je te donnais, en regardant le css, tu aurais compris une chose ou deux, ou en allant voir sur la faq d'alsacreations ou le principe est expliqué,
              alors pour la borduere, ajoute a body et html un margin:0; et un padding:0;, profites en en pour leur donner au moins un width:100%; ainsi qu'a ton image. et si tu veux construire ton site comme le lien que je t'ai donnée, c'est a dire juste dans l'ecran, ajoute un overflow:hidden pour te defaire tes barres de scroll genantes.
              a plus
              • Partager sur Facebook
              • Partager sur Twitter
                12 décembre 2005 à 8:29:39

                salut !
                Je ne pense pas que tu puisse faire étirer ton image en fonction de la resolution du visiteur ... mais ce que tu peut faire c'est faire une page de largeur definie (exemple: 760px pour que tout le monde voit en entier) et de hauteur indefinie ...
                voila, j'espere que sa t'aura aidé !

                ++Faizen
                • Partager sur Facebook
                • Partager sur Twitter
                  12 décembre 2005 à 10:12:21

                  ??
                  oui c'est possible, vec tout les defauts que ça comporte ! que ce soit dans le flux de la page ou non !, c'est un "phenoméne" amusant et curieux, mais qui a ces limites !(le bg centre et une option souvent preferable, depend de l'image elle m^me en fait).
                  je remet un lien :avec une image pas belle du tout et une mini explication

                  bon dev
                  • Partager sur Facebook
                  • Partager sur Twitter
                    12 décembre 2005 à 20:48:09

                    Ok, sa marche niquel now :)
                    J'ai pris le code CSS de ton site, et je l'ai modifié pour qu'il va bien avec mon site.
                    En effet, les effets sur les images ne sont pas super, mais sa me plais.
                    merci de ton aide :p
                    • Partager sur Facebook
                    • Partager sur Twitter

                    Image de fond adaptable suivant la resolution

                    × Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
                    × Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
                    • Editeur
                    • Markdown