Exécuter
❯
Exécuter le code
Ctrl+Alt+R
Enregistrer le code
Ctrl+Alt+A
Changer d'orientation
Ctrl+Alt+O
Changer de thème
Ctrl+Alt+D
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> body { marge: 0; police: Arial, Helvetica, sans-serif; } .hero-image { arrière-plan: url(img_man.jpg) sans répétition centre; taille-arrière-plan: couvrir; hauteur: 500px; position: relative; } .hero-text { text-align: center; position: absolute; haut: 50%; gauche: 50%; transform: translate(-50%, -50%); couleur: blanc; } </style> </head> <body> <div class="hero-image"> <div class="hero-text"> <h1 style="font-size:50px">Je suis John Doe</h1> <h3>Et je suis photographe</h3> <button>Engagez-moi</button> </div> </div> <p>Contenu de la page..</p> <p>Notez que cette technique rendra également l'image responsive : Redimensionnez la fenêtre du navigateur pour voir l'effet.</p> </body> </html>