How to stop the background of text from extending all the way left and right when alligning to the c-CodePudding

I'm very very new to HTML and I'm trying to recreate a wix template for practice and i tried to align a piece of text to the center and I added a back background to it and the background expands all the way left and right. Is there a way to stop this?

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
</head>
<body>
 <div >
     <h3  align='center'>AMBITION IS THE FIRST STEP TOWARDS</h3>
     <h1>SUCCESS</h1>
     <h3 >Now Avaliable for Online Coaching</h3>
     <p>Book Now</p>
 </div>
</body>
</html>



body{
    background-image: url(../images/Mountain-Landscapes-14.jpg);
}
h3.top{
    font-family: 'Gill Sans', 'Gill Sans MT', 'Calibri', 'Trebuchet MS', sans-serif;
    font-weight: bolder;
    letter-spacing: 5px;
    padding-top: 35px;

}
h1{
    font-family: 'Gill Sans', 'Gill Sans MT', 'Calibri', 'Trebuchet MS', sans-serif;
    font-weight: bolder;
    letter-spacing: 13px;
    text-align: center;
    font-size: 164px;
    padding-top: 0px;
    margin-top: 0px;
    margin-bottom: 0px;
}
h3.bottom{
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    font-weight: 150;
    text-align: center;
    color: black;
    margin-top: 0px;
    letter-spacing: 3.5px;
}
p{
    color: white;enter code here
    text-align: center ;
    background: black;
}

CodePudding user response：

Can't really tell the dimension of the image you used here, but you can set it using background-size, set it to 100% 100% to fit the image's dimension to the container you're using. Then add background-repeat: no-repeat; to prevent the image from repeating. See the snippet below for your reference.

body {
  background-image: url(https://cdn.pixabay.com/photo/2018/02/12/08/33/abstract-3147697_960_720.jpg);
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

h3.top {
  font-family: 'Gill Sans', 'Gill Sans MT', 'Calibri', 'Trebuchet MS', sans-serif;
  font-weight: bolder;
  letter-spacing: 5px;
  padding-top: 35px;
}

h1 {
  font-family: 'Gill Sans', 'Gill Sans MT', 'Calibri', 'Trebuchet MS', sans-serif;
  font-weight: bolder;
  letter-spacing: 13px;
  text-align: center;
  font-size: 164px;
  padding-top: 0px;
  margin-top: 0px;
  margin-bottom: 0px;
}

h3.bottom {
  font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
  font-weight: 150;
  text-align: center;
  color: black;
  margin-top: 0px;
  letter-spacing: 3.5px;
}

p {
  color: white;
  enter code here text-align: center;
  background: black;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="style.css">
  <title>Document</title>
</head>

<body>
  <div >
    <h3  align='center'>AMBITION IS THE FIRST STEP TOWARDS</h3>
    <h1>SUCCESS</h1>
    <h3 >Now Avaliable for Online Coaching</h3>
    <p>Book Now</p>
  </div>
</body>

</html>

More on background-image here.

CodePudding user response：

I don't quite understand if you want text to be align on center or just stop it expands all the way left and right

but something like this .... also here's codepen demo for better viewing codepen

body{
    background-image: url(../images/Mountain-Landscapes-14.jpg);
}
h3.top{
    font-family: 'Gill Sans', 'Gill Sans MT', 'Calibri', 'Trebuchet MS', sans-serif;
    font-weight: bolder;
    letter-spacing: 5px;
    padding-top: 35px;

}
h1{
    font-family: 'Gill Sans', 'Gill Sans MT', 'Calibri', 'Trebuchet MS', sans-serif;
    font-weight: bolder;
    letter-spacing: 13px;
    text-align: center;
    font-size: 164px;
    padding-top: 0px;
    margin-top: 0px;
    margin-bottom: 0px;
}
h3.bottom{
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    font-weight: 150;
    text-align: center;
    color: black;
    margin-top: 0px;
    letter-spacing: 3.5px;
}
p{
color: white;
    background: black;
  
  margin: auto 0 auto 0; 
  /* top,right,bottom,left */
  width: 8%;
  display: block;
}

 <div >
     <h3  align='center'>AMBITION IS THE FIRST STEP TOWARDS</h3>
     <h1>SUCCESS</h1>
     <h3 >Now Avaliable for Online Coaching</h3>
     <p>Book Now</p>
 </div>