Padding a Single Image

  • This might have been discussed before, but here’s what my code looks like.

    /* 2)-=-=-=- Structure -=-=-=- */

    #container {
    padding-top: 0px;
    width: 765px;
    margin: 0 auto;
    text-align: left;
    }

    .container_left {
    background: url(images/container.gif) repeat-y;
    }

    .container_right {
    background: url(images/container_right.gif) no-repeat top right;
    }

    .topline {
    background: url(images/container_top.gif) no-repeat;
    }

    #content {
    padding-top: 150px;
    margin: 20px;
    width: 480px;
    }

    #content_bg {
    background: url(images/attempt.gif) repeat-y;
    }

    /* Uncomment if you want to use the tagline feature (make sure you uncomment h1 above and comment the original h1) – off by default
    .tagline {
    color: #888;
    margin: -18px 0 0 9px;
    position: absolute;
    font-size: 1em;
    }
    */

    ………………………….

    I want to make the image within:

    .container_left {
    background: url(images/container.gif) repeat-y;
    }

    NOT show up until 150 pixels down. If I just do the padding thing in CSS.. it tends to put the whole page down another 150 pixels.. as opposed to just this background.

    Any help??

Viewing 15 replies - 1 through 15 (of 20 total)

  • margin-top: 150px;

    You want to move the container or an image? Or put the image in the background of the container so it is moved “down” with “blank space” above it?

    You can either make the graphic itself have blank space above it (change the graphic itself) or set the placement to not repeat and have it at the bottom of the container.

    You can get more details on the placement of the background image in CSS from the W3 background usage.

    You can control the placement of a background image only a little bit. If you want real control over an image, you take it out of the background CSS and give it a life of its own within your page.

    Thread Starter codyhobbs

    (@codyhobbs)

    Here is how it is right now…

    https://www.doteyed.com

    and I want the image “container.gif” to start tiling itself right after the “container_top.gif” stops… so about 150px down I’d say.

    Thread Starter codyhobbs

    (@codyhobbs)

    P.S. I tried the margin-top: 150px; thing.. it would work except it moves my “container_top.gif” image down as well, which cannot happen =(.

    background-position: 0 150px;

    Thread Starter codyhobbs

    (@codyhobbs)

    I put that in like this:

    .container_left {
    background: url(images/container.gif) repeat-y;
    background-position: 0 150px;
    }

    ……

    Doesn’t seem to do anything at all?

    Is it cached. Are you editing in the presentation manager?. Is the file editable. ? Whats up ?

    Thread Starter codyhobbs

    (@codyhobbs)

    Yeah.. you can check it out for yourself here…

    https://www.doteyed.com/wp-content/themes/greenmarinee/style.css

    What I want to do is make the “content.gif” image *start* about 150 px down from where it starts.. that way I can have the transparency of the header image leak over so that the image in the top left doesn’t have the white from the header bleeding onto it… if you’re catching me..

    Does that help?

    Thread Starter codyhobbs

    (@codyhobbs)

    PS. I’ll quit fooling with it so you can take a look Root.. right now as you can see the content.gif image bleed over to the header (the shadow things on both sides, just view the header image alone) and I want it to start 150px down so that it doesn’t do that.. hope that helps some..

    I have to admit I am struggling a bit identifying the images in question. These are the drop shadows am I right? You want them to start lower down?

    Ok. I have the tiling bg image visual. I cannot see the edit I suggested in the CSS.

    Ok. What is happening is that the container left and right seem to be overlaying one another (I think) So editing one wont do it. Comment one of the out while you test maybe?

    Thread Starter codyhobbs

    (@codyhobbs)

    I took container right completely out and it makes no difference, that one was just straggling behind anyways… is there some kind of chat program I could talk to you on?

    Thread Starter codyhobbs

    (@codyhobbs)

    Container_left isn’t actually container left, it’s just something that was there before. I’m completely modifying this theme, and I have no idea why it’s doing this, hah. I just want the background that is (www.doteyed.com/wp-content/themes/greenmarinee/images/container.gif)
    to start lower down. Right now it starts at the top and goes over my image to the right and my header.. ugh.. how annoying! Hah

    You still have not got the position code in the CSS.

Viewing 15 replies - 1 through 15 (of 20 total)
  • The topic ‘Padding a Single Image’ is closed to new replies.