Grow your CSS skills. Land your dream job.

background position?

  • # July 25, 2012 at 9:13 pm

    I have a span tag with the address to a fake company in it. I have a background image set up on the span tag to sit centered and to the left. So it is in the beginning of the span tag. Then I used text-indent so that the address will start a few pixels after the background image. My problem is that I need the image to set to the left and centered, but I need it to sit about 10 pixels or so more to the right so that it will line up directly under an image above it. I am not sure how to move the background to the right and still make it go left. Any padding changes makes the text missalign with the text above it. You can see what I mean in the photo below. I need the bubble to be centered under the phone without moving the text to the right

    this is what I have now

    background: url(images/marker.png) no-repeat center left;

    # July 25, 2012 at 9:23 pm

    Instead of putting left, try:

    background: url(images/marker.png) no-repeat center 5px;

    And just play with the offset.

    # July 25, 2012 at 9:26 pm

    I tried that already. putting a number there moves the marker up and down. Not left or right

    # July 25, 2012 at 9:40 pm

    this probably isn’t really the answer you’re looking for, but this could be a solution: can you just take that bubble image in photoshop and make it the same size as the telephone and centered? that way you can use the same css rules for both?

    # July 25, 2012 at 9:46 pm

    actually, your idea would have worked. I figured it out with css. It’s just sometimes, my brain just doesn’t think clearly.

    background: url(images/marker.png) no-repeat 7px;

    # July 25, 2012 at 11:04 pm

    Ah alright, I just had it backwards. You probably already figured it out, but here why:

    background: url(url) repeat x-offset y-offset;
Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".