0

sass

div

margin: 10px auto
width: 100%
max-width: 720px
min-width: 240px
background-image: url(..imagenes/img1.jpg)

jquery

var anchoS=($("div").width())*0.75;
$("div").css("height",anchoS);
$(window).resize(function(){
    anchoS=($("div").width())*0.75;
    $("div").css("height",anchoS);
});

Quiero hacer un div con fondo que sea responsive probé con todo hasta poniendo 'imagenes/img1.jpg' en lugar de los 3 puntos y nada como hago para colocar una imagen de fondo en ese div, con esas dimensiones.

1
  • revisa bien la ruta de tu imagen, y me parece que tienes un error al momento de retroceder en la carpeta tienes url(..imagenes/img1.jpg) y seria url(../imagenes/img1.jpg), tambien revisa la extension de tu imagen que puede que no sea .jpg si no otra Commented el 29 dic. 2017 a las 1:10

1 respuesta 1

0

1) Revisa la ubicación de la imagen, recuerda que el background-image toma la url (sin usar frameworks) justo desde donde tienes el archivo de css con ese estilo. Por lo que si tienes una estructura de carpetas como la siguiente:

Proyecto
  -imagenes
     --img1.jpg
  -CSS
     --estilos.css
  -JS 

Debes tener cuidado con la ruta que vas a colocar. Fijate que si estas en estilos.css debes subir un nivel (para estar a la altura de imagenes) y luego entrar en imagenes para poder seleccionar img1.jpg por lo que la ruta quedaría así:

background-image: url(../imagenes/img1.jpg)

Recuerda que "../" sirve para subir un nivel en el directorio de tu proyecto.

2) Por otra parte ubica la imagen, abre el archivo y asegurate que es formato "jpg" y no "jpeg" o "png" o algún otro porque esto influye y si colocas el equivocado no se seleccionará la imagen y por lo tanto no podrás observarla como fondo del div. Así que si tu imagen es por ejemplo "png" al final de la url debe ser img1.png y no img1.jpg

3) Para el responsive te recomendaría que utilices algún framework front-end. Ya que te simplificará enormemente el trabajo de cara al diseño responsive. Si sigues creando el responsive "manual" perderás mucho tiempo codificando en jquery y diseñando media queries.

Bootstrap es un framework perfecto para el diseño responsive, es facil de instalar y esta conformado de una hoja de estilos (.css) y un archivo javascript (.js). Te recomiendo un framework porque la imagen de fondo no será lo único que deberás o desearás colocar responsive... Para que se pueda ver correctamente en tabletas y telefonos móviles todo debe ser responsive. Los inputs, las tablas de resultados... cada uno de los elementos visuales de los formularios deberá poseer esta característica. Puedes leer sobre bootstrap y descargarlo en la página oficial de bootstrap

Espero haberte ayudado. Un saludo!

2
  • utilice bootstrap y lei por encima los css, no entiendo cual fue el error pero funciono jaja gracias en serio, pero yo lo tenia escrito url(..imagenes/img1.jpg) y no me funcionaba pero ahora si.. x.x
    – Novato
    Commented el 29 dic. 2017 a las 16:39
  • No hay problema. Un saludo!
    – Eztronics
    Commented el 29 dic. 2017 a las 16:44

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.