The header matched to the fullscreen

The header matched to the fullscreen

How to prepare a the header matched to the fullscreen? There are many solutions for this task and much better or worse end effects. Each that satisfies the assumptions of the author, it may be sufficient. The following entry shows how to create a container <div>, the size of any browser window on your computer, tablet or smartphone. By placing such a container as the first under the <body> tag has the effect of a full window after the page is opened. As a background, you can use an image, video or gif, and in the foreground put menu. An important element of this solution is that the background will be matched to the window, cutting off its extreme parts, and the container <div> will move in its entirety. An example of such a solution is a page PerfectSoft or relaksowanie.pl.

Needed elements of code

The whole consists of small blocks of code, which for clarity will be provided in separate files. The first will be presented html code that attaches files css and javascript, and in the body section shows the container header (“large-header”) and the container text in the rest of the page (“outside_header”). Starting file “demo.js” must be found for container “large-header” because it was there defined function and its call. This allows you to run it as soon after the formation of the container, but it can be changed freely, without compromising the functionality of the code.

<!DOCTYPE html>
<html lang="pl">

<head>
	<link rel="stylesheet" type="text/css" href="css/component.css" />
	<link rel="stylesheet" type="text/css" href="Style.css" media="screen" />      
</head>

<body>

	<div id="large-header" class="large-header">
		<!--  The contents matched header -->  
	</div>
	<script src="js/demo.js"></script>


	<div id="outside_header">

		<br><br>
		"PerfectSoft"
		<br><br>
		The ideal solution for companies
		<br><br>

	</div>

</body>
</html>

 

In the file “style.css”, the most important is to put the record “margin: 0;” for the body tag. Apart from this entry will not be possible to achieve full-screen, as will be included by default margins. It is also appropriate to extend this record of other tags that should not have margins or frames. An example of file write:

body, div, h1, h2, h3, h4, h5, h6, p, ul, ol, li, dl, dt, dd, img, form, fieldset, blockquote {
	margin: 0; padding: 0; border: 0;
}

 

File “component.css” was prepared for the determination of the container header (“large-header”).

/* Header */
.large-header {
	position: relative;
	width: 100%;
	overflow: hidden; /*Hides the contents of the container if it is larger than the browser window */
	background-size: cover;	background-position: center center; /*Display the background without repetitions and adjusts its central part*/
	z-index: 1;/*index will manage the visibility of elements in a container*/
}

.large-header {
background-image: url('../img/XYZ.jpg');
}

 

The last file is “demo.js.” It’s the function is called regulating the size of the container header (“large-header”).

(function() {
    var width, height, largeHeader, target;

//It is necessary to call function
    assignHeader();

//Definition of the functions
    function assignHeader() {
        height = window.innerHeight;

        largeHeader = document.getElementById('large-header');
        largeHeader.style.height = height+'px';
    }
})();

The first stores in the variable height of the window, because the width of the match thanks to an entry in the css (“width: 100%;”). For this purpose is the “innerHeight” which has the width of the window without the various types of sliders and other features – inner window itself. In the present case, this is crucial, because the field “Height” – giving the full width of the window, there would check on some devices.
Then the variable “largeHeader” is assigned to the container by its id and using the properties assigned is obtained before the window width.

Loading Facebook Comments ...

Leave a Reply

Or