ThemeShaper Forums » Thematic

[closed]

need help with adding a background image for the main area

(8 posts)
  • Started 2 years ago by hollifischer
  • Latest reply from hollifischer
  • This topic is resolved
  1. 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

    Posted 2 years ago #
  2. 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.

    Posted 2 years ago #
  3. i did that and it is not showing up for some reason.

    Posted 2 years ago #
  4. 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

    Posted 2 years ago #
  5. 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.

    Posted 2 years ago #
  6. 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

    Posted 2 years ago #
  7. 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. :)

    Posted 2 years ago #
  8. thank you very much it worked

    Posted 2 years ago #

RSS feed for this topic

Topic Closed

This topic has been closed to new replies.