Efecto background de twitter

[IVICP3]

He estado mirando pero no he encontrado nada en el codigo, alguien me dice cual es el efecto de la pagina de twitter para que vaya cambiando las imagenes par que se adapten a cualquier pantalla?

https://twitter.com/

Gracias.

[AngelKrak]

puedes hacerlo con este codigo ;)
ocupas la libreria de jQuery and the jQuery.carouFredSel-plugin recuerda ;)
html:

<div id="wrapper">
<div id="carousel">
<div><img src="img/grozny1.jpg" alt="grozny1" width="960" height="560" /></div>
<div><img src="img/grozny2.jpg" alt="grozny2" width="960" height="639" /></div>
<div><img src="img/grozny3.jpg" alt="grozny3" width="960" height="640" /></div>
<div><img src="img/grozny4.jpg" alt="grozny4" width="960" height="607" /></div>
</div>
<div id="text">
<h4>Modest Celebration<br />
In Grozny</h4>
<p>The Chechen leader, Ramzan Kadyrov, has held a star-studded party in his capital Grozny - but denied it was anything to do with his 35th birthday.</p>
<p>Oscar-winning actor Hilary Swank and action star Jean-Claude van Damme have been criticised for attending the lavish party. Kadyrov is linked to a grim record of abuse. When stars get paid to turn up to party with him, it trivializes the suffering of countless victims of human rights abuses.<br />
<small>Source: <a href="http://gigapica.geenstijl.nl/2011/10/modest_celebration_in_grozny.html" target="_blank">gigapica.geenstijl.nl</a></small></p>
<hr />
<p>Select a transition-effect: <select id="fx">
<option value="none">None</option>
<option value="scroll" selected="selected">Scroll</option>
<option value="crossfade">Crossfade</option>
<option value="cover">Cover</option>
</select></p>
</div>
</div>

css:

html, body {
height: 100%;
padding: 0;
margin: 0;
}
body {
min-height: 600px;
}
body * {
font-family: Arial, Geneva, SunSans-Regular, sans-serif;
font-size: 14px;
color: #333;
line-height: 22px;
}
#wrapper {
width: 100%;
height: 100%;
position: relative;
}
.caroufredsel_wrapper {
width: 100% !important;
height: 100% !important;
}
#carousel div {
width: 100%;
height: 100%;
overflow: hidden;
float: left;
}
#carousel div img {
width: auto;
height: auto;
min-width: 100%;
min-height: 100%;
}
#text {
background-color: rgba(255, 255, 255, 0.8);
width: 350px;
height: 350px;
padding: 50px;
margin: -225px 0 0 -225px;
position: absolute;
top: 50%;
left: 50%;
z-index: 2;
box-shadow: 0 0 50px #000;
border-radius: 20px;
}
#text h4 {
font-size: 33px;
line-height: 25px;
margin: 0 0 20px 0;
}
#text small, #text small * {
font-size: 12px;
color: #666;
}

js:

$(function() {
$('#carousel').carouFredSel({
width: $(window).width(),
height: $(window).height(),
align: false,
items: {
visible: 1,
width: 'variable',
height: 'variable'
}
});

$(window).resize(function() {
var newCss = {
width: $(window).width(),
height: $(window).height()
};
$('#carousel').css( 'width', newCss.width*4 );
$('#carousel').parent().css( newCss );
$('#carousel div').css( newCss );
}).resize();

$('select#fx').change(function() {
$('#carousel').trigger('configuration', ['auto.fx', $('select#fx').val()]);
});
});

o directamente bajate ese script ;)
http://www.jqueryscript.net/slidesho...Slideshow.html