I am learning CSS so apologies if I made silly mistakes
Whenever I try to scroll, the image doesn’t stay fixed and the image doesn’t centre itself either.
Any idea what I did wrong?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#photo{
background-position: right;
background-attachment: fixed;
width:30px;
}
.body{
width: 500px;
height: 5000px;
border: 2px solid red;
}
</style>
</head>
<body>
<main class="body">
<div >
<img src="Wikipedia_logo].png" alt="logo" id="photo">
</div>
</main>
</body>
</html>
I wanted the logo to stay fixed and be at the centre
2
Answers
try changing width to a bigger number
The properties you are using apply to CSS background-images.
The element you are targeting is a foreground image element.
The closest thing CSS has for foreground images is fixed positioning with the
positionproperty in conjunction withtop/left/bottom/right.