me gustaría ser capaz de cambiar mi imagen de fondo página web de acuerdo con la resolución de pantalla que el usuario utiliza de modo:Establecer imagen de fondo de acuerdo con la resolución de la pantalla
si la resolución de la pantalla es mayor que o igual a 1200 * 600 entonces fondo = mybackground.jpg no-repeat o de lo contrario. ¿Cómo puedo hacer esto?
Los enfoques de CSS puro que funcionan muy bien se discuten here. En particular, se examinan dos técnicas y personalmente prefiero la segunda ya que no depende de CSS3, lo que se adapta mejor a mis propias necesidades. Si la mayoría de su tráfico tiene un navegador con capacidad CSS3, el primer método es más rápido y más limpio de implementar (copiado/pegado por el Sr. Zoidberg en otra respuesta aquí por conveniencia, aunque visitaría the source para más información). sobre por qué funciona).
Un método alternativo a CSS es utilizar la biblioteca JavaScript jQuery para detectar cambios de resolución y ajustar el tamaño de la imagen en consecuencia. This article cubre la técnica jQuery y proporciona una demostración en vivo.
Supersized es una biblioteca dedicada de JavaScript diseñada para imágenes estáticas de pantalla completa, así como presentaciones de diapositivas de tamaño completo.
Un buen consejo para las imágenes de pantalla completa es escalarlas con una proporción correcta de antemano. Normalmente aspiro a un tamaño de 1500x1000 cuando uso supersized.js o 1680x1050 para otros métodos, estableciendo la calidad jpg para fotografías entre 60-80%, lo que da como resultado un tamaño de archivo en la región de 100kb o menos si es posible sin comprometer la calidad demasiado .
Hola, hay una versión de javascript que cambia la imagen de fondo de acuerdo con la resolución de la pantalla. Tienes que tener las diferentes imágenes guardadas en el tamaño correcto.
<html>
<head>
<title>Javascript Change Div Background Image</title>
<style type="text/css">
body {
margin:0;
width:100%;
height:100%;
}
#div1 {
background-image:url('sky.jpg');
width:100%
height:100%
}
p {
font-family:Verdana;
font-weight:bold;
font-size:11px;
}
</style>
<script language="javascript" type="text/javascript">
function changeDivImage()
{
//change the image path to a string
var imgPath = new String();
imgPath = document.getElementById("div1").style.backgroundImage;
//get screen res of customer
var custHeight=screen.height;
var custWidth=screen.width;
//if their screen width is less than or equal to 640 then use the 640 pic url
if (custWidth <= 640)
{
document.getElementById("div1").style.backgroundImage = "url(640x480.jpg)";
}
else if (custWidth <= 800)
{
document.getElementById("div1").style.backgroundImage = "url(800x600.jpg)";
}
else if (custWidth <= 1024)
{
document.getElementById("div1").style.backgroundImage = "url(1024x768.jpg)";
}
else if (custWidth <= 1280)
{
document.getElementById("div1").style.backgroundImage = "url(1280x960.jpg)";
}
else if (custWidth <= 1600)
{
document.getElementById("div1").style.backgroundImage = "url(1600x1200.jpg)";
}
else {
document.getElementById("div1").style.backgroundImage = "url(graffiti.jpg)";
}
/*if(imgPath == "url(sky.jpg)" || imgPath == "")
{
document.getElementById("div1").style.backgroundImage = "url(graffiti.jpg)";
}
else
{
document.getElementById("div1").style.backgroundImage = "url(sky.jpg)";
}*/
}
</script>
</head>
<body onload="changeDivImage()">
<div id="div1">
<p>This Javascript Example will change the background image of<br />HTML Div Tag onload using javascript screen resolution.</p>
<p>paragraph</p>
</div>
<br/>
</body>
</html>
Sé que es una pregunta demasiado antigua, pero pensé que para responder, podría ayudar a alguien. Si ves Twitter, encontrarás algo muy complicado pero un enfoque de CSS puro para lograr esto.
<div class="background"><img src="home-bg.png" /></div>
Applied CSS
.background {
background: none repeat scroll 0 0 #FFFFFF;
height: 200%;
left: -50%;
position: fixed;
width: 200%;}
.background img{
bottom: 0;
display: block;
left: 0;
margin: auto;
min-height: 50%;
min-width: 50%;
right: 0;
top: 0;}
Estas imágenes de fondo se ajustan a todas las medidas. incluso la vista de retrato de ipad. siempre ajusta la imagen en el centro. si alejas el zoom; la imagen seguirá siendo la misma
eliminar su "código de la imagen de fondo del cuerpo" y luego pega este código:
html {
background: url(../img/background.jpg) no-repeat center center fixed #000;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
esto está bien respuesta –
He tenido este mismo problema, pero ahora he encontrado la solución para ello.
El truco es crear una imagen de fondo de pantalla de 1920 * 1200. Cuando aplica este fondo de pantalla a las diferentes máquinas, Windows 7 cambia el tamaño automáticamente para un mejor ajuste.
espero que esto le ayuda a todos los CSS cuerpo
Set para:
body {
background: url(../img/background.jpg) no-repeat center center fixed #000;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
poner en archivo css:
html { background: url(images/bg.jpg) no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; }
URL imágenes/bg.jpg es su imagen de fondo
o bien, ¿qué? quisiste decir: 'o si no background = myalternatebackground.jpg no-repeat' –
consultas de medios en css3 – kim366