Source Code:
(back to article)
Submit
Result:
Report an issue
<!DOCTYPE html> <html> <head> <title>Titre du document</title> <style> body, html { height: 100%; margin: 0; font-family: Helvetica, sans-serif; } .image { height: 50%; background-position: center; background-repeat: no-repeat; background-size: cover; } .one { background-image: url("https://images.unsplash.com/photo-1523240795612-9a054b0db644?ixlib=rb-1.2.1&auto=format&fit=crop&w=1050&q=80"); } .two { background-image: url("https://images.unsplash.com/photo-1501504905252-473c47e087f8?ixlib=rb-1.2.1&auto=format&fit=crop&w=967&q=80"); } .three { background-image: url("https://images.unsplash.com/photo-1521737604893-d14cc237f11d?ixlib=rb-1.2.1&auto=format&fit=crop&w=1063&q=80"); } .four { background-image: url("https://images.unsplash.com/photo-1519389950473-47ba0277781c?ixlib=rb-1.2.1&auto=format&fit=crop&w=1050&q=80"); } .five { background-image: url("https://images.unsplash.com/photo-1522071820081-009f0129c71c?ixlib=rb-1.2.1&auto=format&fit=crop&w=1050&q=80"); } .six { background-image: url("https://images.unsplash.com/photo-1488190211105-8b0e65b80b4e?ixlib=rb-1.2.1&auto=format&fit=crop&w=1500&q=80"); } .seven { background-image: url("https://images.unsplash.com/photo-1543269865-96ae30571b5a?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80"); } .content { background-color: rgba(0, 0, 0, 0.5); color: #fff0c2; font-weight: bold; font-size: 60px; border: 8px solid #000000; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 2; width: 270px; padding: 50px; text-align: center; } </style> </head> <body> <div class="image one"></div> <div class="image two"></div> <div class="image three"></div> <div class="image four"></div> <div class="image five"></div> <div class="image six"></div> <div class="image seven"></div> <div class="content">W3DOCS</div> </body> </html>