ThemeShaper Forums » Thematic

[closed]

Adding pictures to left body, not using background-image

(8 posts)
  • Started 5 years ago by mitchellb16
  • Latest reply from Fizzgigg
  • This topic is resolved
  1. Hi, I am really enjoying the thematic theme.

    My current question is regarding adding a no-repeat picture to the body without needing to sacrifice my background colour. I have resized the main content section to be 350px from the left of the page and would now like to add a graphic to the left of the content section. However, the only way I can figure out how to do this is to add it as a background image within the body. As a result I am unable to position it to my liking in the body while maintaining my body background colour.

    I have tried adding a div specifying the position of the image and adding the instance to the index.php but it is not working.

    My site is at www.bimach.com/main

    Thanks.

    Posted 5 years ago #
  2. @mitchellb16 re "regarding adding a no-repeat picture to the body without needing to sacrifice my background colour... would like to add a graphic to the left of the content section"...

    There are several ways to do this depending on the exact positioning you want and the image itself. Try this to start...

    body {
    background-color:#fffcfc; <- your current background color
    background-image: url(images/background.jpg); <- the image location
    background-repeat: no-repeat; <- the no-repeat option
    background-attachment: fixed; <- if you want the image not to scroll
    background-position: center left; <- centers the image on the left
    }

    Otherwise you can also use the x-% and y-% or the x-pos and y-pos parameters to position the image.

    Posted 5 years ago #
  3. Thanks. That seems to have done the trick.
    One last question. How do I implement the x-pos and y-pos? I looked on html dog and they have no reference for this.

    Thank you.

    Posted 5 years ago #
  4. Re "How do I implement the x-pos and y-pos?"...

    You can specify the exact x/y position (horizontal/vertical) of your image relative to the top/left corner (which is position 0/0). For example...

    background-position: 50px 50px;

    Posted 5 years ago #
  5. Thanks. You are awesome. My page and I love you.

    Posted 5 years ago #
  6. Totally my pleasure, your theme looks great.

    Posted 5 years ago #
  7. Fizzgigg
    Member

    Is it possible to use this but keep the bakground colors of the widget areas? Like

    '
    #primary a{
    color:#B26E00;
    }

    #secondary a{
    color:#B26E00;
    }
    '

    Right now all background colors is dropped and it makes the navigation menu look quite strange. I tried to add 'background-color:#fffcfc;' but that just gives the text a bakground, not the widget area.

    Posted 5 years ago #
  8. Fizzgigg
    Member

    It seems that I solved the mystery, using the .aside.
    '
    .aside {
    background:url(images/transbg50.png) repeat;
    }

    '

    Posted 5 years ago #

RSS feed for this topic

Topic Closed

This topic has been closed to new replies.