• Locked
3 replies [Last post]
Fri, 2013-08-02 09:43
wreckmylittleduprees
wreckmylittleduprees's picture
Offline
newbie
Last seen: 8 years 8 weeks ago
Timezone: GMT-4
Joined: 2013-08-02
Posts: 5
Points: 10

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.

Top
  • view bestreply
Tags:
Sat, 2013-08-03 06:04
#1
wreckmylittleduprees
wreckmylittleduprees's picture
Offline
newbie
Last seen: 8 years 8 weeks ago
Timezone: GMT-4
Joined: 2013-08-02
Posts: 5
Points: 10

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;
}

Top
Sat, 2013-08-03 07:28
#2
Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 2 weeks 17 hours ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5343
Points: 2964

Glad you sorted it out,

Glad you sorted it out, thanks for sharing the solution.

Top
Sat, 2013-08-03 08:20
#3
wreckmylittleduprees
wreckmylittleduprees's picture
Offline
newbie
Last seen: 8 years 8 weeks ago
Timezone: GMT-4
Joined: 2013-08-02
Posts: 5
Points: 10

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 Smile 

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

Top
  • Locked