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?
replace the entire body tag in the them *THEME* (typo)
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?
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.
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
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
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.
If not ok you can contact me by skype: chuhuutrung.
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.
I tried this. Not only the background but also the blocks (which I want to keep in a color) turned white.
Wow! Thank you so much. That worked like a charm.
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
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
Thank you so much!!! This worked perfectly for my problem.
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.
Zip your theme and send it with your image stev at mac dot com and I'll get it running for you.
Steve
Steve
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
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
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
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
You have helped so much with that video... THANK YOU!
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
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
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.
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.
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
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
Wow - thank you !!
I just did everything - it totally worked.
Karen
I just did everything - it totally worked.
Karen
Developed a simple addon to do this for you across whole site, and free! :) -http://www.concrete5.org/marketplace/addons/background-image/...
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