Stylish Call to Action Snippet with Background Image Using Bootstrap 5

Enhance your website with this stylish call to action snippet featuring a background image, built with HTML, CSS, and Bootstrap 5. Perfect for modern web designs.

HTML

CSS

#fws_call_to_action_3{
     padding: 80px 0;
     background: url(https://freewebsnippets.com/public/frontend/snippet_img/banner-1.jpg);
     background-size: cover;
     background-repeat: no-repeat;
     position: relative;
}
 #fws_call_to_action_3:after{
     content: "";
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: rgba(0, 0, 0, 0.8);
     pointer-events: none;
}
 #fws_call_to_action_3 .fws_content{
     color: #fff;
     text-align: center;
     position: relative;
     z-index: 1;
}
 #fws_call_to_action_3 .fws_des h2{
     text-transform: capitalize;
     margin-bottom: 20px;
}
 #fws_call_to_action_3 .fws_des p{
     margin: 0 auto 40px;
     max-width: 70%;
     color: #cfcfcf;
}
 #fws_call_to_action_3 .fws_btn a.btn{
     background: #cfcfcf;
     color: #000;
     border-radius: 0px;
     padding: 10px 25px;
     font-weight: 500;
}
 #fws_call_to_action_3 .fws_btn a.btn.about{
     background: transparent;
     color: #fff;
     border-color: #fff;
}
 #fws_call_to_action_3 .fws_btn{
     margin-top: 20px;
}
 @media (max-width: 767.9px){
     #fws_call_to_action_3 .fws_des p{
         max-width: 100%;
    }
     #fws_call_to_action_3 .fws_btn a.btn.about{
         margin-right: 5px !important;
    }
}

JS

Width:

Height:

This stylish call to action (CTA) snippet is designed to grab attention and drive user engagement with its striking background image and modern design. Developed using HTML, CSS, and Bootstrap 5, the snippet features a full-width background image that creates a visually impactful backdrop for your call to action. The overlay adds a subtle dark tint, ensuring that the text and buttons stand out clearly against the image. The centered content, including a compelling headline and descriptive text, draws the user's eye directly to the message you want to convey. The CTA buttons are prominently placed, encouraging users to take action, whether it’s learning more about your services or getting in touch with you. This snippet is fully responsive, adapting beautifully to different screen sizes, making it a perfect fit for any device. The design is also highly customizable, allowing you to change the background image, text, colors, and button styles to align with your brand’s aesthetics. Ideal for landing pages, promotional banners, or any section of your website where you want to inspire action, this CTA snippet will elevate your web design to the next level.