Go to 'themes' - customize' then choose 'Background', then choose a color.

Not bad my friend... Thank you.

Happy to help.

mhawke- back to you.

Tried the editing this evening when I got home, not totally strange- I'd customized the plain yogurt one other time for page width. Below is a copy of the main css with your code. Uploaded the image "background_home_2r.jpg" to the images folder. did the whole theme in root/themes as dark_chocolate_homepage_theme.

Theme loads but no image.

Once again thanks. Appreciate learning.

SS

/* HTML Tag Redefinition */
html, body {height: 100%; }


img {border: 0px}
a { cursor:pointer}

label { font-weight:bold;}
fieldset { border:1px solid #ccc;}

/* error text class optionally provided by theme */
div.ccm-error-response {color: #f00; margin-bottom: 12px}

/* Page Structure / Navigation */
#page{ width:900px; margin:auto; text-align:left }
#page #headerSpacer{ height:64px }
#page #header{ position:relative; }
#page #header #logo{ color:#999; font-size:32px;
font-family:Arial, Helvetica, sans-serif;
line-height: auto;
margin-bottom: 0px; padding: 0px; margin-top:8px; cursor:pointer; left:0px ; z-index:10; width:auto; float:left; position: relative }
#page #header #logo a{ /* customize_header_logo */color:#777; /* customize_header_logo */ text-decoration:none;}
#page #header #logo p{ display:inline; line-height:inherit; font-size:inherit; padding:inherit; margin:inherit; color:inherit }


#page #header #headerNav{ position: absolute; top: 14px; right: 0px; z-index:2; width:100%; overflow:visible;}
#page #header ul.nav-header{ list-style:none; margin:0px; padding:0px; width:auto; z-index:2; overflow:visible; float: right}
#page #header ul.nav-header li{float:left; padding:2px 0px; margin-left:16px; margin-bottom: 0px; color:#999; font-size:13px; margin-top:0px }
#page #header ul.nav-header li a,#page #header ul.nav-header li a:hover{ /*color:#999999*/ }
#page #header ul.nav-header li.nav-selected{ border:1px solid #333; padding:2px 8px; }
#page #header ul.nav-header li.nav-selected a { /*text-decoration:underline*/ }
#page #header #header-area{margin-top: 10px; margin-bottom: 10px }
#page #header #header-area #header-area-inside{margin-bottom: 12px;}
#page #header #header-area img { display: block}
#page .divider{padding-top: 12px; background: url(images/nav_horizontal_divider.gif) no-repeat top; overflow:hidden; height:1px; clear:both; width:100%; }

#page #central{background:url(images/nav_sidebar_right_bg.gif) repeat-y center; clear:both; }
#page .no-sidebar { background-image: none !important}
#page #central.central-left { background:url(images/nav_sidebar_left_bg.gif) repeat-y center !important; }
#page #central.central-left div#sidebar {float: left !important; }
#page #central.central-left #body {padding-left: 68px !important; padding-right: 0px !important; float:right}

#page #central #body{ float:left; width:67%; padding-right:28px; padding-left: 0px !important; padding-right: 0px !important }
#page .no-sidebar #body{ float: none !important; width: auto !important; }
#page #central #sidebar{ float:right; width:23%; overflow:hidden }
#page #central #sidebar p{ line-height:24px}
#page #central #sidebar ul.nav{ list-style:none; margin-left:0px; padding:0px; padding-left:24px; font-size:11px;}
#page #central #sidebar ul.nav li{ margin-bottom:16px; }
#page #central #sidebar ul.nav a{ text-decoration:none; /* color:#333*/ }
#page #central #sidebar ul.nav a.nav-selected {font-weight: bold}
#page #central #sidebar ul.nav a:hover{ text-decoration:underline }
#page #central #sidebar ul.nav ul{ list-style:none; margin-left:0px; padding:0px; padding-left:16px; margin-top:16px; }
#page #central #sidebar ul.nav ul li{ margin-bottom:16px; }

#page #central.navLeft{ background:url(images/nav_sidebar_left_bg.gif) repeat-y center; }
#page #central.navLeft #sidebar{float:left}
#page #central.navLeft #body{float:right; padding-right:0px; width:68%; }

#page #central.noSideNav{ background: none; }
#page #central.noSideNav #sidebar{ display:none }
#page #central.noSideNav #body{float: none; padding-left:0px; padding-right:0px; width:100%; }

#page #footer{ padding-top:24px; clear:both; padding-bottom:16px; color:#555; font-size:10px }
#page #footer a{ text-decoration:none }
#page #footer span.sign-in {margin-left: 20px}
#page #footer span.powered-by { float:right; }

/* Page Elements */

.pagingNav{ margin:16px 0px 8px 0px}
.pagination{ text-align:center; color:#bbb; padding-top:4px}
.pagination .pageRight{width:20%; float:right; text-align:right}
.pagination .pageLeft{width:20%; float:left; text-align:left}

/* MISC STYLES & SHORTCUTS */
div.code {border: 1px solid #ddd; background: #eee; padding: 10px}
div.spacer,div.ccm-spacer{ clear:both; font-size:1px; line-height:1px }
.noTopSpace{margin-top:0px; padding-top:0px}

/* customize_miscellaneous */ /* customize_miscellaneous */

Try this:


If you get a problem with IE try putting a new div under body tag and then reference the image.

You don't need to repeat yourself calling 'background', just stack in a line.

My code calls for the image to just be in your theme folder. If you want to put the background image in the 'images' folder then try changing the last line of my css to:



Also, I think my original code had a small problem. Leave the quotes off the images/background_home_2r.jpg part or C5 misinterprets the path to the image.

Hi again mhawke

Sorry if this is a nuisance. Would like to resolve this and move on though, think site calls for some changes.

Tried 55webdesign code, same result (white background).

Here is a copy of section of your code:

/* HTML Tag Redefinition */
html, body {height: 100%; }
body {/* customize_background */ background-color: #000; /* customize_background */

padding: 0px;
margin: 0px;
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center center;
-moz-background-size: cover;
background-size: cover;
color: #333333;
line-height:20px;
height:100%;
background-color: transparent;
background-image:url(images/background_home_2r.jpg);

}

img {border: 0px}
a { cursor:pointer}


image is in images folder. I am thinking the problem is that the rest of the site is in plain yogurt and I just want to make the splash page with this modification.

What do you think?

Many thanks

SS

http://www.stephenscott.ca/

Works for me.

Example:http://www.55webdesign.co.uk/

Let's see if we can get you back to making some more of your beautiful artwork!

Two things...

1) When I look at the 'view source' of your page, the css you think you are changing isn't coming through at all.

2) Your image does not appear to be where you think it is.

Your background image should show up if you put this in your browser but it's not there:



This indicates that you might be placing stuff in the wrong folder on your site:

A couple of things to check.

Make sure you are changing the main.css file in your '[root]/themes/image_page_wide' folder.

Make sure your all your concrete5 caching is turned off at 'Dashboard->System and Settings->Cache and Speed Settings'

Thanks for the compliment. For sure, like to move on. I find this work interesting, and I have patience knowing there is an answer. But hey-

So- sorry to be a problem. Got to resolve this.

Nope, everything in httpdocs/themes/dark_chocolate_homepage_theme. code in main css. the page that shows in my link is a full page, plain yogurt customized, image_page_wide. Want to make modifications to dark chocolate and use it there, but maybe better to use the code in image_page_wide (plain yogurt theme)....?

Caching off. What to do.

Thanks a lot for any more help.

One last thought. When I click activate it wants to apply to all pages. So I didn't. I didn't do that to image_page_wide and it still worked.

Your main page is most definitely pulling from '[root]/themes/image_page_wide'. If you want it to get it's theme from someplace else, you need to:

1) Hover over the 'Edit' button
2) Choose 'Design'
3) In the lower bunch of theme icons, you can choose a different theme for that one page.

Is that what you're looking to do?

Good morning

By default my site uses plain yogurt. some pages modified some not. for main page want to use modification (ie: dark_chocolate_homepage_theme.

Theme is installed in themes- dashboard. when i edit page, hit design, I select that theme from the drop down. all is good but no image. image is in root/dark_chocolate_homepage_theme (or else it wouldn't show up in dashboard).

file in question is a 500K jpg- should fill screen, is 96dpi, but measures 837 X 592... problem here?

Cheers

In CSS the path is relative to the stylesheet or css file.

if your image is located in root/a/b/c/image.jpg
if your stylesheet is located in root/g/h/y/main.css

This is what it should look like:

background-image: url(../../../a/b/c/image.jpg)


It's kinda like "backing-out" of current folder, up to root, then down into where the image actually resides.

hope this helps.

I managed to make the background image work with the dark chocolate theme, on one page, which is what I wanted.

Not sure how it worked this time. Just deleted the theme from the site and reinstalled it with a different name, and a different version of the image. Same code, although deleted the line just under the code inserted.

So there- thanks for all the help. the code worked, but it seems the operations regarding the editing of css has very specific protocols....

hello mhawke
I would like to ask:
is the procedure the same as you wrote here if I'm working with different theme (Long Story Short).
I followed your video, later tried putting your css to my main.css but no changes to my web :(

tks