Background image and Content alignment in web design

Here we are going to explain three CSS style methods for Background image and background color alignment in web design.

• Padding top and bottom
• Padding-bottom
• Height

Method 1: Padding top and bottom

To align the background image we have “padding top and padding bottom” for top and bottom alignment. If the proper padding is set, the content we have used will come in screen center. But to alter the content position according to our design, we have used spaces on both left and right side of the content using “ max-width and margin  0 auto “.

Sample code in HTML

<div class="banner">
      	<div class="banner_inner">
      	<h1>What is Lorem Ipsum?</h1>
      	<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</p>
      	</div>
</div>

CSS code

.banner {
  background-color: orange;
  padding:100px  0;
}
.banner_inner {
  max-width: 700px;
  margin: 0 auto;
  font-size: 20px;
}
.banner_inner h1 {
        font-size: 45px;
  padding-bottom: 15px;
}

Method 2 : Padding-bottom

Another method is using “padding-bottom” style to background image. We have to assign a padding-bottom value based on height and width of the design. Once it is implemented we have to align the content because the content position will be same as before. For that we have used “ position : absolute “  for middle alignment,  left and right spaces for center. If you have used background color instead of image giving padding-bottom itself enough.

Sample code in HTML

<div class="banner">
    <div class="banner_inner">
    <h1>What is Lorem Ipsum?</h1>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</p>
    </div>
</div>

CSS code

.banner {
    background-color: orange;
    padding-bottom: 26.20%;
    position: relative;
}
.banner_inner {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    max-width: 700px;
    margin: 0 auto;
    font-size: 20px;
    left: 0;
    right: 0;
}
.banner_inner h1 {
    font-size: 45px;
padding-bottom: 15px;
}

Method 3: Using Height

By assigning values using style “height” according to design, the background image will be aligned. And for content alignment “ display:flex “  and  “ align-item:center “  is used.

Sample code in HTML

<div class="banner">
   <div class="banner_inner">
   <h1>What is Lorem Ipsum?</h1>
   <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</p>
   </div>
</div>

Css code

.banner {
    background-color: orange;
    min-height: 300px;
    display: flex;
    display: -webkit-flex;
    		align-items: center;
   	 	-webkit-align-items: center;
   		justify-content: center;
  	 	-webkit-justify-content: center;
}
.banner_inner {
    padding: 50px;
    font-size: 20px;
}
.banner_inner h1 {
    font-size: 45px;
    padding-bottom: 15px;
}