AccueilDernières imagesRechercherS'enregistrerConnexion

Forum de graphisme, codage et game design proposant des tutoriels, astuces, libres services et commandes dans les domaines de l'infographie amateur, de l'intégration web (HTML et CSS essentiellement) ainsi que dans la conception de RPG sur forum.

Le Deal du moment :
LEGO Icons 10331 – Le martin-pêcheur
Voir le deal
35 €

    Adapter un Header de fond à tous les formats

    Vegvisir
    Vegvisir
    FémininAge : 25Messages : 411

    Lun 18 Sep 2017 - 8:07

    Bonjour bonsoir ! :friends:
    Alors voilà, ça fait un petit temps que mon forum est ouvert, et j'ai aperçu que le header de fond posait quelques soucis de temps à autres. En fait, cela dépend de la largeur de l'écran de l'ordinateur sur lequel on se trouve. Personnellement, sur le mien tout va bien, mais sur d'autres c'est un peu la catastrophe. Une petite capture d'écran pour vous montrer :
    Ici:
    Pour mettre en place ce système de Header de fond aléatoire, j'utilise un code CSS ainsi qu'un petit fragment (désolée je sais pas du tout comment ça s'appelle) en description du forum que je vous mets ci-dessous :
    Code:
    /*** HEADER DE FOND ***/

    .ban1 {
      background-color: #5C282C;
      background-image: url('http://www.turbopix.fr/i/xves8oq66e.png');
    background-position:relative;
    background-repeat:no-repeat;
    }
    .ban2 {
      background-color: #5C282C;
      background-image: url('http://www.turbopix.fr/i/vlzkvetf35.png');
    background-position:relative;
    background-repeat:no-repeat;
    }
    .ban3 {
      background-color: #5C282C;
    background-image: url('http://www.turbopix.fr/i/3ptaql36jg.png');
    background-position:relative;
    background-repeat:no-repeat;
    }

    Code:
    <script type=text/javascript> var banListe=['1','2','3']; document.write('<body class=ban' + banListe[Math.floor(Math.random()*banListe.length)] +'>'); </script>

    Donc pour ceux qui n'ont pas compris, le but, c'est évidement que le Header prenne tout l'écran et ne fasse pas un truc moche comme c'est actuellement le cas xD

    Je ne sais pas si il faut modifier quelque chose dans mon code ou bien juste utiliser une image plus grande, c'est pour a que je viens vous demander :aww:

    Merci beaucoup à ceux qui prendrons le temps de lire :ninjahug:


    Dernière édition par CaraDelevngnie le Lun 25 Sep 2017 - 22:21, édité 1 fois



    Adapter un Header de fond à tous les formats 1
    Vegvisir
    Vegvisir
    FémininAge : 25Messages : 411

    Ven 22 Sep 2017 - 23:01

    :up:



    Adapter un Header de fond à tous les formats 1
    Vegvisir
    Vegvisir
    FémininAge : 25Messages : 411

    Lun 25 Sep 2017 - 21:14

    :up:



    Adapter un Header de fond à tous les formats 1
    Nihil Scar Winspeare
    Nihil Scar Winspeare
    Messages : 5244

    Lun 25 Sep 2017 - 21:43

    Coucou ^^

    Je déplacerai ton sujet dans la section "Problème avec mon code", ici c'est plutôt pour demander à personnaliser un code en LS :)

    Par défaut, une image background va garder la largeur qu'elle a, du coup sur un écran plus large, elle reste plus petite oui ^^

    Ce que tu peux faire c'est rajouter ceci :
    Code:
    @media (min-width: 1400px) {
        body {
            background-size: 100%;
        }
    }

    Sur les fenêtres de plus de 1400px de larges, le fond prendra 100% de la largeur. Par contre, ce que cela veut dire c'est que l'image sera plus haute proportionnellement aussi :/
    Si on agrandit l'image en largeur, elle sera également plus haute et paraitra de qualité un peu moins bonne ^^'

    L'idéal serait d'avoir une version de l'image plus large (mais de la même hauteur) pour les grands écrans ^^
    Tu pourras mettre par exemple :
    Code:
    @media (min-width: 1400px) {
        .ban1 {
            background-image: url('URL_GRANDE_IMAGE');
        }
    }

    Comme ça sur un écran de moins de 1400px ça prend l'image de base, sur un plus grand écran ça prendra la grande image :)

    J'espère que ma réponse pourra déjà t'éclairer un peu Very Happy

    Vegvisir
    Vegvisir
    FémininAge : 25Messages : 411

    Lun 25 Sep 2017 - 22:21

    Hello,
    ça fonctionne parfaitement merci beaucoup !
    Du coup je pense qu'on peut directement archiver ! Désolée parfois je suis un peu gauche avec mes postes Sad



    Adapter un Header de fond à tous les formats 1
    Contenu sponsorisé


      La date/heure actuelle est Dim 24 Nov 2024 - 11:21