Bonjour à tous !
Alors voilà, aujourd'hui mon souci, c'est ce fichu background.
J'expose le chmilblic :
J'ai un body background #FFF, et par dessus, j'ai posé une image de petite taille. Alors pourquoi petite taille ? Et bien tout simplement que j'aimerai que cette image se fixe dans la partie gauche du site, entre mon contenu et le bord de la page.
Le truc, c'est qu'en fonction de la résolution du visiteur, la moitié de cette image est tronquée sous le contenu.
Maintenant la question : Est-il possible de fixer la position et la taille de cette image pour qu'elle remplisse la partie gauche du site, quelle que soit la résolution du visiteur ?
L'image d'origine fait 295x869px.
ça c'est la partie du css concernée
html body{
background-image: url(images/bg.png);
background-repeat: no-repeat;
background-position: top left;
background-attachment: fixed;
}
#wrapper{
position:relative;
max-width:1132px;
margin:0 auto;
box-shadow:0 0 6px #999;
background:#e9e9e9;
overflow:hidden;
}Et ça, le header.php
<body <?php body_class(); ?>>
<div id="wrapper">
<!-- Fond & Logo -->
<div id="head">
<div id="logo">
11 réponses
J'aurais du le remarquer plutôt, mais ton contenu (ta div wrapper) n'a pas de largeur vraiment fixe, en gros si elle fait moins de 1132px elle prendra toute la largeur, donc passera sur ton fond. Donc tu peux mettre un margin: 0 20%; au lieu de margin: 0 auto; Comme ça elle sera toujours centrer mais laissera 20% sur la droite et la gauche, et donc on verra ton fond car il fait aussi 20% de largeur.
Après si l'écran est trop petit, même si ça marche toujours ton contenu est fortement réduit, donc là tu peux mettre des règles comme ça dans ton css:
@media screen and (max-width: 980px) {
#wrapper{
margin-right:0;
}
}Dès que la résolution sera inférieur à 980px, alors une nouvelle règle s'ajoute à la div wrapper qui margin-right:0; donc tu aura toujours 20% sur la gauche, 0 en haut et bas mais aussi 0 à droite.
Enfin j'espère que tu comprend et que je t'ai enfin répondu :)
Sinon lorsque ton background est qu'une couleur, pas besoin de mettre un repeat-x car c'est inutile ;)
Je vois que pour fixer la position tu as trouvé, pour la taille utilise un background-size , tu peux mettre les valeurs en pourcentage.
Alors j'avais déjà essayé le background-size: 20%; ça fonctionne bien, mais seulement pour "ma" résolution sur mon écran...si j'essaye sur le portable, tout de suite, l'image est coupée par le contenu... Du coup retour au point de départ, je ne trouve pas de solution...
Normalement ça doit fonctionner pour chaque résolution. Sinon tu peux créer une div spécifique pour ton background, à côté de ta div pour le contenu.
Mais sinon j'y pense, est ce que tu as la balise <meta name="viewport" content="width=device-width">
Car ça tombe la largeur de ton body s'adapte mal à celle de ton portable donc ton background est tronqué.
j'ai ajouté le meta, que je n'avais pas. Pas de changement. Dès que la fenêtre ou la résolution change de taille, l'image change certes de taille mais reste tronquée par le contenu.
Quant à la div, j'y ai pensé, j'ai juste pas essayé. Au pire si vraiment je n'y arrive pas, je passerai par là.
Je peux voir ton code complet pour voir ce qui ne marche pas? Enfin je veux dire la partie avec ta div de contenu, ton image et ton CSS, car je trouve étrange qu'avec un écran normal ça marche mais dès que tu diminues la taille de la fenêtre ça ne reste pas dans les mêmes proportions
J'avais mit un peu plus haut déjà, je vais remettre ici, en rajoutant 2-3 trucs. Le reste n'est ni fini, ni visible ( j'ai pas fini mon index.php )
style.css :
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size:100%; font-weight:normal;
}
html body{
background-image: url(images/bg.png);
background-repeat: no-repeat;
background-position: top left;
background-attachment: fixed;
background-size: 20%;
}
#wrapper{
position:relative;
max-width:1132px;
margin:0 auto;
box-shadow:0 0 6px #999;
background:#e9e9e9;
overflow:hidden;
}
/ *******HEADER******* /
#head{
margin:1.76%;
background:#FFFFFF repeat-x;
}
#head #logo{
position:relative;
background:url(images/logo3.png) top left no-repeat;
width:960px;
height:333px;
margin:0 auto;
}
/ *******MENU******* /
#menuEt là le header.php
<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>" />
<meta name="viewport" content="width=device-width">
<title><?php
/*
* Print the <title> tag based on what is being viewed.
*/
global $page, $paged;
wp_title( '|', true, 'right' );
// Add the blog name.
bloginfo( 'name' );
// Add the blog description for the home/front page.
$site_description = get_bloginfo( 'description', 'display' );
if ( $site_description && ( is_home() || is_front_page() ) )
echo " | $site_description";
// Add a page number if necessary:
if ( $paged >= 2 || $page >= 2 )
echo ' | ' . sprintf( __( 'Page %s', 'twentyten' ), max( $paged, $page ) );
?></title>
<link rel="profile" href="http://gmpg.org/xfn/11" />
<link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo('stylesheet_url'); ?>" />
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" />
<?php
/* We add some JavaScript to pages with the comment form
* to support sites with threaded comments (when in use).
*/
if ( is_singular() && get_option( 'thread_comments' ) )
wp_enqueue_script( 'comment-reply' );
/* Always have wp_head() just before the closing </head>
* tag of your theme, or you will break many plugins, which
* generally use this hook to add elements to <head> such
* as styles, scripts, and meta tags.
*/
wp_head();
?>
</head>
<body <?php body_class(); ?>>
<div id="wrapper">
<!-- Fond & Logo -->
<div id="head">
<div id="logo">
</div>
</div>
<!-- Menu -->
<nav id="menu">
<a class="nav-toggle" href="#">Navigation</a>
<?php wp_nav_menu( array( 'container_class' => 'menu-header', 'theme_location' => 'primary' ) ); ?>
<?php get_search_form(); ?>
<div class="clear"></div>
</nav>Il y a des traces de codes du theme twenty ten de wordpress, j'ai juste pas effacé. Voilà le code.
et l'image
Merci pour ta réponse, je vais tester ça tout de suite :)
pour le repeat-x, j'avais autre chose qu'une couleur avant, j'ai un peu oublié d'enlever le repeat ^^
c'est merveilleux, c'était tout bête en effet. Comme quoi un autre œil peut vous libérer d'un poids :)
Merci beaucoup !
De rien, c'est vrai que souvent on fait pas attention à ça, mais c'est après avoir testé, j'ai fait attention à la règle max-width et margin qui montre que la largeur n'est pas fixe, donc obligatoirement passe au dessus du fond
Enfin content de t'avoir aidé et bonne continuation ;)