full background + problème css

Question

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 !!

cs_nemo_1 · Answer

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.

donzus · Answer

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 !

donzus · Answer

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

Full background + problème css

3 réponses

Votre réponse

Discussions similaires