Question

So im currently developing this site:

http://remedia-solutions.com/clientes/0039_kiplingmexico/demo2/

its almost done but im currently having some problems when the 2 background image resize. On firefox it works perfectly but not in chrome the 2nd background (text background) totally shorten in a wrong way im using only ccs to do this so heres my ccs code for it:

#fondo1{
    background-image: url("images/imagesbackground/BACKGROUND-INICIO.jpg");
    background-attachment:  fixed;
    background-position:    top center; 
    background-repeat:      no-repeat;
    background-size:            cover;
    -moz-background-size:       cover;
    -webkit-background-size:    cover;
    position:absolute;
    width:100%;
    height:100%; 
}
#fondo1int{
    background-image: url("images/INICIO.png");
    background-attachment:  fixed;
    background-position:    center center; 
    background-repeat:      no-repeat;
    background-size:            50%;
    -moz-background-size:       50%;
    -webkit-background-size:    50%;
    position:absolute;
    width:100%;
    height:100%; 
}

im using on the 2nd div 50% cause otherwise it will be like hella big.Btw im using parallax but as far as i know it doesnt affect at all.

Heres the image on chrome :

http://oi47.tinypic.com/2ivle8i.jpg

Image on firefox:

http://oi47.tinypic.com/2hr1o9e.jpg

Any ideas?

Answer 1

Remove the -webkit-background-size: 50%; from your #fondo1int in your .css and it should behave the same in both browsers.

At the end the class should look like this:

#fondo1int {
   background-image: url("images/INICIO.png");
   background-attachment: fixed;
   background-position: center center;
   background-repeat: no-repeat;
   background-size: 50%;
   -moz-background-size: 50%;
   position: absolute;
   width: 100%;
   height: 100%;
   top: 0;
   left: 0;
}

Hope it helps!