0
191
VistasImagen de fondo de centrado CSS
Estoy construyendo un proyecto con una imagen de fondo, pero no puedo centrar completamente la imagen como en este
Mi meta es
Lo que logré hacer es
como podéis ver la imagen no está completamente centrada verticalmente y si cambio el tamaño de la pantalla el lápiz tiende a desaparecer.
Aquí está la imagen en cuestión. 
Aquí el código CSS:
.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; }Agradezco a quien pueda ayudarme.
.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 Respuestas
Responde la pregunta0
intente usar la propiedad background-position-y
en realidad, su fondo está centrado, pero el bolígrafo en la imagen no está centrado
agregar algo de código
para que pueda disminuir el número en la background-position-y algo como -10em se ve bien en mi computadora
position-y es como translateY pero para el fondo (es para mover el fondo verticalmente)
o (con menos código)
o para obtener buenos resultados, use PHOTOSHOP y recorte el espacio en la parte superior, para centrar la imagen, luego póngala en HTML
Sé que no es el mejor, pero si quieres menos código ¯_(ツ)_/¯ y receptivo
.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>