[CSS] Position of background-image in Safari

uli · 2020-05-28 23:23:04

I’m working on a small website that makes my hair go grey. The issue I’m having is with background-image in Safari. All other browsers I’ve tried show the image at the desired position, the left edge of the logo’s text lines aligned to the text block below, while Safari puts the background image top left of the page. I’ve found this answer on Stackoverflow but can’t make it work the way I need, either I get it right in Firefox or in Safari, never in both. Please have a look at
https://www.malerwerkstaetten-ingowolter.de/kontakt.html

GugUser · 2020-05-29 01:25:27

There are many errors in your CSS. Move max-width, margin and background: #eaeae5 url("images/HG.gif") no-repeat scroll 10px 0; at least one level lower to body {…} and work it out again.

phiw13 · 2020-05-29 01:41:01

Safari and other browsers disagree about what is the background-positioning for images when the background is propagated to te canvas (your case). Other browsers follow the current spec (I am not happy with that, but that is probably too late).

No fix for your current construction. Moving the background-image one level lower (e.g. body) would eventually fix the issue. However, why are you hiding the info contained in the image from non-visual users ?

jakob · 2020-05-29 07:45:57

Try this:

1. Remove the background image from the css for the HTML tag

2. Add a new node in div id="contact" with a page header:

<div class="content">
    <div id="page-header">
        <h1 class="ir">Malerwerkstätten Ingo Wolter</h1>
    </div>
    ...

Modify your CSS like this:

.content {
    max-width: 776px;
    padding-left: 115px;
}
.page-header {
    background: url('/css/images/HG.gif') transparent no-repeat;
    background-size: 400px auto;
}
.ir {
    overflow: hidden;
    text-indent: -9999px;
}

(i.e. in content lose the absolute positioning and top / left). If you need more space at the top you can use margin-top on the .content class. (.ir stands for image replacement. You could also use one of the visuallyhidden / screen ready only methods on the H1 if you prefer (e.g. here).

That gives you this (top: firefox, bottom: safari):

[ snip ]

It also collapses down for mobile view. You may want to tweak the sizes here and there.

EDIT: I see now how you want it to be:

Try this slight modification to the above:

#page-header {
    background: url('/css/images/HG.gif') transparent no-repeat;
    background-size: 880px auto;
    margin-left: -105px;
    height: 150px;
}
@media (max-width: 889px) {
    #page-header {
        margin-left: -9px;
    }
}

If you need to make it smaller at narrower viewports, just adjust the height and background-size.

uli · 2020-05-29 20:51:37

GugUser wrote #323386:

There are many errors in your CSS. Move max-width, margin and background: #eaeae5 url("images/HG.gif") no-repeat scroll 10px 0; at least one level lower to body {…} and work it out again.

Hi GugUser, before posting my issue, I’ve tried it on the body already from intuition, but it was to no avail. As I saw today it’s obviously not working in Safari on any element when I use background-position with an offset, but that might well be caused by anything wrong in my code and/or CSS.

I’ve many aged vendor prefixes causing warnings, that’s for sure! Errors I got only two, though. Thanks for your tips and for pricking my dirty code! ;)

uli · 2020-05-29 20:52:13

phiw13 wrote #323387:

However, why are you hiding the info contained in the image from non-visual users ?

There’s rarely a budget on those small clients to do these things. But would that be solved by jakob’s image replacement? Then: Done.

uli · 2020-05-29 20:59:59

jakob, thanks for even providing code as part of your answer. I missed your update (thanks for that, too!) and solved it slightly different but not too much. I went with your solution as I’ve previously tried GugUser and phiw13’s approach to no avail. I’ve shied away from a new element yesterday before I posted as I’m easily confused by unintended side effects that I then compensate the wrong way. I was hoping there was an oversight on my side, something real easy and dumb that I simply couldn’t spot, cause I didn’t believe Safari would still do something really different from FF these days.

@all: Seems I’ve it working now! Thanks, guys, you’ve been really helpful!

GugUser · 2020-05-29 23:20:47

I think that was a problem with the cache at the beginning today. It is not a good idea to define a width and margin for the html element. This will cause problems with the background color anyway, if you want it to be valid over the whole screen.

phiw13 · 2020-05-30 00:12:37

uli wrote #323417:

As I saw today it’s obviously not working in Safari on any element when I use background-position with an offset […]

That is not true in general, background-position (all syntaxes CSS2.1 & 3) works fine in Safari. What is not working per spec is background-positioning when the background is propagated to the canvas (background attached to either HTML or body).

Uli, what could have worked in your case is this (mentioning this for eventual future use) – adjust values to taste and need:

html { background-color: lime; margin: 10px auto; max-width: 500px; }
body { background-image: foo.png; background-position: 10px 10px; padding-top: 100px; }

It works because the background-color specified on the root element is propagated to the canvas, then the background on body is treated as any other background.

Jacob’s construction is similar to what I had in mind when raising my question.

Last edited by phiw13 (2020-05-30 00:14:43)

uli · 2020-06-01 15:05:18

GugUser, phiw13, I’ll try these out one of the next days. Thanks again.

bici · 2020-06-01 16:16:19

uli wrote #323462:

GugUser, phiw13, I’ll try these out one of the next days. Thanks again.

I love Köln –– Beautiful pictures of some great architecture…

Textpattern CMS

Textpattern CMS support forum

#1 2020-05-28 23:23:04