How to Add a Background Image to Your Startup Template

A background image can be used to enhance the aesthetics and overall branding of a website. This article will show you how to add background images to your Startup website and customize them to your needs.

Adding a Background Image

To start off, we have the above section of a webpage which we’ll be adding a background image to. Below is its code:

<!-- Feature 2 -->

<section class="pt-105 pb-45 bg-light text-center feature_2">
  <div class="container px-xl-0">
    <div class="row justify-content-center">
      <div class="col-xl-8 col-lg-10">
        <h2 class="small" data-aos-duration="600" data-aos="fade-down" data-aos-delay="0">Startup Framework</h2>
        <div class="mt-35 mb-65 f-22 color-heading text-adaptive description" data-aos-duration="600" data-aos="fade-down" data-aos-delay="300">
          The most important part of the Startup Framework are the samples or 
          Bootstrap themes and templates. The samples consist of a set of few 
          pages you can use «as is» or add new blocks from UI Kit.</div>
      </div>
      <div class="col-xl-10">
        <div class="row justify-content-center">
          <div class="mb-50 col-md-4 col-sm-8" data-aos-duration="600" data-aos="fade-down" data-aos-delay="600">
            <div class="mb-20 f-18 medium title">For Freelancers and <br />Agencies</div>
            <div class="color-heading text-adaptive">
              Pay once and it’s yours forever. Use <br />
              it to build as many sites as you <br />
              need; long form, presentations, <br />
              splash sites, and more.</div>
            <a href="#" class="mt-30 btn sm w-40 border-transparent-main"><i class="fas fa-angle-right"></i></a>
          </div>
          <div class="mb-50 col-md-4 col-sm-8" data-aos-duration="600" data-aos="fade-down" data-aos-delay="900">
            <div class="mb-20 f-18 medium title">Cmd + C / Cmd + V</div>
            <div class="color-heading text-adaptive">
              Edit content in a comfortable <br />
              manner. It’s as simple as copy <br />
              and paste.</div>
            <a href="#" class="mt-30 btn sm w-40 border-transparent-main"><i class="fas fa-angle-right"></i></a>
          </div>
          <div class="mb-50 col-md-4 col-sm-8" data-aos-duration="600" data-aos="fade-down" data-aos-delay="1200">
            <div class="mb-20 f-18 medium title">Full Control</div>
            <div class="color-heading text-adaptive">
              Easily change and tweak your <br />
              content when you need to, <br />
              however you want. No more third <br />
              party vendor lock-in.</div>
            <a href="#" class="mt-30 btn sm w-40 border-transparent-main"><i class="fas fa-angle-right"></i></a>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

To add a background image to the section, add the following CSS styling to it.

<section class="pt-105 pb-45 bg-light text-center feature_2">
  <style>
    .feature_2{background-image:url(i/bg.jpg);}
    @media(-webkit-min-device-pixel-ratio: 1.25), (min-resolution: 120dpi){
      .feature_2{background-image:url(i/bg@2x.jpg);}
    }
  </style>
  <div class="container px-xl-0">
  ...
  </div>
</section>

If you prefer, you can include the CSS styles in the css/style.css file, but we include them in the HTML file for consistency. Wherever we have background images in our Startup templates, we’ve included the CSS styles together with the markup that the styles refer to, for easier editing.

The style targets the <section> by using its feature_2 class, then adds a background image to it with the background-image CSS property. We specify the URL to the image, which we’ve added to the i folder. Notice that we’ve specified two images—bg.jpg and bg@2x.jpg. Startup uses 2 versions of images—regular and 2x for high-resolution retina displays.

Though optional, it is recommended that you provide both versions for every image added. If your template only has the lower resolution “regular” image, it will look great on lower resolution devices, but blurry on high-resolution retina devices. If you only use a high resolution “2x version”, then the image will look great on all devices, but the disadvantage of this is the unnecessary bandwidth usage that users using low-resolution devices have to go through downloading the high-res image when a low resolution one would have sufficed. You should always try to keep your website lean for better load speeds and user experience.

If you’d rather use only one version, then leave out the second part:

<section class="pt-105 pb-45 bg-light text-center feature_2">
  <style>
    .feature_2{background-image:url(i/bg.jpg);}
  </style>
  <div class="container px-xl-0">
  ...
  </div>
</section>

If you refresh the webpage in the browser, you’ll see the background image.

Adding a dark background to the section has made its text harder to read. You can increase its contrast to the background by making the text color lighter. You can, for instance, add the color-white class to the text to make it white. To find out other available classes that we use in Startup, you can refer to the classes guide.

<h2 class="small color-white" data-aos-duration="600" data-aos="fade-down" data-aos-delay="0">Startup Framework</h2>
<div class="mt-35 mb-65 f-22 color-white text-adaptive description" data-aos-duration="600" data-aos="fade-down" data-aos-delay="300"></div>
<div class="mb-20 f-18 medium title color-white">For Freelancers and <br />Agencies</div>
<div class="color-white text-adaptive"></div>
<a href="#" class="mt-30 btn sm w-40 border-white"><i class="fas fa-angle-right color-white"></i></a>
<div class="mb-20 f-18 medium title color-white">Cmd + C / Cmd + V</div>
<div class="color-white text-adaptive"></div>
<a href="#" class="mt-30 btn sm w-40 border-white"><i class="fas fa-angle-right color-white"></i></a>
<div class="mb-20 f-18 medium title color-white">Full Control</div>
<div class="color-white text-adaptive"></div>
<a href="#" class="mt-30 btn sm w-40 border-white"><i class="fas fa-angle-right color-white"></i></a>

We add the color-white class to the text and use border-white to make the borders of the circular buttons at the bottom of the section white.

The text is a bit more readable, but we can improve it further. In the next section, we’ll add a color filter to the background to increase its contrast to the text in the foreground.

Adding Color Filters to Elements With a Background Image

You can add light or dark color filters to elements that have a background image. Simply add a color-filter-[type]-[intensity] class to the element.

• Filter type: It can be dark (puts an overlay over your image that has a bg_dark color) or light (puts an overlay over your image that has a bg_light color).
• Filter intensity: The value range is 1-9. The higher value gives a stronger filter effect.

The colors set by using bg_light and bg_dark are determined by the colors you selected for your template using the Color Tool:

The Background row sets colors that will be used for dark (1st option) and light (2nd option) backgrounds. If you want to customize the colors in your exported Startup template, check out our guide.

Below are different color filter settings used on a background.

On our template, let’s add the color-filter-dark-5 class to the section.

<section class="pt-105 pb-45 bg-light text-center feature_2 color-filter-dark-5">

Here’s the result. It looks much better.

Using Gradients

Other than images, you can also set a gradient that will be used for the background. Technically speaking, gradients are just another form of a background image. The difference is that the browser makes the image for you.

There are different types of gradients you can use: linear-gradient, radial-gradient, conic-gradient, repeating-linear-gradient, repeating-radial-gradient, repeating-conic-gradient.

Here’s an example of a linear gradient that goes from #2F1893 to white.

<section class="pt-105 pb-45 bg-light text-center feature_2">
  <style>
    .feature_2{background: linear-gradient(#2F1893, #ffffff);}
  </style>
  ...
</section>

Here’s the result of that:

You can provide a direction for the gradient:

<section class="pt-105 pb-45 bg-light text-center feature_2">
  <style>
    .feature_2{background: linear-gradient(to top, #2F1893, #ffffff);}
  </style>
  ...
</section>

Now it starts from bottom to top.

Below, we use a radial gradient:

<section class="pt-105 pb-45 bg-light text-center feature_2">
  <style>
    .feature_2{background: radial-gradient(circle, #2F1893, #ffffff);}
  </style>
  ...
</section>

Here’s the result:

The examples above use only one gradient, but you can also layer multiple gradients on top of each other. You can create some pretty amazing patterns with this technique. You can find out more on gradients from here and here.

Multiple Background Images

You can use multiple images, or a mixture of images and gradients, for your background to create cool effects. For example:

<section class="pt-105 pb-45 bg-light text-center feature_2">
  <style>
    .feature_2{background-image: url(logo.png), url(background-pattern.png);}
  </style>
  ...
</section>

You can look at this example to see this technique at play.

Setting a Fallback Color

It is recommended that you include a background color when using background images and gradients. If a background image fails to load, or your gradient background is viewed on a browser that doesn’t support gradients, the browser will use the background color as a fallback.

<section class="pt-105 pb-45 bg-light text-center feature_2">
  <style>
    .feature_2{background:url(i/bg.jpg) #2F1893;}
    @media(-webkit-min-device-pixel-ratio: 1.25), (min-resolution: 120dpi){
      .feature_2{background:url(i/bg@2x.jpg) #2F1893;}
    }
  </style>
  <div class="container px-xl-0">
  ...
  </div>
</section>