How to insert a picture as background
Permalink 1 user found helpfulI' searching a way to instert a picture in the background of my theme, instead of just a colour (i use the "Dark chocolate" theme). Could you please tell me if there is a simple way of doing this? Or could you redirect me to another theme where this would be possible?
Many thanks,
Nicolas

But then it requires you to know some css, and if you don't then perhaps the time you need to spend on learning and implementing a css approach will cost you more than $15.
To learn your basic css, go to http://www.w3schools.com
http://www.concrete5.org/community/forums/themes/customising-theme-...
I'm not sure about the location of the file "header.php" that i have to edit. Since i use "dark choclate" theme, i took this one:
/www/concrete/themes/dark_chocolate/elements/header.php
But the modification doesn't change anything to my site. I also deleted this file to check that it was the right one, but again, no change to my site. If you have a solution, please tell me...
Thanks
nicolas
To clear the site cache you go to 'Dashboard > System & Settings > Optimization > Clear Cache' or type 'Clear Cache' in the intelligent search box.
To clear your browser cache CTRL + F5 (at least for Chrome) a couple of times should do the trick.
Be sure you put the header.php file back because otherwise you will not be able to load anything with that theme.
If you want to try out a css approach you should edit main.css in the themes folder.
You should also read this how-to which goes through the editing of a core theme: http://www.concrete5.org/documentation/how-tos/editors/customize-a-...
If you want the quick and dirty low down, do it this way.
In your chosen theme, find the CSS stylesheet file that takes care of setting the color of the <body>-tag.
This would most likely be in this file "main.css"
Open that file and find something like this rule:
body {background-color: #000; padding: 0px; margin: 0px; }
and replace it with something like this:
body {background: #000 url(images/YOUR-BACKGROUND.jpg) no-repeat 0 0; padding: 0px; margin: 0px; }
This is the easiest way to do it :0)
//Carsten - Denmark
I saw that there are Jquery plugins doing this, but i have no idea of how putting this in place.
Thanks again,
Nicolas
Try putting the background image in html tag instead of the body:
html{background: url(images/background.jpg) no-repeat top left fixed; background-size: cover;}
And again, see the link I posted before in this thread: http://webdesign.about.com/od/css3/f/blfaqbgsize.htm...
Right after the opening body tag, insert this div.
<div id='bg'> <img src='your_picture.jpg' width='100%' height='100%'/> </div>
This image inside this div is your background picture, make sure it is around 1300x800px, and it will cover any resolution.
Then add this in the stylesheet for that div:
#bg{position:fixed; top:0px; left:0; width:100%; height:100%;z-index:-1;}
Now all you need to do is wrap the entire content of your page into one div, give it an id, and some styles.Let's say we call it mainPageWrapper. Then this is the css for it.
#mainPageWrapper{width: 100%;height: 100%;position: fixed;top: 0;left: 0;z-index:0;}