0
185
ViewsCSS centering background image
I' m building a project whit a background image, but I can't completely center the image like in this
My goal is
What I managed to do is
as you can see the image is not completely vertically centered and if I resize the screen the pencil tends to disappear.
Here is the image in question.
Here the CSS code:
.app {
height: 100%;
background: url('./background.jpg') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
I thank anyone who can help me.
.app {
height: 100%;
background: url('https://laaouatni.github.io/w11-clone/images/1dark.jpg') no-repeat center center fixed;
background-size: cover;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body class="app">
</body>
</html>1 answers
Answer question0
try using background-position-y property
actually your background is centered, but the pen in the picture is not centered
add some code
so you can decrease the number in the background-position-y something like -10em looks good in my computer
position-y is like translateY but for background (is for moving the background vertically)
or (with less code)
or for good results use PHOTOSHOP and crop the space on top, to make the image centered, then put it in HTML
I know is not the best, but if you want less code ¯_(ツ)_/¯ and responsive
.app {
height: 100%;
background-image: url('https://i.ibb.co/pWsFM5S/background.jpg');
background-repeat: no-repeat;
background-position: center;
background-size: cover;
background-attachment: fixed;
background-position-y: -10em;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body class="app">
</body>
</html>