Full background + problème css

Signaler
Messages postés
11
Date d'inscription
mardi 28 décembre 2010
Statut
Membre
Dernière intervention
21 octobre 2011
-
Messages postés
11
Date d'inscription
mardi 28 décembre 2010
Statut
Membre
Dernière intervention
21 octobre 2011
-
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:
http://www.treesign.eu/index.php?/theatre/

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:


#the-background   {   
position:fixed;
width:100%;
height:100%;
top:0px;
left:0px;
opacity: 0.5;
overflow: hidden;
z-index:-3;
   }



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)

#the-background   img{   
position:fixed;
width:100%;
height:100%;
top:0px;
left:0px;
opacity: 0.5;
overflow: hidden;
z-index:-3;
   }



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

3 réponses

Messages postés
60
Date d'inscription
jeudi 10 mars 2005
Statut
Membre
Dernière intervention
26 octobre 2011

Chalute,

Déjà 90 % de ton css est inutile mais bon passons sur ce detail.

Le css c'est bien, le connaitre c'est mieux.

Quand tu veux mettre une image en Background, tu ne le met pas par HTML pour après le positionner.

Je te propose ceci.

Enleve la balise de ton div ou tu met l'image principale.

Après fait ceci:

#the-background {
background: transparent url("/files/14_background.jpg") no-repeat top left fixed;
}

Après tu y ajoute ce que tu veux comme effet.

j'ai pas le temps de tester donc tu veras si cela fait ton affaire.

Bon courage.
Messages postés
11
Date d'inscription
mardi 28 décembre 2010
Statut
Membre
Dernière intervention
21 octobre 2011

Merci pour cette rapidité !
Seul soucis, l'effet full background est généré par un pluging .js et .php ce n'est pas de l'html.
Aurais-tu as une correction à conseiller après cette petite précision ?

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

/**
* Full Size Backgrounded
* 
* @version 1.0
* @author Vaska 
*/
function bg_img_resize() 
{
    var w = $(window).width();
    var h = $(window).height();
    var iw = $('#the-background img').attr('width');
    var ih = $('#the-background img').attr('height');
    var rw = iw / ih;
    var rh = ih / iw;
    var sc = h * rw;
    if (sc >= w) {
        nh = h;
        nw = sc;
    } else {
        sc = w * rh;
        nh = sc;
        nw = w;
    }

    $('#the-background img').css({height: nh, width: nw});
}

$(document).ready(function(){ bg_img_resize(); });
$(window).resize(function(){ bg_img_resize(); });

$(window).resize(function(){ 
    bg_img_resize(); 
    $('#the-background').css({ 'top' : 0, 'left' : 0 }); 
});
$(window).scroll(function(){ 
    bg_img_resize(); 
    $('#the-background').css({ 'top' : 0, 'left' : 0 }); 
});


et le code php:

<?php if (!defined('SITE')) exit('No direct script access allowed');

/**
* Full Size Backgrounded
* 
* @version 1.0
* @author Vaska 
*/
function full_background()
{
// we'll just get it from the page background image
global $rs;
if ($rs['bgimg'] != '') {
// get the dimensions
$size = getimagesize(DIRNAME . '/files/' . $rs['bgimg']);
return "";
}
return;
}

?>


pour le reste du css, je vais devoir éclaircir tout ça !
Messages postés
11
Date d'inscription
mardi 28 décembre 2010
Statut
Membre
Dernière intervention
21 octobre 2011

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/)