Sujet Précédent Sujet Suivant

CSS : 3 images en background

Fermé
Alex - 13 avril 2015 à 11:16
 Alex - 16 avril 2015 à 10:50
Bonjour à tous,

Je suis face à une difficulté que je n'arrive pas à surmonter après de multiples tentatives. J'ai 3 images que je dois placer en background sur un site.
Je dois faire en sorte qu'elles ne se chevauchent pas mais qu'elle se suivent sans aucune marge et qu'elles se redimensionnent les unes à la suite des autres, en occupant tout le background de ma page;

Je voulais une image pour le header, une autre pour le footer et une dernière entre le header et le footer. Mais je n'arrive pas faire en sorte qu'elles se positionnent correctement.

Je sais pas si vous pouvez m'aider ? Ce serait super car je touche bientôt à la fin de mon site, si je réussi à finir (grâce à vous) j'aurais pratiquement terminé !

Un coup de pouce s'il vous plaît !

Voici mon code: 

html {
    background: url(../img/Footer.png), url(../img/Fond_site.jpg), url(../img/Header.png);
    position: fixed;
    background-repeat: no-repeat;
    background-position: top, center, bottom;
    margin: 0;
    padding: 0; 
}


Merci d'avance :)
A voir également:

4 réponses

Réponse 1 / 4
RAD ZONE Messages postés 5230 Date d'inscription samedi 20 janvier 2007 Statut Contributeur Dernière intervention 17 août 2024 1 360
13 avril 2015 à 16:34
Salut

il faut donner un bg a chaque element separement !!!

si tu a fait ca avec des balises html5 ca donne un truc comme ca (j ai donner un height au elements, mais ils doivent etre ailleurs dans ton css puisque tu ne les a pas mis ?) 
<!DOCTYPE html>
<html>
  <head>
    <title>
      RAD ZONE Webcreation
    </title>
    <meta charset="utf-8">
    <style type="text/css">
<!--
    header,main,footer {
    background-repeat: no-repeat;
    background-position: top, center, bottom;
    margin: 0;
    padding: 0;
    }

    header {
    background-image:url(../img/Header.png);
    height: 50px;

    }

    main {
    background-image:url(../img/Fond_site.jpg);
     height: 100px;
    }

    footer {
    background-image:url(../img/Footer.png);
    height: 50px;
    }
    -->
    </style>
  </head>
  <body>
    <header>
      le header
    </header>
    <main>
      le fond de site
    </main>
    <footer>
      le footer
    </footer>
  </body>
</html>


Sinon tu donne un "id" ou une "class" a tes div ! 
<!DOCTYPE html>
<html>
  <head>
    <title>
      RAD ZONE Webcreation
    </title>
    <meta charset="utf-8">
    <style type="text/css">
<!--
    #header,#main,#footer {
    background-repeat: no-repeat;
    background-position: top, center, bottom;
    margin: 0;
    padding: 0;
    }

    #header {
    background-image:url(../img/Header.png);
    height: 50px;

    }

    #main {
    background-image:url(../img/Fond_site.jpg);
     height: 100px;
    }

    #footer {
    background-image:url(../img/Footer.png);
    height: 50px;
    }
    -->
    </style>
  </head>
  <body>
    <div id="header">
      le header
    </div>
    <div id="main">
      le fond de site
    </div>
    <footer id="footer">
      le footer
    </footer>
  </body>
</html>

mais ca c est la base ! apres ca va dependre de ce que tu veux et de ce que tu a mis dans ton css ;-))

a+
3
Alex
13 avril 2015 à 17:52
Merci pour ta réponse :)

C'est exactement ce genre de structure que je cherchais à mettre en place. J'aurais dû penser aux div plus tôt. C'était ça mon problème.

Ok merci beaucoup ton code m'a beaucoup aider à comprendre ce que j'essaye de faire et comment je vais pouvoir le faire.

Je vous tiens au courant ! Merci encore et encore :)
0
Réponse 2 / 4
animostab Messages postés 2829 Date d'inscription jeudi 10 mars 2005 Statut Membre Dernière intervention 11 novembre 2019 737
13 avril 2015 à 16:38
Salut
ton background position est mal déclaré, suivant la taille du centre le footer sera mal positionné. en fait il faut declarer les background-positions en x y (pixels ou %)
https://www.alsacreations.com/tuto/lire/814-css3-background-image-multiple.html

le mieux c'est quand meme de faire un background différent pour le header, le footer et le centre. Ca évitera les erreurs. tu peux faire le centre avec un background-size : cover;
0
Alex
13 avril 2015 à 18:00
Merci d'avoir répondu je trouvais personne pour me donner un coup de main.

Donc, pour gérer mes 3 background image, il est préférable d'utiliser 3 div qui vont contenir mes 3 images. Et qui vont pouvoir se positionner les unes à la suite des autres à la vertical.

Et est-ce que je peux mettre mes balises footer et header dans les div respectives ?
N'est-ce pas une pratique peu conventionnelle ? J'ai peur de faire n'importe quoi ?

Merci vous m'avez déjà beaucoup aider !
0
animostab Messages postés 2829 Date d'inscription jeudi 10 mars 2005 Statut Membre Dernière intervention 11 novembre 2019 737
13 avril 2015 à 22:25
si c'est du html5
<footer></footer>
tu fais juste dans ton css 
footer {
background: url(image.png);
}


dans un css
si le css se règle sur une balise (header, footer, article section etc ....) la balise se met sans point ni dièse
si c'est une div avec un id une dièse avant l'id
#
si c'est une class un point avant la class
.
0
Réponse 3 / 4
Alex
14 avril 2015 à 09:23
Bonjour,

Je reviens avec un nouveau problème, j'ai mis mes image en background des div mais le problème c'est que les images ne se redimensionnement pas à la taille de mes div. Je n'ai que la partie supérieure gauche de l'image.

Comment faire pour qu'elles se redimensionnent dans mes div automatiquement en fonction de la taille de mes div et de l'écran qui affichera le site ?

Il y a toujours quelque chose qui marche pas, un problème résolu = 10 problèmes de retrouvés :(

Merci pour votre aide
0
animostab Messages postés 2829 Date d'inscription jeudi 10 mars 2005 Statut Membre Dernière intervention 11 novembre 2019 737
14 avril 2015 à 13:51
salut
tu mets background-size:cover;
redimentionne et rognage intelligent
0
Alex > animostab Messages postés 2829 Date d'inscription jeudi 10 mars 2005 Statut Membre Dernière intervention 11 novembre 2019
14 avril 2015 à 14:25
Salut !

J'avais mis: background-size: 100% auto;
En essayant avec "cover" ça n'a rien changé.

Le problème c'est que mon image n'est visible qu'à moitié, notamment la partie supérieure. J'ai toute la largeur de l'image mais pas toute la hauteur.

Voici mon code html: 
<html>
    <head>
        <title>Accueil</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" type="text/css" href="css/style.css">
    </head>
    <body>
        <div id="divHeader"></div>
        <div id="divMiddle"></div>
        <div id="divFooter"></div>
    </body>
</html>


et mon css: 

html {
    height: 100%;
    width: 100%;
}

body {
    margin: 0;
    padding: 0;
    height: 100%;
    width: 100%;
}

#divHeader {
    background-image: url(../img/Pageweb_Octet_Header.png);
    background-repeat: no-repeat;
    background-size: 100% auto;
    height: 9.6%;
    width: 100%;
}

#divMiddle {
    background-image: url(../img/Fond_site_graphiste.jpg);
    background-repeat: no-repeat;
    background-size: 100% auto;
    height: 75.4%;
    width: 100%;
}

#divFooter {
    margin-top: -2.88%;
    background-image: url(../img/Pageweb_Octet_Footer.png);
    background-repeat: no-repeat;
    background-size: cover;
    height: 20.2%;
    width: 100%;
}


J'ai l'impression d'essayer de faire quelque chose d'irréalisable.
0
Réponse 4 / 4
RAD ZONE Messages postés 5230 Date d'inscription samedi 20 janvier 2007 Statut Contributeur Dernière intervention 17 août 2024 1 360
Modifié par RAD ZONE le 15/04/2015 à 00:18
Salut

Pourtant ca fonctione ?

voila un exemple avec "cover" .
j ai un peu optimise ton css ,
remis la somme des % height = a 100%,
retirer la marge negative du footer ??
et mis des images en base64 pour cet exemple ! 

<!DOCTYPE html>
<html>
  <head>
    <title>
      RAD ZONE Webcreation
    </title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style type="text/css">
    <!--
    html, body {
      height: 100%;
      width: 100%;
    }

    body {
      margin: 0;
      padding: 0;
    }

    #divHeader,#divMiddle,#divFooter {
      background-repeat: no-repeat;
      background-size: cover;
      width: 100%;
    }

    #divHeader {
      background-image: url('data:image/jpg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAkGBxQTEhQUExQTFRQXFBQUGBgYFxcXGhgUGBQYFxcYGBUdHCggGBwlHBQVITEhJSkrLi4uFx8zODMsNygtLiwBCgoKDg0NFA8PFywZHx0sLCsrLCwsLCssKystLCwxKyw3Nyw3KysrNzc3KywsLCsrKysrKywrLCsrNysrKysrK//AABEIAGAAYAMBIgACEQEDEQH/xAAYAAEBAQEBAAAAAAAAAAAAAAABAgADB//EACgQAAICAAMHBQEBAAAAAAAAAAABAhExUWESIUFxgaHwkbHB0eHxA//EABgBAQEBAQEAAAAAAAAAAAAAAAABAgMF/8QAGxEBAQEAAgMAAAAAAAAAAAAAAAERIXFBUWH/2gAMAwEAAhEDEQA/APIv8xcQ6alRMvXnporzqbsMUrM0Gs4MF7/ISKTELnCLRmK5GkweEt2EkKQyLGb9RhiDRTRLDNXFjAlCyNRUcTSkZGxDTG7FQiZ4KguCgsp2DYMFnOjo+ZOYZoogWa9CudXYoyYph0jJ/AoH9iktSNFS7m2QKcgrNkzXYphl5uC1LQSHaMgwlkV0Onuc5disVaiK15gaK6kUtFrhgc0VQahnI2zxCIt8g12U2CkL3Z/hNg0bIyXwPAgMXhiZDtkUVi1XQUCobINa1K3k7xK1KrQyyMjNkaZmg9/D1NAyQTW81Il9C5cTSnfsGbRd+hL8+zMW/wCBgI1gmUirC8eYolIb5hqKW4JAh2sCLsMwmzbWJnv4fgTpNDFhmZRKyzWuZma8woI//9k=');
      height: 10%;
    }

    #divMiddle {
      background-image: url('data:image/jpg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAkGBxISEhMUEhQWFBUWGRsWGBgWFhoYGxoaFxkbFxgbHBwcHiggICAlHBQUITEiJSkrLi4uFx8zODMsNygtLiwBCgoKBQUFDgUFDisZExkrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrK//AABEIAGAAYAMBIgACEQEDEQH/xAAXAAEBAQEAAAAAAAAAAAAAAAABAgAH/8QAMRAAAQIFAgMGBgMBAQAAAAAAAQARITFBUWECcYGhwRKRsdHh8AMTIjJy8YKiwpJC/8QAFgEBAQEAAAAAAAAAAAAAAAAAAAMC/8QAFBEBAAAAAAAAAAAAAAAAAAAAAP/aAAwDAQACEQMRAD8A6iBk+74W1A3ltD8UvbxjucLGPRiP6qDQGke2aZ5ra9Hs9VuIahJ+kxOJqSwfq3073QUfh+J34YQ23sH7UmMMu0HORjCCDBzxhGBlZBXZ2zCHHKNILHr1wghqgd0N4xWe0NyD332QWxhTMCf44UtwHvmnTNq2g5yMLNUNuPDdAMbDj/pOkREONZ+Cx1NNoTen5JExN5zjMckDH0cuN7oju9Ih84R2sAYieL12QfiPXkY+SDAm7uwiDcwWLx8pb3R8szcziWNzD1SSKfpA6iQZPxjOb2wjtc8z2ssdUYD3d74WeM59+pgZ2QGrX++mViQHhmJlnKxJsX5jGUy78w2ugoVDGNC8Y36LOXnPFqDzUiLjk5nd+irVqts7ctsoN2yIybi0p3VPINluM36KCS1IY+3AunS9mrVpiL9EEzEhN6MMjKC1OMBHeyRrgJNy4ZQfiTf3+WUCdY9iO2yx1bcAIQolmv1ryU9qnuR+1AkiMBN8cco0iMg5nev3JOqcXjgNvcoJjMnDh6zQYemeGFiDjpwyt2hB37w/BZwa1v4ZQYaBJgz1lOuVR0gn9HhsgHiHvCfiqDk16jBwgmDeQEPxWJAIhwg057qjqds2/wAradfjKDT8UCdYm/KB2zlRr1Zlj7d7rHUG68TAeanUQMMMfTvdBfaiZv6mtsKTrG8tjAyssZlxzyY+idBYYPOB7kCNe82ckwxvlV8yNdiTCc7qDr8fY9VgR3UtOtUFaCGaP/R9hB+JVzGDue4WOUDVODvtGXcn5lRF4SnjG6DfMB835b5VfDMoyEniNzVQCBRt/D1W02Y7OIcaoKMZEl6B/qh/5ss8i7m5dpiDXypJFp7fV5J06sNR4Xk3VBhrM4vd542R2zDGZfjdWS43v1sEdotDk/8AXCCDqxn7q3lyT2vWM4GcIJGvadCWrzQTOPeTY/cgo6z61GALKRqwGEWpwVVrzfhhYGUdhFuCCQ8ZRjOco4T2i/cHNcHCBwiavieVRM3PieGrCDSoKC/AYW0ESNGgD9I2LIfyz/HCrQWMg28OGUAdYIHUz/KEEdsUOMzEJSysTRt3J/sq0gvXg7zHJBEIC16flGIW1D2P8xgEjSJNKM5ZNxhJ0C08iO1kEtsfCZzNUAP2DCFQ8UECcLEwYxMGpusWFQOnmgogWq8y8/DCntbRwY7WW1WlF2G836IGuru/PyQPaM7ThL1yhzWY5C5usdeZShLGd1nsJZlnOyB06udpmURZHa8scM5WjYF8xOcbLEYFqdyBedGuJfldLh65FZze2FDwhBqwPZ3urApxaDzEXthB/9k=');
      height: 75%;
    }

    #divFooter {
      background-image: url('data:image/jpg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAkGBxISERMQEBIVFA8QFxQSDxATGBAUEA8QFBIXFhQUFBQYHCggGBolHBQUITEhJSkrOi4uFx8zODMsNygtLisBCgoKDQ0ODgwMFCsZExwrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrK//AABEIAGAAYAMBIgACEQEDEQH/xAAZAAEBAQEBAQAAAAAAAAAAAAACAwEABAb/xAAtEAACAQMCBQMEAQUAAAAAAAAAAQIRITEDUUFhcZGhEoHBcrHR8OEEEyIyUv/EABcBAQADAAAAAAAAAAAAAAAAAAABAgT/xAAUEQEAAAAAAAAAAAAAAAAAAAAA/9oADAMBAAIRAxEAPwD59LBeCxjiBRVr+DVBFmIdWPNAF6TY9UBscN7U8gcij1HddPAF7APTw8WMjLkPSVnjKBS7uBjnyQpyq3gEqbnaiVXR8QKaWlXiqt0yY4U4ruHSd19SNUbv3YBbvkdOfAmuGS+m1TNwIS6nR3PTKVsrsictZ4VOy3Am8mxqdFZzg1Pm/ADi3yyjYVrwztzA5O96dymlK95PK4dAJy1HV47Clqv1O9Ox00nW8s7L8mT01V0fdACmLj0Fmmz+wZLn9xaSd6PffYDHLkztPLqngcJLd9gqMb3d1yAM39jJLFK457malOfA1ulOgDhCV7P/AF5kl6ufkenqZrW6MWp1AWpOWH++AvUY/wCpy+rBLADlN/tCdONdyus7slw9wK/26r3+BQ0mlnwTeOOQerqAopWbrl/Aoxju8ciTdkjYr7AVfp5u35BFLZ9zHZrowQ+AFGmz7lYactnQjBcjqK9tgPTqwk27MhOtKPgwyarg5fICm3UUZKjruCVTr36gUlOPBMhUUzqYA2MTtPJqXLyCMbgUa5nKFKc18gURN46AbpRz9L+CRbReejMglxAFbiE6Vx5DKC4bgdY1on6Sjosp9wMSyZTFhLUj/wAvv/BspJqypnjUAxR0oGRN9gN9H7Um4Mqpq3+K61kGl6pJW3AMBRH6emNzFB7rwB0qbcTNWlcbC1KrYnNurALHJ3C0dJAYospToFcPc5SCX//Z');
      height: 15%;
    }
    -->
    </style>
  </head>
  <body>
    <div id="divHeader"></div>
    <div id="divMiddle"></div>
    <div id="divFooter"></div>
  </body>
</html>


A+
je sent que l insertion du contenu va etre folklo avec tout ces % et ton niveau css ;-))

♣ La plus grande erreur que puisse faire un homme est d'avoir peur d'en faire une. ♣
0
Alex
15 avril 2015 à 12:14
Salut !

J'ai déjà réussi à faire ça mais le problème c'est que mon image au centre ("middle") n'apparaît pas en entier, je n'ai que la partie supérieure de l'image. Elle est au format 1920*1080 Photoshop, c'est peut-être là le problème ?

Dans ton cas il est difficile de voir si ton image s'affiche entièrement puisque c'est un fond de type texture. Or avec une photo tu n'en verrais sûrement qu'une partie.

Sinon, j'avais mis cette marge négative à mon footer volontairement et tout ce qui s'en suit par rapport aux 100%. En réalité, ma div Footer doit chevaucher ma div middle car l'image du footer n'a pas une forme tout à fait rectangulaire ou carré.

la forme de l'image du footer:

|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|||||||||||||||||||||||||||||||||||||||||||||||||||||||| |
| |
| |
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||

Je me base sur une maquette assez spéciale si tu veux ! Je te tiendrai au courant.
Merci beaucoup pour ton aide, c'est vraiment sympa !

J'ai été voir ton site il est marrant à utiliser, c'est différent ! :)
0
RAD ZONE Messages postés 5230 Date d'inscription samedi 20 janvier 2007 Statut Contributeur Dernière intervention 17 août 2024 1 360
15 avril 2015 à 17:16
Salut
Essaye en jouant avec le background-position: de la div
exemple 

#divMiddle {
      background-image: TON IMAGE
      height: 75%;
      background-position: center;
    }


a+
0
Alex > RAD ZONE Messages postés 5230 Date d'inscription samedi 20 janvier 2007 Statut Contributeur Dernière intervention 17 août 2024
16 avril 2015 à 10:50
Salut !

Merci ça a fonctionné plus ou moins !
Mais j'ai ce problème de superposition de ma div footer sur ma div middle. Au redimensionnement de la fenêtre ça ne suit pas j'ai une marge qui se crée entre les deux div et sur un autre écran j'ai une marge tout en bas, alors bon...

Merci à toi, je vais poursuivre comme je peux...
0

Discussions similaires

trait horizontal avec du css
tipi75 -
tipi75 -

8 réponses
Enlever le soulignement sous les liens en HTML/CSS
baissaoui -
baissaoui -

0 réponse
[CSS] Forcé retour à la ligne
aKuma59 -
zigoss -

33 réponses
HTML - définir taille bouton
Diva -
Utilisateur anonyme -

14 réponses
[CSS] Mettre un objet au premier plan
Achillion -
tiran58 -

2 réponses