Background image for page

Permalink 5 users found helpful
I'm not an HTML person (yet) but as a nooby I really want to put an image background on the page of my Plain Yogurt theme. Not in a block, mind you but on the page. Can someone tell me how I can do this?

View Replies: View Best Answer
tallacman replied on at Permalink Reply 1 Attachment
tallacman
Your css is in the core files. You'll need to modify the second selector which is 'body'. Use something link this:

body {
padding: 0px;
margin: 0px;
background-image: url(http://www.demo.performancec5.com/files/scene.jpg);
}

replace the entire body tag in the them with this text and you will pull this image from my server. And it will look like the attached image. This is an absolute url so you will need to upload YOUR image to a server and change the url to yours which should be in the same format.
You could also do this with a relative url if the file is in your theme > images folder.

steve
tallacman replied on at Permalink Reply
tallacman
replace the entire body tag in the them *THEME* (typo)
Wendy replied on at Permalink Reply
I tried to modify the 'body' file as you suggested but it did not work. I am working thru the 'Web root',then 'concrete',then 'themes',then 'default',then opening 'main.css' and 'typography.css, with code editor. Am I in the right place? can you describe the path to the core files?
Wendy replied on at Permalink Reply
When I put in that text it placed your image as the background for one of the blocks but not the background of the page. I'd like to keep the color in the blocks and have the image background appear behind them - around the edges of the website.
tallacman replied on at Permalink Best Answer Reply
tallacman
Wendy,

I've made a video showing how to do this:
http://vimeo.com/13531366
(encoding takes 30 minutes)
Working on the core themes is tricky because the relative url is a bit different than the usual method.

steve
pixelsgeek replied on at Permalink Reply
pixelsgeek
Hi mate,

3 steps for change background of body:

Step 1: Copy the image into image folder of your theme.

Step 2: Open the main.css in the css folder.

Step 3: Add this line to the body tag.

body {
  background: url(images/your_image_name.jpg) no-repeat left top;
}

If not ok you can contact me by skype: chuhuutrung.
Wendy replied on at Permalink Reply
I tried this. Not only the background but also the blocks (which I want to keep in a color) turned white.
wschlaeger replied on at Permalink Reply
wschlaeger
Wow! Thank you so much. That worked like a charm.
daveinpublic replied on at Permalink Reply
Hey there,

You can also just go into Dashboard, Pages & Themes, click Customize next to your theme and type this in the "Add Your CSS" section.

body {
background: url(images/your_image_name.jpg) no-repeat left top;
}

Then hit save, and when you go back to your website you should be good. If not, just click "Edit Mode" to jump start it.

Thanks, - David
happy56k replied on at Permalink Reply
Thank you so much!!! This worked perfectly for my problem.
Wendy replied on at Permalink Reply
Thanks so much for the time you put into the video. I keep working on it but it's hard for me to track as the windows are unfamiliar to me. I am using Hostmonster.
tallacman replied on at Permalink Reply
tallacman
Zip your theme and send it with your image stev at mac dot com and I'll get it running for you.

Steve
Wendy replied on at Permalink Reply
Steve,
After much study of your video (thanks) was able to get my background image to page. YAY!! It was a joyous moment. Now, then I want to put color background to the blocks. I read one post that said to put the <div> tag to the block but don't know where "the block" is. I also need to know how to change the color of the font in the navigation bar text.
Wendy
Wendy replied on at Permalink Reply
Steve,
After much study of your video (thanks) was able to get my background image to page. YAY!! It was a joyous moment. Now, then I want to put color background to the blocks. I read one post that said to put the <div> tag to the block but don't know where "the block" is. I also need to know how to change the color of the font in the navigation bar text.
Wendy
flippy replied on at Permalink Reply
You have helped so much with that video... THANK YOU!
rritz replied on at Permalink Reply
rritz
Hello there,

I have a question: I have inserted a background image, but now instead of being black the rest of the page, where the background image ends is white. I tried to add the background color again in main.css, but that didn´t change the style. Can you please help me?
Thanks
fmatlock replied on at Permalink Reply
fmatlock
Try using the background tag in your css and not the background-image tag, like this...


background : #000000 url(images/page_background.jpg) no-repeat top left;


Here's what the pieces are...

#000000 - this is the primary background color (change it to any code you like... this is black)
url(images/page_background.jpg) - this is the path to the images, change it to your path and filename.
no-repeat - this will place the image once in the background, you can also use; repeat, repeat-x or repeat-y here.
top left - this is where the image placement will start


This will do what you are looking for. Of course background-image is really part of the same css tree but background alone can and will do the job quite smoothly.

Hope this helps.
daveinpublic replied on at Permalink Reply
Hey there,

Just go into Dashboard, Pages & Themes, click Customize next to your theme and type this in the "Add Your CSS" section.

body {
background: url(images/your_image_name.jpg) no-repeat left top;
}

Hhit save, and when you go back to your website you should be good. If not, just click "Edit Mode" to jump start it.

Thanks, - David
PPPills replied on at Permalink Reply
PPPills
Wow - thank you !!
I just did everything - it totally worked.
Karen
harveyappleton replied on at Permalink Reply
harveyappleton
Developed a simple addon to do this for you across whole site, and free! :) -http://www.concrete5.org/marketplace/addons/background-image/...