Image occupying entire monitor

1

I got a code right here on SO that solved the problem I have, I'm trying to let the image fit the different resolutions of the monitors. The background is correct, the image is real size, but it has borders on the sides and I could not solve that detail.

What I have is this so far:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Café</title>

	<style>


	div{
		width:100%;
		height:1440px;
		padding-top: 0;
		padding-bottom: 0;
		padding-left: 0;
		padding-right: 0;
	}

	.minhaClass{
		background: url('imagens/fundo_cafe.png') no-repeat center center;
		-webkit-background-size: 100% 100%;
		-moz-background-size: 100% 100%;
		-o-background-size: 100% 100%;
		background-size: 100% 100%;
	}	


	</style>

</head>

<body>
	<div class="minhaClass"></div>
</body>
</html>

And the page can be seen at this link: Template page

    
asked by anonymous 27.06.2018 / 13:29

1 answer

2

By default the body tag comes with margin .

It's good to use the good old:

body{
   margin: 0px;
   padding: 0px;
}

Search for CSS Reset, Normalize. You'll find plenty of useful content.

    
27.06.2018 / 13:33