The first commenter was right, but you need to use it like this:
.header{
background: url(images/Group2264.svg) no-repeat;
background-size: cover;
position: absolute;
width: 100%;
height: 100%;
left: 0px;
top: 0px;
}
Solution 1 :
Solution 2 :
background-size: cover; : “sets the size of the element’s background image” – MDN.
OR
width: 100%; : to fill up the parent 100%, width wise. (very pseudo responsive)
height: 100%; : to fill up parent 100%, height wise. (very pseudo reponsive)
Problem :
I am writing a website and I have a problem. The background picture is not enlarged.
Here is a picture:
HTML:
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="reset.css">
</head>
<body>
<header class="header">
</header>
<main>
</main>
<footer>
</footer>
</body>
</html>
CSS:
.header{
background: url(images/Group2264.svg) no-repeat;
position: absolute;
width: 3000px;
height: 2000px;
left: 0px;
top: 0px;
}
Help me with this please!
Comments
Comment posted by corn on the cob
background-size: cover should help
Comment posted by Andy Hoffman
Some explanation would help improve this answer.