CSS : 3 images en background
Alex
-
Alex -
Alex -
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:
Merci d'avance :)
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:
- CSS : 3 images en background
- Css download - Télécharger - HTML
- Enlever le soulignement d'un lien css ✓ - Forum Réseaux sociaux
- Css ligne horizontale ✓ - Forum CSS
- Enlever le soulignage des lien. - Forum CSS
- Enlever soulignement lien css ✓ - Forum CSS
4 réponses
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 ?)
Sinon tu donne un "id" ou une "class" a tes div !
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+
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+
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;
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;
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 !
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 !
si c'est du html5
<footer></footer>
tu fais juste dans ton css
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
.
<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
.
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
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
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:
et mon css:
J'ai l'impression d'essayer de faire quelque chose d'irréalisable.
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.
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 !
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. ♣
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. ♣
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 ! :)
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 ! :)
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...
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...
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 :)