Background sur H1 qui prend 100%

AlexisLS
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
Réponse acceptée

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
Auteur

Effectivement .. Merci