Se connecter / S'enregistrer
Votre question

full background + problème css

Tags :
  • Arrière plan
  • CSS
  • Programmation
Dernière réponse : dans Programmation
20 Octobre 2011 14:41:07

bonjour à tous,
J'ai un petit soucis avec mes images de fond en full background, celles-ci s'adaptent à la page que lorsqu'on redimensionne la fenètre du navigateur.

Lors du téléchargement de la page ou de son rafraichissement, elles ne se placent pas bien.

voir exemple sur le site

J'ai vérifer le pluging .php et .js tout semble normal, le problème vient donc du code css (je pense).
Voici le code que j'utilise:

  1. #the-background {
  2. position:fixed;
  3. width:100%;
  4. height:100%;
  5. top:0px;
  6. left:0px;
  7. opacity: 0.5;
  8. overflow: hidden;
  9. z-index:-3;
  10. }


Lorsque que je change #the-background par #the-background img, l'image s'adapte à la fenètre mais elle est déformée (étirée)

  1. #the-background img{
  2. position:fixed;
  3. width:100%;
  4. height:100%;
  5. top:0px;
  6. left:0px;
  7. opacity: 0.5;
  8. overflow: hidden;
  9. z-index:-3;
  10. }


Quelqu'un aurait-il une idée ? une solution ?
Merci pour vos réponses futures !!


Autres pages sur : full background probleme css

a c 232 L Programmation
20 Octobre 2011 15:44:55

Salut,

Pour ton problème d'image qui ne se redimensionne pas lors du chargement de la page:
Il y a un soucis avec ta librairie JQuery, à la fin du fichier il y a un " en trop (enfin, y'a peut être d'autres problèmes).
unterminated string literal "
jquery-1.2.6.js (ligne 3551)

Du coup, ton code qui doit exécuter ta méthode au chargement de la page ne se fait pas, vu qu'il utilise JQuery.

20 Octobre 2011 23:43:14

OmaR a dit :
Salut,

Pour ton problème d'image qui ne se redimensionne pas lors du chargement de la page:
Il y a un soucis avec ta librairie JQuery, à la fin du fichier il y a un " en trop (enfin, y'a peut être d'autres problèmes).
unterminated string literal "
jquery-1.2.6.js (ligne 3551)

Du coup, ton code qui doit exécuter ta méthode au chargement de la page ne se fait pas, vu qu'il utilise JQuery.



Merci Omar par cette rapidité !
le ( " ) dans le pluging jquery-1.2.6.js à été supprimer;
mais le problème reste le même

voici le script .js et .php du full background peut-être qu'ils éclaireront quelqu'un.

  1. /**
  2. * Full Size Backgrounded
  3. *
  4. * @version 1.0
  5. * @author Vaska
  6. */
  7. function bg_img_resize()
  8. {
  9. var w = $(window).width();
  10. var h = $(window).height();
  11. var iw = $('#the-background img').attr('width');
  12. var ih = $('#the-background img').attr('height');
  13. var rw = iw / ih;
  14. var rh = ih / iw;
  15. var sc = h * rw;
  16. if (sc >= w) {
  17. nh = h;
  18. nw = sc;
  19. } else {
  20. sc = w * rh;
  21. nh = sc;
  22. nw = w;
  23. }
  24.  
  25. $('#the-background img').css({height: nh, width: nw});
  26. }
  27.  
  28. $(document).ready(function(){ bg_img_resize(); });
  29. $(window).resize(function(){ bg_img_resize(); });
  30.  
  31. $(window).resize(function(){
  32. bg_img_resize();
  33. $('#the-background').css({ 'top' : 0, 'left' : 0 });
  34. });
  35. $(window).scroll(function(){
  36. bg_img_resize();
  37. $('#the-background').css({ 'top' : 0, 'left' : 0 });
  38. });


et le code php:

  1. <?php if (!defined('SITE')) exit('No direct script access allowed');
  2.  
  3. /**
  4. * Full Size Backgrounded
  5. *
  6. * @version 1.0
  7. * @author Vaska
  8. */
  9. function full_background()
  10. {
  11. // we'll just get it from the page background image
  12. global $rs;
  13. if ($rs['bgimg'] != '') {
  14. // get the dimensions
  15. $size = getimagesize(DIRNAME . '/files/' . $rs['bgimg']);
  16. return "<img src='" . BASEURL . "/files/$rs[bgimg]' width='$size[0]' height='$size[1]' alt=''/>";
  17. }
  18. return;
  19. }
  20.  
  21. ?>




Contenus similaires
a c 232 L Programmation
20 Octobre 2011 23:52:21

tu es au courant que t'as 4 versions de jQuery dans ta simple page? :o 
21 Octobre 2011 00:04:33

heuu oui ... mais je ne sais plus trop laquelle garder ?
a c 232 L Programmation
21 Octobre 2011 09:08:10

Je les supprimerais toutes et prendrait la dernière version: http://jquery.com/

Mais faut voir si tes différentes librairies qui utilisent JQuery fonctionnent toujours après.

A noter que si tu n'as pas besoin de toutes tes librairies sur la page, il vaut mieux ne pas les ajouter, vu que ça oblige l'utilisateur à télécharger toutes tes librairies avant de pouvoir utiliser le site...
21 Octobre 2011 12:47:58

le problème a été résolu en supprimant les doublons jquery.js et en téléchargant la dernière version
(version: http://jquery.com/)

Merci Omar
Tom's guide dans le monde
  • Allemagne
  • Italie
  • Irlande
  • Royaume Uni
  • Etats Unis
Suivre Tom's Guide
Inscrivez-vous à la Newsletter
  • ajouter à twitter
  • ajouter à facebook
  • ajouter un flux RSS