Background deux images CSS

007good

Posté le 09/07/2013 @ 18:46

Bonjour,

J'ai deux images qui genere mon arrière plan.
J'aimerais que les images du coté soit fixe, alors que le "tail" ne soit pas fixe... Puisque le haut contient un menu...

Le CSS actuel est :

#main-wrap { background-image : url(../img/background.gif),url(../img/tail-main.gif) ;
background-position: center top, left top ;
background-repeat: no-repeat ,repeat-x #1d1a16;
background-attachment:fixed;
width:100%;
padding:0;
overflow:hidden;}

Voir ici : http://presta.rawmotorsports.net/index.php

Comment rendre l'image 2 (tail-main.gif) non fixe ?

Dreamer

Posté le 09/07/2013 à 19:00

Salut

Pouquoi ne pas mettre scroll pour la seconde image .....

background-attachment: fixed, scroll;

Dreamer

Posté le 09/07/2013 à 19:03

Marde, j'ai encore été trop vite.

Si mes souvenirs sont bons scroll est natif dans background-attachment !!

007good

Posté le 09/07/2013 à 19:11

On est sur la bonne voie :)

Avec

background-attachment:fixed, scroll;

On a bien les deux photos fixé et le centre non fixe :)
Sauf que le milieu se repete :'(
Je voudrais que l'image centrale ne se repete pas en "y" ..

Et que pour le coup par exemple une couleur fixe se repete une fois que l'image est "épuisé" .. Ou alors encore mieux je crée une 3eme image qui ne contient pas la barre de menu et qui elle se repeterait en y ?

Dreamer

Posté le 09/07/2013 à 19:17

Question bête: pourquoi 2 images en background, ce qui n'est pas toujours simple à utiliser !!

007good

Posté le 09/07/2013 à 19:31

Et bien en fait j'en ai une qui est juste une "ligne" vertical qui est repeté indéfiniment en x !
Comme ca, ca gere toutes les résolutions d'écran !

Cette image :

http://presta.rawmotorsports.net/themes/theme481/img/tail-main.gif

Et l'autre contient les bords :

http://presta.rawmotorsports.net/themes/theme481/img/background.gif

Je suis presque bon ! Mais, comme je dis plus haut, la ligne verticale est repété en y et donc la barre noir du menu du haut viens se mettre en plein milieu .. Alors que dans le css j'ai repeat-x (et donc pas y !) et lacouleur #1d1a16 doit venir se mettre lorsqu'il y a plus d'image en y...

Ca marchait bien avant que je touche au CSS pour mettre les photos en bord... Mais maintenant il se repete :(

Voici une page assez "grande" en hauteur pour voir la répétition génante :

http://presta.rawmotorsports.net/index.php?id_category=50&controller=category

Dreamer

Posté le 09/07/2013 à 20:13

Suivant ton type de ligne, ne serait-il pas plus simple d'utiliser plutôt une couleur de fond avec ton image en background..

Tu t'éviterais un mal de tête !!

Vous devez être connecté pour participer à la discussion.
Cliquez ici pour vous identifier.

Vous n'avez pas de compte ? Créez-en un gratuitement !

Les bons plans du moment PC Astuces

Tous les Bons Plans

Kit de 16 Go (2 x 8 Go) de mémoire DDR4 Kingston Fury Beast 3200 MHz à 40,83 € livré
40,83 € ~~60 €~~ -32% @Amazon Allemagne

Amazon Allemagne propose actuellement le kit de 16 Go (2x8 Go) de mémoire DDR4 Fury Beast 3200 MHz CL16 à 36,20 € (avec la TVA ajustée). Comptez 4,63 € pour la livraison en France soit un total de 40,83 € livré alors qu'on le trouve ailleurs à plus de 60 €.

Voir le bon plan

PC portable MSI Modern 15 (Core i3, 8 Go RAM, SSD 512 Go, Windows 11) à 399,99 €
399,99 € ~~550 €~~ -27% @Amazon

Amazon fait une promotion sur le PC portable MSI Modern 15 B11M-020FR qui passe à 399,99 € au lieu de 550 €. Cet ordinateur possède une dalle 15.6 pouces Full HD anti reflet, est équipé d'un processeur Intel Core i3-1115G4, de 8 Go de RAM et d'un SSD NVME de 512 Go. Avec WiFi 6, Bluetooth, USB C. Il ne pèse que 1,7 kg et offre une autonomie de 8 heures. Il est fourni avec Windows 11.

Voir le bon plan

SSD Crucial P3 4 To (NVMe, PCIe, M.2, 3500 Mo/s) à 182,37 €
182,37 € ~~229 €~~ -20% @Amazon

Amazon fait une promotion sur le SSD Crucial P3 4 To (NVMe, PCIe, M.2) qui passe à 182,37 € au lieu de 229 €.

Ce SSD offre des vitesses de lecture/écriture séquentielle allant jusqu’à 3 500 Mo/s. Il est garanti 5 ans.

Voir le bon plan

Clavier sans-fil bluetooth Logitech MX Keys Mini à 88,99 €
88,99 € ~~109 €~~ -18% @Amazon

Amazon fait une belle promotion sur le clavier sans-fil bluetooth Logitech MX Keys Mini qui passe à 88,99 € grâce à un coupon à activer sur la page du produit alors qu'on le trouve ailleurs autour de 109 €. Profitez d'une frappe parfaitement fluide, naturelle et précise grâce aux touches concaves qui épousent la forme de vos doigts et leurs bords arrondis qui offrent un retour satisfaisant.

Le clavier Logitech MX Keys Mini est équipé de la technologie Logitech Flow. Cette dernière, vous permet de taper du texte sur un ordinateur et de le finir sur un autre, d'effectuer des copier-coller de texte, d'une image ou encore d'un fichier d'une machine à une autre. Le Logitech MX Keys est aussi équipé de capteurs de proximité qui détectent vos mains et illuminent le clavier au moment où vos doigts approchent des touches. A l'inverse, les touches rétro-éclairées s'éteignent quand vous quittez le bureau pour économiser de l'énergie. Aussi, l'intensité du rétro-éclairage s'adapte aux conditions d'éclairage ou peut être définie manuellement.

Notez que cette version Mini ne possède pas de pavé numérique.

Voir le bon plan

PC portable Lenovo ThinkPad P14S Gen 2 (FHD IPS, Ryzen 5 Pro, 16 Go RAM, SSD 512 Go) à 609 €
609 € ~~900 €~~ -32% @Lenovo

Lenovo fait une belle promotion sur l'ordinateur portable Lenovo ThinkPad P14S qui passe à 609 € alors qu'on le trouve habituellement à 900 €. Cet ordinateur portable dispose d'un écran 14 pouces Full HD IPS (1920x1080), d'un processeur AMD Ryzen 5 Pro 5650U (6 coeurs), de 16 Go de RAM (extensible), d'un SSD de 512 Go, d'un chip graphique Vega 8 intégré, d'une webcam, d'un lecteur de cartes mémoire et de connexions Bluetooth, WiFi 6, Ethernet, HDMI, USB 2.0 et USB 3.0.

Une machine robuste et légère qui vous suivra partout (1,55 kg) et adaptée à tous les usages (étudiant, entreprise, bureautique, multimédia, Internet et jeux en FHD). Elle est garantie 3 ans.

Voir le bon plan

Acer Nitro 5 (15,6'' FHD 144 Hz, Ryzen 7 5800H, 8 Go, SSD 512 Go, GeForce RTX 3060) à 799,99 €
799,99 € ~~999 €~~ -20% @RueDuCommerce

RueDuCommerce fait une belle promotion sur l'ordinateur portable Acer Aspire Nitro AN515-45-R3HA qui passe à 799,99 € au lieu de 999 €. Ce portable dédié aux joueurs dispose d'un écran 15,6 pouces FHD 1920 x 1080 144 Hz, d'un processeur AMD Ryzen 7 5800H, de 8 Go de mémoire RAM, d'un SSD de 512 Go et d'une carte graphique Nvidia GeForce RTX 3060 6 Go.

L'ordinateur est livré sans OS mais vous pouvez facilement installer Windows 10/11 pour quelques euros.

De quoi faire tourner tous vos jeux en haute définition.

Voir le bon plan