18041 sujets

Questions générales et questions de débutants

Adapter un background pour chaque résolution

Bonjour, (ou plutot bonsoir vu l'heure qu'il est)
Tout est dans le titre: j'ai réalisé un background sur Toshop mais il ne s'incruste qu'à ma résolution. J'ai parcouru le forum, google, et donc vu plusieurs sujets à ce propos, mais je comprends rien... J'ai trouvé ce bout de code javascript 
<script type="text/javascript">
if(screen.width < 801) document.body.style.backgroundImage="url('images/background800X1292.jpg')";
 else if(screen.width < 1025) document.body.style.backgroundImage="url('imgages/background1024X1653.jpg')";
  else if(screen.width < 1281) document.body.style.backgroundImage="url('imgages/background1280X2067.jpg')";
   else if(screen.width < 1601) document.body.style.backgroundImage="url('imgages/background1600X2583.jpg')";
    else document.body.style.backgroundImage="url('images/background.jpg')";
</script>


J'ai donc resizer mon background avec toutes les dimensions ci-dessous, mais mon probleme c'est que je ne sais pas ou je dois placer ce code en .js...
Merci de votre aide en tout cas.
PS: clavier qwerty, donc désolé si il manque des accents Smiley confused
Modifié par Brett (13 Jan 2013 - 02:01)
En effet, pas toutes les résolutions sont ciblées.

En revanche, le test condition "if-elseif" devrait commencer par la plus grande taille et « affiner » par les condition elseif jusqu'à la plus petite des conditions... Otherwize it sucks !

Pour répondre a ta question, le code est a placer entre les balises <head> dans un segment de code Javascript.
Tu peux chercher sur le net comment faire en fonction de l'utilisation ou non d'un framework js; qui prend en compte le chargement de page (tous le font, mais le code diffère d'un framework à l'autre)...
Ok, merci déjà pour vos réponses. En recherchant un petit peu ce matin, j'ai trouvé cet article---->http://www.alsacreations.com/astuce/lire/1216-arriere-plan-background-extensible.html.
Cependant, vu que je suis une brelle, je ne comprends pas ou insérer ces bouts de code. (méthode css3).
Code HTML: ou le place t-on? Si c'est un nouveau fichier que l'on créé, comment le nomme t-on?
Code CSS: Idem que pour le code HTML.
Cette méthode serait, pour moi, super bien adaptée à mon probleme.
Merci
c'est exactement l'article que je te conseillais dans ma réponse...pffff....le code css soit tu le colles entre les balises head ou bien, encore mieux, dans un fichier séparé que tu relies avec ton html comme ceci : 


<link rel="stylesheet" type="text/css" href="ton_code_css3.css" media="screen"/>


le code html, bah tu le mets dans ta page html existante. entre les balises body.
Merci FloydinBremen de m'aider. Donc, je viens de créer mon fichier .css en inserrant le code suivant 
html { 
  margin:0;
  padding:0;
  background: url(image/bg.jpg) no-repeat center fixed; 
  -webkit-background-size: cover; /* pour Chrome et Safari */
  -moz-background-size: cover; /* pour Firefox */
  -o-background-size: cover; /* pour Opera */
  background-size: cover; /* version standardisée */
}

Je l'ai nommé "extensible.css". Maintenant, je bloque... au niveau de ton code 
<link rel="stylesheet" type="text/css" href="extensible.css" media="screen"/>

Tu me dis de l'insérer entre les balises "body" de ma page html, mais le probleme c'est que je ne vois pas ou? Dans quels fichiers .PHP j'insére ce code? (Header? Functions? Etc)
Merci
humm, tu as mal compris.
le lien là : 

<link rel="stylesheet" type="text/css" href="extensible.css" media="screen"/>


c'est entre les balises head.

re-humm, je crois comprendre que tu es grand débutant ou bien? je t'invite dans un premier temps à lire ou rechercher sur internet les bases html/css afin de développer tes connaissances. Ensuite, background-size, ben c'est du css3. Cette propriété n'est malheureusement pas comprise (comme quelques propriétés css3) par tous les navigateurs et versions. Internet Explorer for ever...
Re...
Dans mon fichier Header.php, j'ai trouvé ca entre autre:
</head>
<body <?php body_class( $class ); ?>>
<div id='all'>
<div id='header'>

Est-ce-que je dois placer le code juste en-dessous de la ligne: "<body <?php body_class( $class ); ?>>"
???
Merci
M**de, je suis vraiement une bille. Ecoute, j'ai trouvé la balise de fin </head> mais pas celle qui s'ouvre---->
<?php global $SMTheme;?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" <?php language_attributes(); ?>>
<head profile="http://gmpg.org/xfn/11">
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<?php $SMTheme->show_title()?>

<?php
	if(
		(is_archive()&&is_day()&&$SMTheme->get( 'seo', 'day' ))||
		(is_archive()&&is_month()&&$SMTheme->get( 'seo', 'month' ))||
		(is_archive()&&is_year()&&$SMTheme->get( 'seo', 'year' ))||
		(is_category()&&$SMTheme->get( 'seo', 'category' ))||
		(is_tag()&&$SMTheme->get( 'seo', 'tag' ))||
		(is_author()&&$SMTheme->get( 'seo', 'author' ))||
		(is_search()&&$SMTheme->get( 'seo', 'search' ))
	) {
	?><meta name="robots" content="noindex" /><?php
	}
?>

<?php if ( is_singular() ) { wp_enqueue_script( 'comment-reply' ); } ?>

<?php  wp_head(); ?>
<style type="text/css">
	<?php $SMTheme->block_slider_css(); ?>
	
	<?php echo $SMTheme->get( 'integration','css' )?>
</style>
	<?php
		echo $SMTheme->get( 'integration','headcode' );
	?>
	<script type="text/javascript">
		jQuery(document).ready(function() {
			<?php
				$SMTheme->block_slider_config();
			?>
			jQuery('#secondarymenu li:first').css('border-width', '0px');
			jQuery('#secondarymenu ul').css('overflow', 'visible');
			jQuery("#header .children").addClass('sub-menu');
			jQuery("#header .sub-menu").each(function() {
				jQuery(this).html("<div class='transparent'></div><div class='inner'>"+jQuery(this).html()+"</div>");
			});
			
			<?php
				$SMTheme->block_menu_config("menus");
			?>
			jQuery('textarea#comment').each(function(){
				jQuery(this).attr('name','<?php echo $_SESSION['commentinput']; ?>');
			});
			jQuery('.feedback input').each(function(){
				jQuery(this).attr('name','<?php echo $_SESSION['commentinput']; ?>['+jQuery(this).attr('name')+']');
			});
			jQuery('.feedback textarea').each(function(){
				jQuery(this).attr('name','<?php echo $_SESSION['commentinput']; ?>['+jQuery(this).attr('name')+']');
			});
		});
	</script>
</head>
ETC ETC ETC

Je viens de placer le code juste au-dessus de la balise de fin </head>, mais mon background ne change pas... Quant au fichier extensible.css je l'ai mis dans le dossier CSS de mon theme...? est-ce bien là?
Désolé...
évites de toucher un code qui n'est plus pour des débutants. y a du php dedans, des méthodes, des fonctions, ne joues pas trop à l'apprenti sorcier, tu vas détruire plus que construire...

ta balise qui ouvre, elle est là : 

<head profile="http://gmpg.org/xfn/11">


tu n'as pas non plus appris les chemins relatifs ou absolus? je veux dire pour ta question là :

a écrit :
Quant au fichier extensible.css je l'ai mis dans le dossier CSS de mon theme...? est-ce bien là?


ton fichier css, tu le mets où tu veux. mais le path, tu le précises dans le lien : 

<link rel="stylesheet" type="text/css" href="dossiercss/extensible.css" media="screen"/>


le href....en relatif, par rapport à la position de ton document actuel. en absolu = url complète de ton document css.

va faire un tour sur la section apprendre de alsacréations, y a des tutoriels, des trucs de bases, etc. tu mets la charrue avant les boeufs.
Je pense grandement que tu as raison, hélas. Je vais regarder tout ca se soir, et donc m'instruire calmement. Merci en tout cas de m'avoir apporter tes lumieres. Et je reviendrais peut-etre si je comprends pas tout. Super cool, merci encore
Sujet clos
Aller à