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

Tony69Osuna · 3 May 2014

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

unorthodoxt · 3 May 2014

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:

Tony69Osuna · 3 May 2014

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

Cicklow · 3 May 2014

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

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

kanikase · 3 May 2014

HTML:

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

:welcoming:

unorthodoxt · 3 May 2014

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

ahh,
entonces no es para que se ajuste al monitor sino a la pagina.
Bueno alguien te responderá.

Tony69Osuna · 4 May 2014

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;       
}

kanikase · 4 May 2014

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; }

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;
}

Tony69Osuna · 4 May 2014

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; }

saludos amigo
agradecido por su valiosa colaboracion .
saludos

nxovoix · 12 May 2014

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;
}

Tony69Osuna · 16 May 2014

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;
}

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

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

OLMID · 16 May 2014

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

Tony69Osuna · 20 May 2014

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