Imagen De Fondo De Mi Foro

[Artro]

URL: www.naruto-takatsuki.webcindario.com/foro/
Plantilla(s) usuada(s): Acidtech Lime
MODs instalados: Ninguno
Version de phpBB: 3.01
Servidor: Mi@
Si es una actualizacion desde otra version: NO
Si es una conversion desde otro tipo de Foro: NO

Hola de nuevo, ante todo gracias de antemano por la ayuda y disculpas al moderador por no aportar la información pertinente para la consulta.

Ahí va de nuevo la cuestión:

El asunto en cuestión es sobre un foro que tengo al cual recientemente le he puesto una imagen de fondo en la que cuadraba ciertas imágenes, pero con la resolución de pantalla 1280x800; claro está que al cambiar la resolución de pantalla a 1024x768 esas imágenes se cortan y por tanto no cuadra bien con el cuerpo del foro en sí. Mi pregunta es:

¿Podría realizar alguna modificación para que tanto para una resolución de pantalla u otra todo cuadrara (foro y fondo de pantalla)?

Espero una respuesta y si es posible una orientación. Gracias.

[Artro]

Nadie sabria responderme? o esque no se entiende mi consulta?

[HuanManwe]

Si nadie ha respondido será porque no ha pasado mucha gente por este foro esta tarde. Un poco de paciencia.

Yo no sé si sabría darte una solución, pero si es una única imagen de fondo quizá te valga con modificar la forma en que se inserta, para que en vez de indicar el tamaño en píxeles (p.e.: 800px) lo hagas con tanto por ciento (p.e.: 90%).
Pero todo eso dependería de cuántas imágenes componen el fondo, y cómo las tienes definidas. Esos datos solo los conoces tú. A no ser que nos los dijeras

[Artro]

A ver, como comentaba en el mensaje anterior....

1- Tengo mi resolucion de pantalla en 1200x800 (panoramica en portatiles)
2- Tengo un foro con una anxura de 880 px
3- Una imagen de 1200px X 680 px (ami me cuadra perfecto, con mi resolucion claro)
4- Ami se me ve el foro de 880 px de anxo con su imagen y todo de lujo
5- Lo que yo querria seria que en cualquier pc con cualquier resolucion se viera, como yo lo veo...pero para eso necesitaria hacer ALGO para que se autoajustara tanto el FORO como la IMAGEN,
6- Se que en algunas paginas webs, al poner una imagen de fondo... con un script esto es posible, entonces creo que es posible hacerse con la imagen pero no con el foro..
7- Todo esto viene a decir... por ejemplo, yo el foro con la resolucion de 1200x800 veo el FORO con una resolucion (de anxo) de 880px y la imagen de 1200... vale? ahora, yo me cambio la resolucion a 600x400(me la invento) y yo para verlo "igual" deberia de ver el foro con una resolucion de 400 y la imagen a 600... Se entiende la pregunta?
8- Respecto a la pregunta de como inserte la imagen...

background: #1F1F1F url(images/nf.png)

Espero sus respuestas, gracias

[viktor]

Se puede hacer desde css y con la ayuda de php segun tengo entendido (yo todavia no lo intente, pero lo he visto), y calculo que con javascrip de seguro que se puede.

Tendrias que declarar clases dependiendo de el tamaño (en tu archivo css), por ejemplo

Código: Seleccionar todo

.width_800{
max-width:780px;
width:780px;
background: url(ruta de tu imagen chica) no-repeat;
}

.width_1024{
min-width:910px;
max-width:1000px;
width:auto !important;
width:1000px;
background: url(ruta de tu imagen mediana) no-repeat;
}

.width_1280{
min-width:1124px;
max-width:1250px;
width:auto !important;
width:1000px;
background: url(ruta de tu imagen grande) no-repeat;
}

Y la parte que yo no se hacer, es que con php hagas que según la resolución de tu pantalla te cargue una clase u otra, a ver si alguien que sepa de php nos de una pista. (que yo también he estado buscándole la vuelta a este problema)

PD: Puse los valores de ancho y alto muy grandes,.. pero eso se cambia fácil.

[HuanManwe]

Me temo que con PHP no se puede detectar eso, pero con Javascript sí, con una función similar a esta:

Código: Seleccionar todo

<script language="JavaScript">

<!--
if (screen.width + "x" +screen.height == "800x600"){
var imagenausar=lamediana.jpg}
if (screen.width + "x" +screen.height == "640x480"){
var imagenausar=lapeque.jpg}
if (screen.width + "x" +screen.height == "1024x768"){
var imagenausar=lagrande.jpg}
}
//-->
</script>

Es aproximado, pero algo así sería. Luego habría que conectar la variable imagenausar al PHP... pero ahora no se me ocurre cómo se podría hacer eso, o si se necesitaría otra forma.

Otra posibilidad es copiar el .CSS que se encargue de desplegar la imagen de fondo de la página un par de veces, cambiando el nombre del mismo, obviamente. Luego haces que por Javascript compruebe la resolución y que el foro use un archivo .css u otro dependiendo de esa resolución. Tal que así:

Código: Seleccionar todo

    <head> <script language="JavaScript1.2"> <!-- if ( screen.width == 1024){ document.write('<link xhref="css/pagina_1024.css" 


    rel="stylesheet" type="text/css" media="screen" />'); } else { document.write('<link xhref="css/pagina_default.css"

    rel="stylesheet" type="text/css" media="screen" />'); } --> </script> </head> 

Pero me sigue pareciendo que ninguna de las 2 ideas es suficientemente buena.

Código: Seleccionar todo

<script type="text/javascript">
<!--
var ancho='';
ancho=screen.width
if (ancho ==640){
alert('Se advierte que para ver correctamente el contenido de nuestras páginas\nrequiere de una configuración de pantalla minima de 800x600 pixeles');
document.write ('<link rel=\"stylesheet\" href=\"800.css\">');
}
if (ancho ==800){
document.write ('<link rel=\"stylesheet\" href=\"/800.css\">');
}
if (ancho >=1024){
document.write ('<link rel=\"stylesheet\" href=\"1024.css\">');
}
// -->
</script>

Sigo pensando que mi impresión inicial es la más cercana a la solución porque cuando en los anchos y altos (width y height respectivamente), en vez de poner un valor absoluto (como por ejemplo 100px) pones un porcentaje (por ejemplo 90%), da igual la resolución del monitor, ya que la medida absoluta variará en función del porcentaje indicado.

[Artro]

Si, vosotros me hablais de la imagen, pero como comprendereis si yo estoy a una resolucion de 800x600 y ago k la imagen tenga de anxo 600 pues no se vera, pork el foro seguiria con sus 880px k tenia al principio, entonces mi pregunta es, todo esto es de la imagen como e dixo antes, pero y para el foro?

[viktor]

Ok, vamos por parte, aca te dejo una solucion mas acorde a "tu" imagen, ya que evidentemente es demasiado modificar todos los valores de witdh si ese problema lo tienes con una imagen sola.

La solucion es usar solo css para esa imagen. Pero la imagen tiene que ser lo mas grande posible, porque si partes de una imagen chica al agrandarla se vera muy mal.

Ok, lo que tienes que hacer es darle a la imagen una clase, y despues editar dicha clase en el css para que fixee el tamaño.

Por ejemplo

Código: Seleccionar todo

<img src="images/tuimagen.jpg" class="expand" />

Y luego en el css agregas esto.

Código: Seleccionar todo

img.expand { width: 10em; }

Ten en cuenta que los 10em son solo de referencia, tu puedes cambiarlo por el numero que quieras hasta que te encaje donde quieras.
Cuando uses una resolucion chica la imagen se encojera, y si agrandas la resolucion la imagen se mostrara cada vez mas grande (hast que alcanzes el tamaño original de la imagen), a partir de ahi empezaras a perder calidad de imagen.
Esto no funciona con versiones viejas del IE (como era de esperarse... )

PD: Si quieres puedes ver AQUI la pagina de donde saque esta solucion (en ingles).