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;
}
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.
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: http://www.rxram.com/home.png (950px X 100px).
I used your code you suggested above (rdellconsulting):
header.tc-header {
background: url(http://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:
http://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 ( http://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:
http://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(http://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(http://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(http://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
