Grow your CSS skills. Land your dream job.

help with background image

  • # September 6, 2009 at 11:49 pm

    I don’t know what’s going on here. Can’t figure it out. I have a background image that is not set to repeat, yet it’s repeating, It fills the site the way I want it to but when I minimize the browser and make the width short enough so that you have to scroll left and right, the background image becomes to short to fill the screen and you can see a black spot on the right. Can’t figure it out. The css for the background is this

    #content { background:url(images/main-back.jpg) top center; height: 423px; }

    The image is this one

    http://www.photobyiris.com/testsite/ima … n-back.jpg

    It’s not set to repeat right now because I was trying to troubleshoot the issue. I don’t know what is controlling it to make it repeat. Any ideas? The site is

    http://www.photobyiris.com/testsite

    # September 7, 2009 at 12:13 am

    A quick fix if you want to use it

    Code:
    #content { background:url(images/main-back.jpg) top center; height: 423px; width:100%; min-width:1024px; }
    # September 7, 2009 at 1:04 am

    yep, that works for me. Thanks bclouatre. I spent at least 4 hours trying to figure out why it wouldn’t work naturally. I still don’t know why the background image is repeating without me telling it to.

    # September 9, 2009 at 3:40 pm

    If you don’t want a background to repeat, you have to specify it not to with no-repeat. Backgrounds naturally repeat. You say you’ve set it to "not repeat" but I don’t see that you actually have! Here’s what it should be:

    #content { background:url(images/main-back.jpg) top center no-repeat; height: 423px; }

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.

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