Css Full Page Web Background Tutorial

Hi, welcome back to gusekacreations. Now I will show you simple tutorial about website background. Here I want to make a full page web background on my website. It’s simple to do that. In this tutorial, I am not use jquery. I am absolutely use css and foundation framework to do that. As you know, foundation framework is a family of responsive front-end frameworks that make it easy to design beautiful responsive websites, apps and emails that look amazing on any device. Ok let’s start.

First step, create index.html. and put html script below

<!doctype html>
<html class="no-js" lang="en">
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Cancer Research</title>
    <link rel="stylesheet" href="css/foundation.css" />
    <link rel="stylesheet" href="css/style.css" />
    <script src="js/vendor/modernizr.js"></script>

    <div class="large-12 columns wraplogo">
        <h3>GUS EKA CREATIONS <a href="http://gusekacreations.com" target="_blank">&rarr;</a></h3>
    <div class="wrapbanner"></div>
    <div class="banner"></div>


put foundation style on the header. Then put our custom style.css. This style will make our full page background is perfect. After that, create style.css file and put the script below

.wraplogo{ width: 100%; background: transparent; position: relative; z-index: 11; margin-top:25%;}
.wraplogo h3{ text-align: center; font-family: Arial; letter-spacing: 4px;  color:#fff; font-weight: bold;}
.wraplogo h3 a{ color:orange;}
.wraplogo img{ display: block; margin: 0 auto; padding:30px 0;}
.wrapbanner{ background: rgba(0,0,0,0.5); position: absolute;  z-index: 10;  width: 100%;   height: 100%; }
.banner{ background: url(../img/banner.jpg) no-repeat center center; background-size:cover; height: 100%; }

Make sure your folder structure like these


If not, you must change a little bit script in the css file. And done. Now you have full page background on your website. Have a look demo here.

Thank you!



Leave a comment

Get the latest update about web development.