This is my first time working with thematic. Yes I am using the sample child theme. I would like to add a background image for #main since it encompasses both the content and sidebar areas. The background image is really just for the top and than no repeating, just a color that matches the image for the rest of the area.
I am just beginning to work on this so I know there is still a lot to be done.
here is the link: http://test9.hafdesign.com
You are probably going to have to be more specific on what problem you are having. I say that based on the fact you got an image in the header, why wouldn't you be able to do the same on the #main div?
Header
#header {
background:url(images/hdr_bg.jpg) repeat-x;
}Main
#main {
background:url(images/some-bad-ass-image.jpg) no-repeat;
}I can only assume you are having a different problem.
i did that and it is not showing up for some reason.
yeah i'm not following what the problem is. currently, according to chrome's dev tools (inspects the html/css elements) you don't have any background image attached to #main, so there isn't anything to display. have to agree w/ scott's request for more details. if you have done as scott suggested and don't see an image, be sure that 1. the image is uploaded to the live server and 2. your path to the image is correct
It looks like you are trying to stick something to the #container. In there you have
#container {
background: url(images/content_bg.png) no repeat #f1f1d9;;
}You have a double semicolon, not sure what error this will produce, but it is not correct. If you are trying to stick things to the #container, it is currently collapsed which is what happens when you use floats inside it, the height collapses. Use #main.
I fixed that where it said for the container. Didn't work. So, I put it under #main. Double check the path was correct. And it still is not showing up
Currently you have
#main {
background:url(images/content_bg.png) no repeat #f1f1d9;
clear:both;
padding:50px 0 22px 0;
}However, shorthand properties are a little finicky and will flat out not work if they are incorrect. You want to probably be using the background color in front of the image per https://developer.mozilla.org/en/CSS/Shorthand_properties
#main {
background: #f1f1d9 url(images/content_bg.png) no-repeat;
clear:both;
padding:50px 0 22px 0;
}So close. :)
thank you very much it worked
This topic has been closed to new replies.