Background sur H1 qui prend 100%

Par AlexisLS, il y a 9 ans


Les bases HTML/CSS

Bonjour,

J'ai un léger soucis avec un H1 sur lequel j'ai mis un Background color sauf que celui si prend toute la largeur du container voir photo

http://hpics.li/1101094

Au niveau du code rien de très compliquer je vous montre :

<!DOCTYPE html> <html lang="fr"> <head> <meta charset="UTF-8"> <title>Maintenance</title> <link rel="stylesheet" href="<?php bloginfo("stylesheet_url"); ?>"> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Ubuntu"> </head> <body id="maintenance"> <div class="container"> <h1>Offline</h1> <h3>Now the site is down for maintenance</h3> </div> </body> </html> body { font-family: 'Ubuntu', sans-serif; } .container { width: 1200px;margin: 0 auto; } #maintenance { background-image: url(images/maintenance-background.jpg);background-size: cover;background-position: fixed; } #maintenance h1 { font-weight: bold;font-size: 90px;text-transform: uppercase;background-color: #fff000;padding: 5px;margin-top: 25%;} #maintenance p { font-weight: bold; font-size: 16px;text-transform: uppercase;color: #CCCCCC; }

Si quelqu'un pouvais me mettre sur la piste ..

2 réponses

Kenor, il y a 9 ans

un h1 est en display:block; donc prendra toute la largeur.
Soit tu mets ton h1 en display:inline-block; soit tu le mets entre 2 span par exemple, que tu mettras en display:inline-block, et c'est lui qui recevra le fond.

AlexisLS, il y a 9 ans

Effectivement .. Merci