Grow your CSS skills. Land your dream job.

Problem with background-image (resolved)

  • # March 14, 2012 at 11:51 pm

    Anyone ever had a problem with the background image on a header disappearing when you add no-repeat? So,

    background-image: url("images/pic.jpg");

    displays the image, but with the image repeating.

    background-image" url("images/pic.jpg") no-repeat; 

    makes the picture disappear entirely. For reference, here’s the entire block for the header:

    body>header {
    background-image: url("images/epsoclogo.jpg") no-repeat;
    height: 300px;
    padding: 33px;
    color: #ccc;
    }

    (display: block is specified in a global statement earlier in the css file). As extra info, this is a WP 3.3.1 build using the H5 theme by Jeff Starr.

    I have a horrible feeling I’m missing something terribly obvious and will be insanely embarrassed once someone points it out to me, but would be thrilled if someone can tell me what I’m doing wrong.

    # March 15, 2012 at 12:26 am

    Two ways to do this
    The easiest way

    background: url("images/epsoclogo.jpg") no-repeat;

    or else

    background-image: URL(images/epsoclogo.jpg);    background-repeat: no-repeat;
    # March 15, 2012 at 12:29 am

    If you copied and pasted your code then the issue is a simple typo.

    This:

    background-image" url("images/pic.jpg") no-repeat;

    Should actually be this:

    background: url("images/pic.jpg") no-repeat;

    EDIT: As @karlpcrowley already said.

    # March 15, 2012 at 1:34 am

    To break it down and explain exactly what you did…”background-image” is to specify just the image. Using the shorthand “background” instead, you can specify the repeat property as well as position and background color all in one line

    # March 15, 2012 at 7:58 am

    maybe :

    background: url(“images/pic.jpg”) transparent center center no-repeat;

    so you can control position (here : ‘center center’) and background-color (here :’transparent’ ) if your image upload fails.

    # March 17, 2012 at 12:18 pm

    Thanks for the help, folks — don’t know why I was stuck on using background-image instead of background — feel a bit foolish now, as I really did know that — thanks again!

    # May 10, 2012 at 1:17 pm

    you’re welcome !

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

You must be logged in to reply to this topic.

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