Background image and Content alignment in web design

May 25, 2018
Here's What you'll Learn

Hello designing folks, a small piece of code work which is definitely going to help you people in designing. In this article let us discuss about the background image and content alignment using HTML and CSS.

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;
}

 

HOW MUCH DOES YOUR PROJECT COST?
CALL WRITE CHAT

Call us

Mon-Fri 10am to 8pm IST

+91 984 353 7293
+91 989 446 7237 +91 995 228 9519

Leave Your Phone No

and we will contact you for details about your project.


Let’s talk about your project

Get a free, tailor-made project estimation in a business day


Book your FREE 30 minutes consultation with