Comment redimensionner un fond d’écran ?

Version imprimable

Bonjour,

Je suis un débutant en java et je n’arrive pas à faire redimensionner mon font d’écran.

Mon but c'est qu'il doit être immobile sur tous les Zoom possibles et que à chaque enter ou actualisation de la page, l'image change.

Bref... pour le changement d'image, OK, mais pour les redimensionner, ça je n'y arrive pas. :(

Voici mon code:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<script type="text/javascript">
    function changeImg(imgNumber) {
        var myImages = [
            "img/backgrounds/bg_001.jpg",
            "img/backgrounds/bg_002.jpg",
            "img/backgrounds/bg_003.jpg",
            "img/backgrounds/bg_004.jpg",
            "img/backgrounds/bg_005.jpg",
            "img/backgrounds/bg_006.jpg",
        ];
        var imgShown = document.body.style.backgroundImage;
        var newImgNumber =Math.floor(Math.random()*myImages.length);
        document.body.style.backgroundImage = 'url('+myImages[newImgNumber]+')';
        }
    window.onload=changeImg;
</script>

Merci d’avance. :P

28/05/2013, 15h54
Tendhor57
8O J'aimerais bien t'aider mais je comprend pas ce que tu veut faire :mrgreen:

Soit de un tu parle que ta fenetre de navigation reste fixer, à ce moment là ben suffit de pas y toucher.

Si maintenant tu souhaite que ton images reste à une taille fixe quelque soit les dimensions de ta fenêtre de navigation ben un simple CSS comme ceci suffit:
Code:

1 2 3 4 5 6 //ton image aura toujours la valeur de 100px par 100px ici .monimage{ width:100px; height:100px; }
Et qu'entend tu par zoom ?
28/05/2013, 16h05
SpaceFrog

ça sera peut etre implémenté en css3 ...
pour le moment les backgrounds ne sont pas dimensionnables
tu peux passer par une balise image positionnée en z-index...
28/05/2013, 16h27
Cubicole

resize
Voila en faite j'ai pue faire un resize avec un font d’écran.
Code:

1 2 3 4 5 <script type="text/javascript"> Home_Ready("img/backgrounds/bg_1.jpg"); $(resize); $(window).resize(resize); </script>
je souhaite sollement faire en sorte que lorsque je actualise ou change de page,
l'image change tout en gardent le rezise possible.

pour le zoom je parle surtout d'un "Ctrl+roulette de la souris"

aide

a oui j'ai oublier de mentionner se code 8O dessoler

Code:

1
2
Le HTML
<script src="js/Common.js"></script>

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
/* HOME */
/*
function Home_Ready(backUrl) {
	$(document).ready(function () {
		$("#q").focus();
		var backId = Math.floor((Math.random() * 26) + 1);
		if (backUrl == null || backUrl == "") {
			backUrl = "/img/backgrounds/" + ZeroFill(backId, 3) + ".jpg";
		}
		Debug($("#img_home_back").attr("src"));
		Debug(backUrl);
		$("#img_home_back").attr("src", backUrl);
	})
}
*/
function Home_Ready(backUrl) {
	$(document).ready(function () {
		$("#q").focus();
		/*
		var backId = Math.floor((Math.random() * 40) + 1);
		if (backUrl == null || backUrl == "") {
			backUrl = "/img/backgrounds/" + ZeroFill(backId, 3) + ".jpg";
		}
		*/
		$("div.home_content").css("background", "url('" + backUrl + "')");
		if ($.browser.msie && $.browser.version < 9) {
			$(".home_content").css("filter", "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + backUrl + "', sizingMethod='scale')");
		}
	})
}

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
function resize() {
	var playerContainer = $(".bottom_fixed");
	var playerSize = playerContainer.is(":visible") ? playerContainer.height() : 0;
 
	var navContainer = $(".navbar");
	var navSize = navContainer.height();
 
	_scrHeigth = $(window).height();
	_scrWidth = $(window).width();
 
	_imgRatio = _imgBackW / _imgBackH;
 
	var footerSize = $(".footer_common_page").height();
	var contentSize = _scrHeigth - playerSize - navSize;
 
	_scrRatio = _scrWidth / contentSize;
 
	if (_imgRatio < _scrRatio) {
		_imgBackW = _scrWidth;
		_imgBackH = Math.round(_scrWidth / _imgRatio);
 
	}
	else {
		_imgBackH = contentSize;
		_imgBackW = Math.round(contentSize * _imgRatio);
	}
 
	$("div.home_content").height(contentSize);
	$("div.home_content").css("background-repeat", "no-repeat");
	$("div.home_content").css("background-size", _imgBackW + "px " + _imgBackH + "px");
 
	//Home	
	$(".content-fixed").css("bottom", playerSize + "px");
	if (playerContainer.is(":visible")) {
		$("footer").css("padding-bottom", playerSize + "px");
	}
	//Main
	$("div.all_content").css("min-height", contentSize);
	$("#pusher").css("height", footerSize + playerSize);
	$(".footer_common_page").css("bottom", playerSize);
}

et un énorme dossier concernent le windows resize :calim2:

car j'ai pris idée sur l’ancien version d’accueil de radionomy.com

http://www.radionomy.com/js/jquery-1.7.2.js