I have read many articles on this and still not understanding it. I have a header that I want to use 2 background images on. The first image will be a 1px repeating x and the other will be centered on top of that. I do need it to be responsive.
I have tried everything from cover to center and also even included !important.
I don't have anything for code as I've deleted the other way I did it (it was for fixed layout and didn't use 2 background images). I am using Chrome and tried with all the prefixes and the images didn't even show up so I was hoping someone would explain this a bit more for me or point me in the right direction.
The image sizes are 1px x 275px (this is one that repeats of course) and the one that sits on top of that is 642px x 225px for reference.
Thank you for helping if you will.
Here is something I've tried
Update:
This does produce what I am looking for and now I just need to make it responsive. The problem before was the repeating image has to be declared second and not first like I thought.
h1 { h1 { background: url(_images/logo.png) no-repeat center center, url(_images/headerbg_01.png) repeat-x center center; line-height: 15em; margin-top: 2.2em; text-indent: -9999px; }
Glad you sorted it out,
Glad you sorted it out, thanks for sharing the solution.
Well still not done. This is
Well still not done. This is what I have so far. If anyone has any suggestions please jump on in
h1 { background: url(_images/logo.png) center center no-repeat, url(_images/headerbg_01.png) center center repeat-x; background-size: 47% auto, contain; line-height: 14.0625em; margin-top: 2.2em; text-indent: -9999px; }
logo.png is 642px x 225px and headerbg_01.png is 1px x 275px. This does work and is responsive but everything is really dependent on that line-height at em. With em this doesn't scale accordingly so if default is anything but 16 then it will be off.
Any advice?
If I take the line height out then it collapses.
Thanks