How to add a full background image?

Hi,

i tried the solution in the documentation:

html {
background: url(images/background.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

no effect?!

Could you please post an url to your site?
Where have you added this code (to which file)?

i sent you a pm

1. You code is commented.
2. You are missing "transparent" part of background colour.
3. add bg to body not html:

Code: Select all

body {
 background: transparent url(images/gesunden.png) no-repeat center center fixed;
 -webkit-background-size: cover;
 -moz-background-size: cover;
 -o-background-size: cover;
 background-size: cover;
 }


Yet even with this code, browser expects to find file:
templates/gk_news2/css/images/gesunden.png
and I don't see one there, so you need to use relative path:
http://gesunden.org/images/gesunden.png

So the finished working code looks this way:

Code: Select all

body {
 background: transparent url('http://gesunden.org/images/gesunden.png') no-repeat center center fixed;
 -webkit-background-size: cover;
 -moz-background-size: cover;
 -o-background-size: cover;
 background-size: cover;
 }


but there is still a lot of things to do as background will be seen through opaque elements.

Hey, you know, I had a similar problem and after several attempts to change the css or html code read somewhere in the documentation of a module on Gavick that helped me get the bg's as I wanted.

Here´s the link http://extensions.joomla.org/extensions/style-a-design/page-background/18213

I'm sure the best way to do that is from code css or html, but this module can serve as a test. I hope it works for you

hi acropolis,

thank you for the tip. i bought a similar module from herdboy.com but hadnt success already.
i think, because iam no coder i have to give it in professional hands... thanks again:-)

i have now a plugin for a background image set. but it also works with your css.
now i have to set a white background on the places where the template has no white background.
for some places/classes i could set a white background, but for example in the pic i couldnt find a class that works.
please can you give me the right css code for this areas in the template?

the url i sent you before

Code: Select all

#gkSidebarLeft, #gkSidebarRight {
background: #fff;
}


Use above code in override.css

If there is any other element you would like to have white background - please create a screenshot and mark it (right now it looks quite nice, specially with transparent element just above the footer)

worked:-) thanks
if you have an ideo to optimize the template with transparence or so please let me know...

If you need to add transparent colour instead of solid one, please read about rgba format:
http://css-tricks.com/rgba-browser-support/
Just keep in mind that it doesn't work in some older browsers so adding a fallback (solid colour) will be nice.