[SOLVED]Problem with background Image

[Tyian]

Hi,

 

I'm trying to add a background image (or 2), that ones that only show on the sides.

 

Like some site have, products showing on the side, promotion and something like that.

 

 

 

I tryed and did something close, but when I exit the front page and select on page from my site it loses the format and gets all messed up.

 

 

 

 

Can anyone help me on this?

 

I'm not sure if I'm doing it right, I'm editing the background of the "body" css but I'm not getting the results.

 

I have lost so many hours around this and still nothing like I wanted to be.

 

 

 

 

 

Thank you.

 

 

 

SOLVED thanks to dioniz!! 

#leo-maincontainer{
    background: url(../img/default/banner43.png) no-repeat 50% 0 #fff;
}

Edited June 12, 2014 by Tyian (see edit history)

[dioniz]

Try to put background image in "#leo-maincontainer".

As i can tell you don't have it in any css file so add it to global.css.

[Tyian]

Try to put background image in "#leo-maincontainer".

As i can tell you don't have it in any css file so add it to global.css.

 

Thank you for the suggestion.

 

Its worked on the main page, but a soon as I move the the product page or other page, the background get messed up again.

 

I dont know why...

#leo-maincontainer{
	background: url(../img/default/banner43.png) no-repeat center center;  
	background-repeat: repeat-y;
	background-position: right;
  	-webkit-background-size: cover;
  	-moz-background-size: cover;
  	-o-background-size: cover;
  	background-size: cover;
}

[dioniz]

Ok, first cut the top and bottom white part of your background.

Then put just this code:

#leo-maincontainer{
    background: url(../img/default/banner43.png) no-repeat 50% 0 #fff;
}

[Tyian]

 

Ok, first cut the top and bottom white part of your background.

Then put just this code:

#leo-maincontainer{
    background: url(../img/default/banner43.png) no-repeat 50% 0 #fff;
}

 

 

Thank you again dioniz! 

 

This is working nice in all pages now

 

Except on thing, depending on the resolution of the person viewing my site, the banner will go under the slider or des-formatted.

 

Can I do something about that? Like fixing the background or something like that.

 

 

Thank you again!

[dioniz]

Only thing i see, is to find breaking points in your css file and make bg smaller for those.

 

They look like this

@media (min-width: 1200px) {

}

and you put your smaller bg inthere like this:

@media (min-width: 1200px) {
    #leo-maincontainer{
        background: url(../img/default/banner43_small.png) no-repeat 50% 0 #fff;
    }
}

Edited June 12, 2014 by dioniz (see edit history)

[Tyian]

 

Only thing i see, is to find breaking points in your css file and make bg smaller for those.

 

They look like this

@media (min-width: 1200px) {

}

and you put your smaller bg inthere like this:

@media (min-width: 1200px) {
    #leo-maincontainer{
        background: url(../img/default/banner43_small.png) no-repeat 50% 0 #fff;
    }
}

 

I didn't find the "@media (min-width: 1200px) " thing in my css, but now Its working well, the other pc that had problem I forgot to clear the cache!

 

 

Thank you dioniz for all your work! You alone help me out in this

 

 

SOLVED!!

Edited June 12, 2014 by Tyian (see edit history)