How to insert a picture as background
Permalink 1 user found helpful
Hello,
I' 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
I' 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
This would probably be the easiest method to do this -http://www.concrete5.org/marketplace/addons/backstretch/...
...and this would be one (of many) cheaper methods: http://webdesign.about.com/od/css3/f/blfaqbgsize.htm...
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
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
Hi, and thank you for your answers; i'm trying to follow this procedure, but not really successfull for the moment:
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
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
That is the header file used for your theme, and the reason you don't see any changes would be a caching issue. When you make changes in your code you should make a habit of clearing your site and browser cache.
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-...
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-...
Hi Nico
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:
and replace it with something like this:
This is the easiest way to do it :0)
//Carsten - Denmark
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
Thanks Carsten, it works, but i would like to stretch the picture to fit the screen; is there any html command that i could integrate in the main.css or header file?
I saw that there are Jquery plugins doing this, but i have no idea of how putting this in place.
Thanks again,
Nicolas
I saw that there are Jquery plugins doing this, but i have no idea of how putting this in place.
Thanks again,
Nicolas
There are different css3 rules to try, but be aware they won't work in all browsers.
Try putting the background image in html tag instead of the body:
And again, see the link I posted before in this thread: http://webdesign.about.com/od/css3/f/blfaqbgsize.htm...
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...
Thank you Adajad, the background-size option works for me (Firefox), i'll test it with some other browsers.
If you want a solution that doesn't require Css3, so it can be displayed in older browsers, here it is.
Right after the opening body tag, insert this 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:
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.
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;}
Developed a simple addon to do this for you across whole site, and free! :) -http://www.concrete5.org/marketplace/addons/background-image/...
