Ayuda com div y img src en header.php

[iristof]

Hola a Tod@s

Soy nuevo en este foro aunque llevo tiempo usando wordpress y necesito vuestra ayuda.

En el header.php he puesto este codigo:

<div class=»bg1″><img class=»mimagen» src=»<?php echo get_stylesheet_directory_uri(); ?>/images/bg13.png» /></div>

y con el css le doy estilo y funciona bien.

Pero lo que quiero es conseguir llamar a la imagen «bg13.png» desde el css
.bg1{background-image: url(‘images/bg13.png’); max-width:100%; }

y no lo consigo. Que codigo tengo que cambiar aqui:
<img src=»<?php echo get_stylesheet_directory_uri(); ?>/images/bg13.png» />
para que me añada la imagen del css que yo quiera

[iristof]

Disculpar con las prisas no me he despedido.

Muchas Gracias

Saludos

[Peter Olle]

Estas llamando a la imagen desde ambos lugares, tienes que hacerlo así.

Código:

<div class="bg1"></div>

CSS:

.bg1 {
	background-image: imagen.png;
}

Y así llamas a la imagen desde el CSS, no desde el código.

Saludos.

[iristof]

Muchas gracias por contestar, es verdad que en ejemplo que he puesto la llamo desde los dos sitios, pero en las pruebas que hago no, si la llamo desde el css elimino la etiqueta img src del php y viceversa. el problema es que llamandola solamente desde el
<div class=»bg1″></div> Pierde el formato adaptativo o responsive, y si la llamo con el
<img src=»<?php echo get_stylesheet_directory_uri(); ?>/images/bg13.png» /> me lo mantiene. Por eso me gustaria saber de que forma podria manipular <?php echo get_stylesheet_directory_uri(); ?>?«
para que me añada la imagen del css que yo quiera porque no va a ser una imagen estatica ofija.

Gracias nuevamente

Saludos

[Peter Olle]

El formato responsive se lo das con CSS también.

Saludos.

[iristof]

Ya lo se, ……. pero queria evitarlo.

Gracias

[Peter Olle]

No lo evites, para una imagen son dos lineas de CSS y te queda funcionando correctamente.

Saludos.

[iristof]

Gracias Peter

pero no tengo mucha idea de como adaptarla a cada dispositivo por ejemplo:

@media all and (max-width:650px) cuanto tengo que dejar de margen top, el padding y que altura tiene que tener para que se adapte al menu y parte del slide, etc…

Cuando trabajo con la pantalla de escritorio voy viendo los resultados de los cambios que realizo ¿pero como veo los cambios que estoy realizando en otros tipos de pantalla? Cuando quiero adaptar imagenes que no tienen que estar en una posicion exacta lo hago encogiendo y alargando «arrastrando» la ventana del navegador pero cuando la posicion tiene que ser exacta esa forma creo que no es valida.

Gracias nuevamente

[Peter Olle]

Puedes o verlos desde un móvil o redimensionar tu ventana del navegador. Otra opción es poner una extensión en tu navegador para que te presente todos los diferentes tipos de pantalla.

Como se trata de una imagen de fondo, supongo que lo que buscas es un porcentaje y puedes usarlo, por ejemplo width:100%; te cubrirá siempre la ventana sin importar en que la visites.

Saludos.

[iristof]

Hola nuevamente

El problema es que no es una imagen de fondo, bueno, si pero no, por que esta un poco mas arriba de la mitad de la pagina verticalmente ocupando el max-width:100%; y entre el principio y el final de esta imagen esta el menu y un slider. La separacion top es 250px o 10%, etc…

Gracias y saludos

[iristof]

Doy el tema por acabado, porque llevo 3 días estancado con esta mier.. dandole vueltas. Voy hacer todo desde el css y me quito de problemas.

Muchas Gracias por tu ayuda.

Saludos

[Peter Olle]

De nada 🙂