Body> background-image: width 100% = 85% ?

Résolu/Fermé

Flamingo - 23 sept. 2013 à 11:39
harlock59 - 18 févr. 2014 à 21:22

Bonjour,

J'ai la background-image de mon body qui fait 1280x600px.
Et voici ci-dessous les settings de mon body:

body { width:1280px;  height:600px; background-color:#000; background-image:url(img/wtf.jpg);background-repeat:no-repeat; repeat-x:no-repeat; }

Tout allait très bien jusqu'à ce matin: j'allume mon pc, et quoi ? La background-image de mon body ne prend plus la totalité de la largeur de l'écran, mais plus que 85% environ. Alors que depuis 1 ou semaines, elle s'affichait correctement.

Je mets alors à mon body une width:100%, mais le problème persiste, sur Chrome, pas sur IE ni FF. Que se passe-t-il ? QU'est-ce qui m'échappe ?

Merci de vos réponses.
Cldt

A voir également:

Background image 100 width
Image iso - Guide
Acronis true image - Télécharger - Sauvegarde
Faststone image viewer - Télécharger - Visionnage & Diaporama
Image iso windows 10 - Guide
100 mo en go ✓ - Forum Windows

3 réponses

Réponse 1 / 3

Pitet Messages postés 2826 Date d'inscription lundi 11 février 2013 Statut Membre Dernière intervention 21 juillet 2022 525
23 sept. 2013 à 14:49

Salut,

Tu peux essayer d'ajouter un reset-css.

Version simple :

html, body { margin: 0; padding: 0; }

Version plus complète (Eric Meyer's Reset Styles) :

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: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}

Bonne journée

Réponse 2 / 3

RAD ZONE Messages postés 5230 Date d'inscription samedi 20 janvier 2007 Statut Contributeur Dernière intervention 17 août 2024 1 360
23 sept. 2013 à 14:55

Salut

bien que je deconseil de mettre une image full screen en bg !

voila 2 exemples sans js qui fonctionne

1 le plus simple ,simple image en bg css , mais ne s adapte pas a l ecran !

<!DOCTYPE html>
<html>
  <head>
    <title>
      RAD ZONE Webcreation
    </title>
    <meta charset="utf-8">
    <style type="text/css">
    <!--
    html, body{
      padding: 0;
      margin: 0;
    }

    body {
      width: 100%;
      height: 100%;
      background-color: #000;
      background-image: url(https://db.tt/yHc5cUA1);
      background-repeat: no-repeat;
      color: #352D4F;
    }

    #centre {
      width: 450px;
      color: #53807B;
      text-align: center;
      background-color: #1B1B1B;
      margin: auto;
    }
    -->
    </style>
  </head>
  <body>
    <div id="centre">
      <h2>
        Background fullscreen image only CSS
      </h2>
    </div>
  </body>
</html>
</html>

2 un peu plus complex celui ci s adapte au screen , utilise une image dans une div !

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>
      RAD ZONE Webcreation
    </title>
    <meta charset="utf-8">
    <style type="text/css">
    <!--
    #centre {
      position: relative;
      width: 450px;
      z-index: 10;
      color: #53807B;
      text-align: center;
      background-color: #1B1B1B;
      margin: auto;
    }

    .background {
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      position: absolute;
      z-index: 2;
      overflow: hidden;
    }

    .screen {
      height: 100%;
    }

    .image {
      width: 100%;
    }

    .full {
      width: 100%;
      height: 100%;
    }
    -->
    </style>
  </head>
  <body>
    <div id="centre">
      <h2>
        Background fullscreen image only CSS
      </h2>
    </div>
    <div class="background">
      <img class="full screen image" alt="" src="https://db.tt/yHc5cUA1">
    </div>
  </body>
</html>

sinon cela peux ce faire avec du js

jquery exemple

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>
      Background Image | jQuery
    </title>
    <style type="text/css">
* {
    margin: 0;
    padding: 0;
    }

    #bg {
    position: fixed;
    top: 0;
    left: 0;
    }

    .bgwidth {
    width: 100%;
    }

    .bgheight {
    height: 100%;
    }

      #centre {
      position: relative;
      width: 450px;
      color: #53807B;
      text-align: center;
      background-color: #1B1B1B;
      margin: 50px auto;
    }
    </style>
  </head>
  <body>
    <img src="https://db.tt/yHc5cUA1" id="bg" alt="">
    <div id="centre">
      <h2>
        Background fullscreen image jQuery
      </h2>
    </div>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" type="text/javascript">
</script>
<script type="text/javascript">
$(function()
    {

     var theWindow = $(window),
     $bg = $("#bg"),
     aspectRatio = $bg.width() / $bg.height();

     function resizeBg() {

       if ((theWindow.width() / theWindow.height()) < aspectRatio) {
         $bg
         .removeClass()
         .addClass('bgheight');
       } else {
         $bg
         .removeClass()
         .addClass('bgwidth');
       }

     }

     theWindow.resize(function()
       {
         resizeBg();
       }
     ).trigger("resize");

    }
    );
    </script>
  </body>
</html>

Flamingo
23 sept. 2013 à 18:05

Salut,

Merci à vous 2 ! vraiment!

Super, ça marcche avec <img id="bg"> et #bg { position: fixed; top: 0; left: 0; z-index: 1; width: 100%; height: 100%;}

Mais pourquoi tant de complications alors que jusqu'ici , sur tous mes sites, tout fonctionnait simplement avec un body {background-image=''; width=100%; } ?
J'ai du mal à comprendre...

Mais en tous cas merci pour vos réponses efficaces, je note la technique !!!
Merci beaucoup,

Bon aprèm à vous !
:)

Flamingo
23 sept. 2013 à 18:20

Sauf que les problèmes, c'est qu'à présent tout est déformé sur Firefox :(
et que je ne vois plus mes notices ou messages d'erreur php, qui sont cachés sous ma background image..... lol, ok......

?

RAD ZONE Messages postés 5230 Date d'inscription samedi 20 janvier 2007 Statut Contributeur Dernière intervention 17 août 2024 1 360
23 sept. 2013 à 18:47

loool

oui ca ne m etonne qu a moitie ;-))
c est que en fait lorsque l on utilise les methodes avec une image dans une div , il est preferable de commencer par cela et ensuite integrer les element ! ou alors bien connaitre css
pour pouvoir le modifier !

juste pour voir !

tu a bien mis l image bg dans aucune autre div ou element mais uniquement dans le body !

tu as bien mis a la div conteneur principal ( celle qui contient toute les autres element de la page ) son css en position: relative;

Réponse 3 / 3

Flamingo
Modifié par Flamingo le 23/09/2013 à 19:30

Ben moi ce qui m'étonne, c'est que j'avais gardé index.html, et ça s'affiche parfaitement avec body {background-image 1280x600 à width:100%; }, alors que index.php affiche mal.

Oui j'ai fait cela, mais mes notices et messages d'erreur php ne s'affichent toujours pas.
Aussi j'ai un deuxième background pour d'autres pages (background 1 refleté, cette fois-ci de 1280x1400px), et je me demandais comment lui faire un repeat puisque mon code à présent se présente comme suit :


<body>
<img src="img/background_inverted.jpg" alt="" id="bglong" />
<div class="conteneur_principal">


html, body { margin: 0; padding: 0; }
body { background-color:#000; height:auto;}
#bg {background-repeat:no-repeat; margin:0px; padding:0; position:fixed; width:100%; height:100%; top:0; left:0; z-index:10;}
#bglong {background-image:url(img/Pivoine_inverted.jpg);background-repeat:repeat; margin:0px; padding:0; position:fixed; width:100%; height:auto; top:0; left:0; z-index:10;}
.conteneur_principal {position:relative; z-index:20;}

Sinon au pire je reste sur mon background premier avec une position relative pour mon conteneur_principal, mais j'aimais bien le design de mon background_inverted....

Merci d'être à l'affût de mes questions css-existencielles (et des questions des autres aussi ! biensur), lol, c'est vraiment cool

RAD ZONE Messages postés 5230 Date d'inscription samedi 20 janvier 2007 Statut Contributeur Dernière intervention 17 août 2024 1 360
23 sept. 2013 à 20:21

index.html, ça s'affiche parfaitement alors que index.php affiche mal. ....mais mes notices et messages d'erreur php ne s'affichent toujours pas.
les includ php doivent avoir un css qui rentre en conflit !

mais si tu utilise ma premiere solution le plus simple ,simple image en bg css , mais ne s adapte pas a l ecran ! qui est a peu de chose pres la meme chose que ce que tu avais avant , tu as aussi ce probleme de notices et messages d'erreur php?

comment lui faire un repeat
un seul probleme a la fois :-))

Flamingo
23 sept. 2013 à 20:49

Sur ma page index.php, je n'ai pas d'include (non, même pas des menus..).
J'ai pour l'instant x fois l'include de connection à ma base de données via pdo, sur inscription.php, connexion.php, etc...

A propos, j'ai bien lu "1 seule question à la fois" , lol, mais jte le dis quand-même...... j'hallucine: lorsque je mets un padding à un div, il s'agrandit d'autant ! c'est dingue non ??!! Mon éditeur réinterprète mes codes ou quoi ? bref, je reviens à mon premier mouton :

Oui mes notices et messages d'erreur php ne s'affichent plus, (super !! lol euh...), elles sont masquées par l'image en background que j'ai pourtant mise en z-index:0, ou 1...

RAD ZONE Messages postés 5230 Date d'inscription samedi 20 janvier 2007 Statut Contributeur Dernière intervention 17 août 2024 1 360
23 sept. 2013 à 21:27

ok j avais mal compris !

c est les message d erreur php que tu ne vois pas !! c est normal avec les solutions de l image dans une div avec ou sans js !

les ligne d erreur php ne sont pas incremente dans la div conteneur principal ! elle sont meme hors html

comme cet exemple elle sont avant le doctype

<br />
<b>Notice</b>:  Undefined index: chkvalidhosts in <b>bytescrambler\Script\encoder.php</b> on line <b>12</b><br />
<br />
<b>Notice</b>:  Undefined variable: errors in <b>bytescrambler\Script\encoder.php</b> on line <b>22</b><br />
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>

mais si il ni a que cela qui te gene ,
tu enleve juste l image , le temps que tu travaille ton php et une fois qu il ni a plus d erreur php tu remet l image a sa place

a+

Flamingo
23 sept. 2013 à 21:43

Ok en ce qui concerne les messages d'erreur php. Merci pour ton aide ;)

Mais tu m'avais dit une seule question à la fois, donc par rapport à l'img en background, sous firefox, ça me fait un design tout élargi, tout étiré, tout vilain, alors que sous Chrome, tout est fin, nickel.

Oh, je viens d'ouvrir quelques uns de mes sites précédemment créées, et ils sont tous avec le même problème de background à 80% sur Chrome ! waaoooooo !!
J'ai installé récemment Wordpress et WooCommerce pour tester... Tu crois que ça vient de là?

Ok je vais checker de ce côté là.
Merci pour ton aide en tous cas ;)

Bonne soirée

RAD ZONE Messages postés 5230 Date d'inscription samedi 20 janvier 2007 Statut Contributeur Dernière intervention 17 août 2024 1 360
23 sept. 2013 à 22:07

Mais tu m'avais dit une seule question à la fois, donc par rapport à l'img en background, sous firefox, ça me fait un design tout élargi, tout étiré, tout vilain, alors que sous Chrome, tout est fin, nickel.

??
il faudrait que je vois ca de visu !

si tu as un lien ? met le ici ou en message prive si tu prefere
sinon envoi moi les fichiers en .rar par message prive !

je regarderais quand j aurais 5mns

a+

Discussions similaires

Retrouver l'image originale après avoir fait des modifications ?

1Go en Mo ou 100 Mo en Go comment convertir

100 mo internet, équivalent en nombre d'heures

100 mo d'internet en gros c quoi ?

Comment enlever le rouge sur la photo svp ?