How do I add a Backgroun image for Greek Yogurt?

Permalink 2 users found helpful
I want to edit my Greek Yogurt theme so that it has background image instead of just plain colors.

I have seen a video that showed how to do this to the default theme but I don't know who to do this to Greek Yogurt.

I got as far as creating another copy of Greek Yogurt and installing it into my themes so I have to copies and I have opened of the main.css file but I don't know what to do now.

Can someone help me out?

Danielzxzx
 
PineCreativeLabs replied on at Permalink Best Answer Reply
PineCreativeLabs
Look for the following folder: yourwebsite.com/concrete/themes/greek_yogurt/images

Upload your background image to the images folder.

In typography.css, look for:
body {
   height: auto; 
   /* customize_body-background */ background-color: #dff5ff; /* customize_body-background */
}

Here, edit the background to do what you want. For example, to tile your background image:
body {
   height: auto; 
   background: url(images/bgimage.jpg);
   background-repeat: repeat;
}

Hope this helps?
Danielzxzx replied on at Permalink Reply
Danielzxzx
Thanks it worked! I want the background image to be centered. How do I do that?
mflateau replied on at Permalink Reply
body
{
background-image: url(images/yourimage.fileextension);
background-repeat: repeat;
background-attachment: fixed;
background-position: center;
}

Are some CSS examples to modify the background image.
DaniScarlett replied on at Permalink Reply
I'm really new to all of this, and I'm trying to add a background image to Greek Yogurt as well... I figured out how to do so on Plain Yogurt, but adding a css in the Greek theme does not make it appear on the site.

Could you explain how to find the place where you modify it manually?

and maybe explain which areas are supposed to say what so that I know what text to add in so that my images show?

Thanks!
Sorry I know I'm super new
Chatterbuzzmarketing replied on at Permalink Reply
Hi I put this code in however now the background is just White no image is coming up code below

Please help

/* customizable styles */


body
{
background-image: url(images/background.jpg);
background-repeat: repeat;
background-attachment: fixed;
background-position: center;
}


body#tinymce {
background-color: #003300;
}

div#main-container #header {
padding-top: 10px;
/* customize_header-background */ background-color: #003300; /* customize_header-background */
}


div#main-container {
/* customize_main-background */ background-color: #003300; /* customize_main-background */
}

div#main-container #footer {
/* customize_footer-background */ background-color: #003300; /* customize_footer-background */
width: 960px;
min-height: 150px;
}

div#main-container #header ul li a {
/* customize_nav-links */ color: #000; /* customize_nav-links */
padding: 1px;
text-decoration: none;
}

div#main-container #header ul li a:hover {
/* customize_nav-hover */ background-color: #003300; /* customize_nav-hover */
border-right: none;
}

div#main-container #header h1 a, div#main-container #header h1 a:link, div#main-container #header h1 a:visited, div#main-container #header h1 a:active, div#main-container #header h1 a:hover {
/* customize_site-title */ color: #000; /* customize_site-title */
text-decoration: none;
}

ul li a.nav-path-selected, ul li.nav-selected {
font-weight: bold;
}


div#main-container a, div#main-container a:link, div#main-container a:visited, div#main-container a:active {
/* customize_links */ color: #0099ff; /* customize_links */
text-decoration: none;
}

div#main-container h1, div#main-container h2, div#main-container h3, div#main-container h4, div#main-container h5, div#main-container h6 {
/* customize_headings */ color: #000; /* customize_headings */
}

div#main-container .ccm-tags-display ul.ccm-tag-list li {
/* customize_tag-highlight */ background-color: #A0DBE3; /* customize_tag-highlight */
}

div#main-container, div#main-container ul li {
/* customize_paragraph_font */ font: normal normal normal 14px/1.8em 'Merriweather', Georgia, serif; /* customize_paragraph_font */
/* customize_text */ color: #000; /* customize_text */

}

div#main-container {
/* customize_miscellaneous */ /* customize_miscellaneous */
}

/* text styles */


div#main-container a:hover {
text-decoration: underline;
}

div#main-container p {
margin-bottom: 20px;
margin-top: 5px;
}

div#main-container ul li {
}

div#main-container h1 {
font-size: 32px;
padding-top: 0px;
margin-bottom: 8px;
}

div#main-container h2 {
font-size: 28px;
padding-top: 0px;
line-height: 28px;
margin-bottom: 5px;
}

div#main-container h3 {
font-size: 22px;
padding-top: 6px;
line-height: 22px;
margin-bottom: 3px;
}

div#main-container h4 {
font-size: 20px;
padding-top: 8px;
line-height: 20px;
margin-bottom: 3px;
}

div#main-container h5 {
font-size: 16px;
margin-bottom: 3px;
}

div#main-container h6 {
font-size: 12px;
margin-bottom: 3px;
}

div#main-container hr {
margin: 20px 0;
}


/* alternate emphasis style for inclusion in content block editor aka tinymce */

.serif-emphasis {
/* color: #0099ff; */
font-family: Georgia, "Times New Roman", serif;
font-weight: 100;
font-style: italic;
}


/* site title styles */

div#main-container #header h1 {
font-size: 28px;
margin-left: 45px;
padding-bottom: 55px;
margin-bottom: 0;
display: inline;
float: left;
}

/* header list styles */

div#main-container #header ul {
float: right;
list-style-type: none;
margin-top: 14px;
margin-bottom: 0;
margin-right: 45px;
}

div#main-container #header ul li {
display: inline;
font-family: Helvetica, Arial, sans-serif;
font-size: 16px;
margin: 0;
/* border-right: 1px solid #d9d9d9; */
}

/* footer styles */

div#footer p {
/* customize_footer-text */ color: #000; /* customize_footer-text */
}

div#footer #footer-inner p {
margin-top: 0;
margin-bottom: 0;
font-family: Helvetica, Arial, sans-serif;
font-size: 14px;
display: inline;
}

div#footer #footer-inner p.footer-copyright {
float: left;
font-weight: bold;
}

div#footer #footer-inner p.footer-sign-in {
float: left;
}

div#footer #footer-inner p.footer-tag-line {
float: right;
font-family: 'Merriweather', Georgia, serif;
}

div#footer #footer-inner a, div#footer #footer-inner a:link, div#footer #footer-inner a:visited, div#footer #footer-inner a:active {
text-decoration: none;
}

div#footer #footer-inner a:hover {
text-decoration: underline;
}

li.month {
margin-left: 0px;
}