Cómo insertar una imagen de fondo ajustable al tamaño del monitor en una plantilla

  • Autor Autor Tony69Osuna
  • Fecha de inicio Fecha de inicio
T

Tony69Osuna

Curioso
¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!
Hola buenas noches amigos del foro .
necesito de su ayuda para insertar una imagen de fondo en una plantilla para que se ajuste automaticamente al tamaño del monitor .
desde ya muchas gracias, espero de su valiosa colaboracion
saludos coordiales para todos
 
Primero verifica la resolucion de tu monitor, luego busca una imagen que te gusta de acuerdo a la resolucion de tu monitor y luego
descargalo y luego buscas la imagen y pones establecer como fondo de escritorio y Bingo :welcoming:
 
gracias por responder unorthodoxt
loque quisieras es que se ajuste sola automaticamente a cualquier resolucion es para una pagina web que tenmos con vbulletin y la verdad que no sabemos nada de programacion
saludos
 
Tony69Osuna dijo:
Hola buenas noches amigos del foro .
necesito de su ayuda para insertar una imagen de fondo en una plantilla para que se ajuste automaticamente al tamaño del monitor .
desde ya muchas gracias, espero de su valiosa colaboracion
saludos coordiales para todos
Hacer clic para expandir...

google: responsive background image + CSS
How to Resize Background Images with CSS3
How to Create a Background Image that Scales with the Browser Window
Responsive css background images - Stack Overflow
Simple Responsive Images With CSS Background Images | Smashing Magazine
 
HTML: 
body{
background:url('URL-DE-LA-IMAGEN.JPG') no-repeat center center fixed;
background-size:cover;
}

:welcoming:
 
Tony69Osuna dijo:
gracias por responder unorthodoxt
loque quisieras es que se ajuste sola automaticamente a cualquier resolucion es para una pagina web que tenmos con vbulletin y la verdad que no sabemos nada de programacion
saludos
Hacer clic para expandir...
ahh,
entonces no es para que se ajuste al monitor sino a la pagina.
Bueno alguien te responderá.
 
saludos buenas tardes amigo alguien podria indicarme por favor si con este codigo piedo hacer lo que yo deseo hacer ?

HTML: 
{       
    background-image: url('../images/bg.png');        
    background-repeat: no-repeat;        
    position: relative;        
    width: 85%;            
    height: 610px;       
    margin-left: auto;      
    margin-right: auto;       
}
 
Tony69Osuna dijo:
saludos buenas tardes amigo alguien podria indicarme por favor si con este codigo piedo hacer lo que yo deseo hacer ?

HTML: 
{       
    background-image: url('../images/bg.png');        
    background-repeat: no-repeat;        
    position: relative;        
    width: 85%;            
    height: 610px;       
    margin-left: auto;      
    margin-right: auto;       
}
Hacer clic para expandir...

No, con position relative, la imagen quedara fija y al hace scroll no se vera mas abajo, ya te deje el codigo:

HTML: 
body{
background:url('URL-DE-LA-IMAGEN.JPG') no-repeat center center fixed;
background-size:cover;
}
 
kanikase dijo:
No, con position relative, la imagen quedara fija y al hace scroll no se vera mas abajo, ya te deje el codigo:

HTML: 
body{
background:url('URL-DE-LA-IMAGEN.JPG') no-repeat center center fixed;
background-size:cover;
}
Hacer clic para expandir...


saludos amigo
agradecido por su valiosa colaboracion .
saludos
 
Creo yo que con esta sera suficiente:

Insertar CODE, HTML o PHP: 
background-image: url(url de tu imagen);
background-size: 100% auto;

esto lo pones en body y quedaría así

body{
background-image: url(url de tu imagen);
background-size: 100% auto;
}
 
nxovoix dijo:
Creo yo que con esta sera suficiente:

Insertar CODE, HTML o PHP: 
background-image: url(url de tu imagen);
background-size: 100% auto;

esto lo pones en body y quedaría así

body{
background-image: url(url de tu imagen);
background-size: 100% auto;
}
Hacer clic para expandir...


hola buenos dias amigo gracias por responde .
pero la verdad no se nada de prgracion y me gustaria que me ayudara a ver donde debo colocar el codigo aca le dejo captura del panel a ver en cual de ello es que debo poner el codigo
F4xOIvJ.webp

aca le dejo la imagen la cual deseo colocar de fondo en la pagina
http://i.imgur.com/xKOYjLZ.png
si seria tan amable de dejarme el codigo con esa imagene y decirme el cual debe ponerla por favor
desde ya muchas gracias por la ayuda
saludos
 
Última edición:
Para colocar una imagen de fondo en vbulletin debes de editar la variable doc_background y colocar en el campo imagen de fondo lo siguiente
url(http://i.imgur.com/xKOYjLZ.png)
En el campo Repetir fondo elige Sin repetir

Luego edita la plantilla vbulletin.css del estilo que estás usando y verás al principio este código o parecido:
Insertar CODE, HTML o PHP: 
html {
    background:{vb:stylevar doc_background};
    <vb:if condition="$stylevar['textdirection'] == 'rtl'"> /* VBIV-11882 */
        overflow-x: hidden;
    </vb:if>
}

Reemplázalo por este o solo añádele lo que le falta:
Insertar CODE, HTML o PHP: 
html {
    background:{vb:stylevar doc_background};
        background-size:100%;
        background-attachment:fixed;
    <vb:if condition="$stylevar['textdirection'] == 'rtl'"> /* VBIV-11882 */
        overflow-x: hidden;
    </vb:if>
}

Saludos 😉
 
Hola buenos dias
gracias amigo OLMID todo salio a la perfecto
muy agradecido por su ayuda hermano .
pueden dar el tema por soluccionado
saludos a todos
gracias
 
Hay que estar conectado o registrado para responder aquí.
Atrás
Arriba