arreglar el tamaño del banner al aumentar el zoom de la pagina

[cardinal]

arreglar el tamaño del banner al aumentar el zoom de la pagina

hola hace dos semanas que estoy armando un foro, pude colocar el ancho de la pagina en modo automatico y pero cuando le quito zoom a la pagina el banner queda recortado.

en 100% de zoom de pagina tengo esto


pero con menos zoom el banner queda recortado a la derecha:



y al disminuir el zoom de pagina el banner tambien se recorta.

Quiero saber como hago para que el tamaño del banner cambie automaticamente con el zoom de pagina y sin deformarse, es decir que mantenga la proporcion. Gracias!!

mi theme es: Reference,  Author: Crip
SMF version: 2.0.4
Instalado en hostlocal

[MorderBR]

Crea ese mismo banner con una dimension de imagen muy grande(1080 por ejemplo) y con los atributos css pones ese banner como background y background a 100%
asi se ajustara a cualquier pantalla y cualquier tamaño de ventana
Lo de la imagen grande es para que si se llega a agrandar la imagen no se distorsione

[cardinal]

me podrias explicar que codigo debo editar?
tengo esto:

#logo a {
   position: center;
   top: 0px;
   right: 0px;
   display: block;
   width: 1263px;
   height: 171px;
   cursor: pointer;
   background: url(../images/img/logo.png) no-repeat;

que debo modificar?

gracias

[Dhayzon]

eso es puramente css   porfavor trata de  búscalo en google  ......

un lugar perfencto para aprender algo de css es este
http://www.w3schools.com/css/

si quieres soporte mas efectivo trata de subir tu web a cualquier host 
saludos

[MorderBR]

me podrias explicar que codigo debo editar?
tengo esto:

#logo a {
   position: center;
   top: 0px;
   right: 0px;
   display: block;
   width: 1263px;
   height: 171px;
   cursor: pointer;
   background: url(../images/img/logo.png) no-repeat;

que debo modificar?

gracias

#logo a {
   position: center;
   top: 0px;
   right: 0px;
   display: block;
   width: 100%;
   height: 171px;
   cursor: pointer;
   background: url(../images/img/logo.png) no-repeat;
  background-size:100%;
}
Aqui dice que el atributo de "a" (<a> - link) que esté dentro del objeto con ID logo(#logo) tendra una posicion centrada, en la parte superior estara separada 0 pixeles, del lado derecho estara separado 0 pixeles tendra un ancho de 100%(ocupando todo el ancho de la ventana o todo el ancho de pantalla), un alto de 171 pixeles, un cursor de punto(el de la manita), un fondo con la imagen de la url ../images/img/logo.png y esta no se repetira y por ultimo un tamaño de fondo del 100%(que ocupara el mismo tamaño del ancho del objeto que se habia establecido antes, el de 100%)

[cardinal]

Muchas gracias por el codigo y la explicacion, funciona perfecto.

saludos!

[Erno]

Hola a todos. Este es mi primer posteo aquí.
Disculpad mis excasos conocimientos. Mi pregunta es: ¿dónde tengo que ir exactamente para modificar esto? ¿Tal vez a index.css?

#logo a {
   position: center;
   top: 0px;
   right: 0px;
   display: block;
   width: 100%;
   height: 171px;
   cursor: pointer;
   background: url(../images/img/logo.png) no-repeat;
  background-size:100%;
}

Gracias por vuestra atención y Saludos.