F. Kim F. Kim - 2 months ago 7
CSS Question

html and css background url image compacted

I created a web page image fills the screen 100%.

but, Problems occurred.

I want to fill up the picture on a Web page, as shown below:


background.png

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#section
{
margin-top:240px;
margin-left:140px;
padding:10px;
text-align:center;
}
#top-slogan
{
width:100%;
height:953px;
background: url('background.png') center;
}
#top-header
{
z-index:100;
position:absolute;
width:100%;
height:133px;
}
</style>
</head>
<body>
<div id="top-slogan" class="wrapper">
<div id="top-header" class="section">
</div>
</div>
</body>
</html>


The results came out, there are some problems.

Without being tightly filled, the image is repeated.

I want a solution.


I want delete "This part":

image

Answer

You can add this style 
#top-slogan{
background-repeat: no-repeat;
background-size : cover;
background position : center center;
}