Database / (1) Header Background Image, (2) "Top of Page"

[thomasneo]

Hi.

For the past few days, I've been trying to add a background image via CSS to #header-primary with limited success—the code works all right on Firefox but not on Chrome. Edit: You can now see the code live on my this account.

How can I adjust the code so that it will look both the same on Firefox and Chrome? Solved. Thanks to

carene_waterman

 

Working Code:

#header-primary {
   background-image: url(http://z5.ifrm.com/30174/148/0/f5177590/Test-Background.gif);
   background-repeat: no-repeat;
   background-size: 100% 100%;
   border-radius: 2em;
   margin-bottom: 1em;
   margin-right: 2em;
}

#header-secondary {
   margin-right: -17em;
}

#header-primary .inner {
   margin-left: 1em;
   margin-top: .5em;
}

A smaller thing. Not sure if this is possible or not, but is there a way to put the "Top of Page" as an entry-management button on every entry (beside the Add Memory, Track This, . . . buttons)?

Thanks in advance to all who respond. :D

Comments

[carene_waterman]

I see the image fine in Chromium, I don't have the branded Chrome.

Are you referring to the pixelation behind the text in your screenshot as the problem?

I don't see that on Chromium where I'm getting the Iceland font, or on Firefox, where I'm seeing a fallback, so I'm wondering if this is something with your font rendering or the font file itself.

[thomasneo]

Thanks for replying.

I wasn't referring to the pixelation. That, I believe, is one of the numerous quirks of the ancient screenshot software I used to capture the screenshot.

I'm referring to the dropped-down navigation bar. For reference, this is how it looks to me on Firefox.

So, is there something I could add to the code to prevent the navigation bar from dropping in Chrome?

[carene_waterman]

I am so not a visual person, I totally didn't even notice the navbar position, which is wonky on my Chromium too.

I can tell you how to fix it, but frustratingly, I can't tell you why this happened. I'm guessing it's how Chrome renders negative margins.

So, take out the margin-right: 2em; on #header-primary completely, which will bring the navbar up into place and change the negative margin-right on #header-secondary to -17em; if you want to keep the 2em buffer between them.

This looked right to me--so check it!--in Firefox and Chrome.

Off to read about negative margins now.

[thomasneo]

It works! Thank you so much! <3