Hello friends! After long I though to write a post. Sorry for not posting for a while. Today I thought to write some new posts related to development side. I have wrote many articles about theory topics. Also I had a thought to write few development posts for newbies for development. So today we are going to see How to create web page with no vertical scroll.
In web application development there are front end and back end development. Most people think back end development is harder and front end development is easier. But my idea is little bit different. Actually back end is not easy to learn but once you learn it properly it is easy to execute. In front end there are so many things you have to learn. Without learning them you can’t design a proper nice designs. In back end you can just copy or paste the codes. But if you do it in front end your entire design will be changed. Back end codes have the logics and it is not visually affected. Yet frond end codes are. So you need proper learning in front end designing to design a nicer websites. There are no any fast rules for learning it you have to understand the designing techniques one by one.
If you like to be a front end designer it is better you learn bootstrap and CSS. There are many designing frame works available. Yet before all of them you can design nice things just with CSS and Bootstrap. It’s better you learn CSS properly. Now let’s turn to today’s development design.
Today we are going to design a web page with no vertical scroll. There is a background image and that background image is fit to the screen width. So there will be no vertical scroll.
Post Outline
- Tools and Technologies
- Code for developing web page with no vertical scroll
- HTML code for the development
- CSS code for the development
- Code explanation
- Conclusion
Tools and Technologies
Today for this project we need few tools and technologies. Before starting you should have these things in your computer.
- XAMPP Server
- A text editor
- Bootstrap
Code for developing web page with no vertical scroll
HTML code for web page with no vertical scroll
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="bootstrap-4.1.3/css/bootstrap.min.css" >
<link rel="stylesheet" href="fontawesome-5.6.0/css/all.css" >
<link rel="stylesheet" href="css/styles.css">
<link rel="stylesheet" href="scripts/jquery-ui-1.12.1/jquery-ui.css">
<link rel="stylesheet" href="dataTables/datatables.min.css">
<!-- Custom styles for this template-->
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="scripts/jquery-3.3.1.min.js" ></script>
<script src="scripts/jquery-ui-1.12.1/jquery-ui.js" ></script>
<script src="scripts/popper.min.js" ></script>
<script src="bootstrap-4.1.3/js/bootstrap.min.js" ></script>
<script src="scripts/sweetalert.min.js" ></script>
<script src="dataTables/datatables.min.js"></script>
<title>Hello, world!</title>
</head>
<body>
<div class="container-fluid background-img"></div>
<div class="container content">
<h1>Welcome to the tutorial</h1>
<h2>Sub content places over the image</h2>
</div>
</body>
</html>
CSS code for web page with no vertical scroll
.background-img{
background-image: url("../images/img5.jpg");
position: absolute;
height: 100vh;
opacity: 0.6; /*add opacity to the image*/
background-size: cover; /*this will fit image to the screen*/
}
.content{
position: absolute;
}
Code explanation
Here we have use bootstrap to create the grid view. With bootstrap you can easily create the grid view. Container-fluid class will create a adjustable container with the layout. If we put second content div also inside the first division, then the content also will be transparent. If you want text also to be transparent then you can put that div inside background-img div. By removing opacity you can remove the transparency. With 100 vh it is adjusting to the screen size. Vh means the view height. This is not the only way to build this. There are several other ways. If you put the content div inside background div is also a possible scenario. Then you can remove some absolute positions and try. It will work. As I said before in that case you can’t use the opacity for that.
Conclusion
I hope you understand the content which I brought through this post. We will discuss many design techniques like this. If you found this was helpful please don’t forget to share, comment. There are so many development tutorials available in this site. If you interested please read how to create a search box with overlap button at end. We will meet soon. Until good bye all!
Hi a awesome article. Well explained. If you can please give some tutorials about jquery validation plugin also. Thanks
Thanks so much Dihansa. Yah sure we will write a post about jquery validation plugin tutorials. Keep reading our posts.
I really like your blog.. very nice colors & theme. Did you make this website yourself or did you hire someone to do it for you? Plz answer back as I’m looking to design my own blog and would like to know where u got this from. thanks a lot
No this is by myself.