Sun. Oct 1st, 2023

[ANSWERED] html – how to get heading,subheading,search bar over image at centre

By

Nov 18, 2022 css, html, twitter-bootstrap

Solution 1 :

body{
                margin: 0;
                padding: 0;
            }
            .banner{
                background-image: url(https://i.picsum.photos/id/104/1080/1080.jpg?hmac=Brz_-6-VYsQ9KEX9MY1WI7kPaC0MO5piVgpn3vbWD34);
                background-color: #cccccc;
                background-repeat: no-repeat;
                background-size: cover;
                background-position: center;
                height: 500px;
            }
            .banner_text{
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                height: 100%;
            }
            h1{
                margin: 0;
                font-size: 48px;
            }
            p{
                font-size: 18px;
                margin-top: 30px;
            }
            .search_outer{
                margin-top: 10px;
            }

<html>
    <body>
        <div class="banner">
            <div class="banner_text">
                <h1>Welcome to Qtrip</h1>
                <p>Explore the world with fantastic places to venture around</p>
                <div class="search_outer">
                    <label>Search</label>
                    <input type="text">
                </div>
            </div>
        </div>
    </body>
</html>

You can achieve this result with the help of the display flex property.

Solution 2 :

This question is already answered.
Duplicate to this

Copied to mr.lazy

You can use display: flex

.container{
  display: flex;
  flex-direction:column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

<div class="container" style="margin-top: 8%;">
       <div class="col-md-6 col-md-offset-3">     
        <div class="row">
              <div id="logo" class="text-center">

              <h1>Movie</h1>
       
              </div>
           <form role="form" id="form-buscar">
             <div class="form-group">
               <div class="input-group">
                 <input id="1" class="form-control" type="text" name="search" placeholder="Search..." required/>
                 <span class="input-group-btn">
                   <button type="button" class="btn btn-outline-primary">search</button>
                   <i class="glyphicon glyphicon-search" aria-hidden="true"></i>
                 </span>
               </div>
             </div>
          </form>
         </div>            
       </div>
       <p>movie!</p>
    </div>

Problem :

How can I place heading , subheading and search bar at the center of the image

.hero-image {
  background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("/assets/hero.jpg");
  height: 350px;
  background-position: center;
  background-size: cover;
}

<h1>Welcome to QTrip</h1>
<h2>Explore the world with fantastic places to venture around</h2>
</div>

Comments

Comment posted by isherwood

You seem to have clipped some of your HTML. Please fix it.

Comment posted by isherwood

Duplicates should be flagged as such, not re-answered. Also, don’t call people names.

By

Related Post

[ANSWERED] How do you add a background image in the margins and top of the page behind the body? (Html, Css)

Nov 20, 2022

[ANSWERED] html – I can’t get my carousel buttons to respond bootstrap 4

Nov 20, 2022

[ANSWERED] javascript – Locomotive Scroll not working with Vue.js when having to load images on page

Nov 20, 2022