CSS centering background image

Question

I' m building a project whit a background image, but I can't completely center the image like in this photo . What I managed to do is this , 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.

Answer 1

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>

CSS centering background image

Question

1 answers

solution1
0 2021-12-26 21:22:52

try using `background-position-y` property

add some code

or (with less code)

CSS centering background image

Question

1 answers

solution1 0 2021-12-26 21:22:52

try using background-position-y property

add some code

or (with less code)

solution1
0 2021-12-26 21:22:52

try using `background-position-y` property