Header image repeating

  • Hi,

    I’ve found this snippet of code to add an image to the header:

    header.tc-header {
    /* Adjust the Image location ‘wp-content/uploads/NAMEOFFILE.png’ */
    background: url(https://www.mydomain.com/image.png) repeat 0 0;
    }

    The problem is, the image repeats across the header horizontally – am I missing something here?

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

  • replacing repeat with no-repeat helps?

    Er, the code says repeat!

    Try using:

    header.tc-header {
  background: url(images/bg.jpg) no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

    [email protected]

    (@tlienhart85gmailcom)

    This morning the header is not at the very top of the page. There’s about a 1/2-inch space above it. The top of the page that should be below the header is not visible

    hi tlienhart85,
    there’s an issue with the new DropCap feature in particular conditions.
    So go to Appearance > Customize > Content > Paragraphs , check it, uncheck it, Save & Apply.
    If it doesn’t solve your problem, you might want to open a new topic for this different issue.

    [email protected]

    (@tlienhart85gmailcom)

    That worked. Thanks for the quick response!

    You’re welcome.
    The issue is addressed, so I think will be sorted in the next release.

    Thread Starter Abe

    (@abu117)

    This is just not working for me. WP 4.1 using the latest version of Customizr.

    The image I am wanting in my header (centered above the slides) is at this location: https://www.rxram.com/home.png (950px X 100px).

    I used your code you suggested above (rdellconsulting):

    header.tc-header {
    background: url(https://www.rxram.com/home.png) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    }

    When I check this it looks like this:
    https://rxram.com/logo-stretched.jpg

    You can see where the slider is positioned and you can see a part of the swirl that is in the right area of the logo ( https://www.rxram.com/home.png ). Is the logo stretched out somehow? It looks like the logo is stretched?

    Thanks for any help ??

    Abe

    That’s ’cause the header has a min height of 45px, or something of the sort. When you don’t use a logo, you don’t have social icons and tagline neither, so what should create the thickness you want? That’s totally normal. It’s how it must be. Who tells to customizr to set the header height you personally might want? ??

    You might want to set a custom header height, pretty fixed but don’t forget different viewports (see media queries), with css.
    That’s all.
    ??

    Thread Starter Abe

    (@abu117)

    Thanks d4z_cOnf – but I’m hoping someone will actually give me an answer that I can use?

    Thread Starter Abe

    (@abu117)

    For further clarity, this is the effect I am going for:

    https://rxram.com/example-with-logo.jpg

    Thread Starter Abe

    (@abu117)

    that is a photoshop image I created – not the end result ?? Still need help please ??

    background: url(https://www.mydomain.com/image.png) no-repeat top center;

    Thread Starter Abe

    (@abu117)

    tienduydng – I love you ??

    Glad you solved thanks to tienduydng,
    could you mark this topic as resolved?

    Thread Starter Abe

    (@abu117)

    Actually, I have a new issue, so would like to continue please.

    I used the code: background: url(https://www.mydomain.com/image.png) no-repeat top center; and added a height of 100px so my child css now includes this:

    header.tc-header {
    background: url(https://www.rxram.com/images/logo.png) no-repeat top center;
    height:100px;
    }

    The logo used in the above is 1170px X 100 px (width of slider)

    This solved my issue EXCEPT when viewing in a smaller viewport. Then the logo simply disappears.

    Could someone please advise what I would need to do? I’m assuming it has something to do with a “@media querie”? What would be the proper syntax for that? And would I need to make a smaller image of the logo as well? I’m a bit confused by this as I see other images on the site react responsively.

    Thanks again in advance for any help ??

    Abe

Viewing 15 replies - 1 through 15 (of 15 total)
  • The topic ‘Header image repeating’ is closed to new replies.