Un usuario preguntó 👇
Estoy desarrollando un sitio web con un banner grande que se muestra de manera diferente en cada página. La imagen de fondo no se muestra cuando coloco la imagen de fondo en el selector de página, pero funcionará en el código de banner CSS principal.
Esto es para mi sitio de wordpress (WordPress 5.2) que ejecuta un tema totalmente personalizable que desarrollé desde cero. Versión de PHP en ejecución: 7.0.33.
Estos son los elementos básicos de la SEC que estoy escribiendo. Ahora he decidido mostrar solo un color de fondo (mi objetivo es poder mostrar una imagen):
.page-id-15 .bannerImage { background: #35CC4B!important; }
También probé (en caso):
.postid-15 .bannerImage { background: #35CC4B!important; }
Verifiqué la identificación de página / publicación correcta de 15 (sé que es una página).
Puse la imagen / color de fondo en .bannerImage y se muestra como se esperaba, no quiero el mismo color / imagen en todas las páginas de mi sitio.
No estoy seguro de qué más probar. Esto debería ser fácil.
Aquí está mi código: /// Esto mostrará una imagen de fondo y / o color ///
.bannerImage {
/* Set a specific height */
height: 337px;
/* Position and center the image to scale nicely on all screens */
background-position: left;
background-repeat: no-repeat;
background-size: cover;
position: relative;
} /// Esto no mostrará una imagen de fondo y / o color (mostrando el estilo de color) ///
.page-id-15 .bannerImage { background-color: #35CC4B; }
.postid-15 .bannerImage { background-color: #35CC4B; }
/// HTML Code ///
<div class="bannerImage">
<h2>Contact Us</h2>
</div>/// URL de administrador de Word Press para mostrar la página / número de publicación correcta ///
/~naiedmon/wp-admin/post.php?post=15&action=edit
/// URL ///
Espero ver un banner de 337 px de alto con un ancho 100% diferente en cada página. Lo que realmente veo es un espacio en blanco oxidado con el H2 mostrando. Chrome solo genera el selector .bannerImage y no el selector .page-id-15 .bannerImage o .postid-15 .bannerImage.
A continuación publiqué el código que veo cuando miro las Herramientas para desarrolladores de Chrome. Contrariamente a las sugerencias con las que estoy completamente de acuerdo que debería funcionar (lo intenté), el navegador no lee mi etiqueta de selector de .page-id-15 .bannerImage {} y la muestra. También probé .postid-15 .bannerImage {}. Aquí es donde me dejó.
Captura de pantalla del código de las herramientas para desarrolladores de Chrome
(@markrh)
Hace 1 año, 9 meses
Esa página me parece buena: https://i.imgur.com/5E3PS0Q.png
Esta parece ser la ID de página 394. ¿Cuál es la URL de la ID de página 15?
Ups, lo tengo. Olvidé que cambié la página que estaba viendo. De todos modos, se ve genial: https://i.imgur.com/7iXTUoD.png
Esta respuesta fue modificada hace 1 año, 9 meses.
(@crouchingbruin)
Hace 1 año, 9 meses
El principal problema es que no está llamando a la función body_class () en su tema. Cuando haga eso, las clases de cuerpo correctas (como page-id-15, etc.) estarán relacionadas con el elemento del cuerpo. En este momento, tu aspecto físico se ve así:
<body class="topgradient">
Si cambia su sitio a otro tema de WordPress y luego explora la función física, verá cómo se ve.
Lanzador de hilos
(@ kimberlym1)
Hace 1 año, 9 meses
¡Gracias!
¡Sabía que sería algo obvio! Tenía la función entonces, pero no tengo idea de por qué también llamé class = «body» y aparentemente estuve atento a lo que hice.
¡Gracias por ver esto con nuevos ojos para mí!
¿Solucionó tu problema??
0 / 0