Image occupying the entire monitor

Asked

Viewed 27 times

1

I got a code right here on SO that largely solved the problem I have, I’m trying to let the image fit to various monitor resolutionssm the background is correct, the image is life size, but it gets edges on the sides and could not solve this 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 in this link: Template page

css

1 answer

2


By default the tag body comes with margin.

It’s good to use the good old:

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

Search for CSS Reset, Normalize. You will find plenty useful content.

  • Helped a lot @Diego Souza, thanks.

Browser other questions tagged css

You are not signed in. Login or sign up in order to post.