Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Problem with background-image (resolved)

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #37160
    ccc630
    Member

    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.

    #99130

    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.

    #99145
    ylc66
    Participant

    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.

    #99294
    ccc630
    Member

    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!

    #102663
    ylc66
    Participant

    you’re welcome !

    #252124
    brmendez
    Participant

    Thank you to @karlpcrowley. That solution worked for me.

    Make sure you know what CSS property you are using. background has a no-repeat, whereas background-image does NOT, instead use background-repeat: no-repeat;

Viewing 6 posts - 1 through 6 (of 6 total)
  • The topic ‘Problem with background-image (resolved)’ is closed to new replies.