Continuing in the spirit of documentation begun in the previous post…

I was having an issue with only 1 browser (Safari) not showing the background image for the website: ZahnHomes.com — the gold tagline top-right. It was showing up just fine in all the other browsers I tested.

I found a forum post from someone who had a similar issue — though it didn’t seem to be well-visited by anyone who could assist, there was (finally) 1 person that chimed in and mentioned listing the background attributes separately instead of all-in-one.

So, the styles for that particular header background image went from:

background: transparent right top 20px no-repeat url("/wp-content/uploads/2013/01/tagline-committed.png");

to:

background-color: #fff;
background-position: 96% 18%;
background-repeat: no-repeat;
background-attachment: scroll;
background-image: url("/wp-content/uploads/2013/01/image-name.png");


… and, Poof! It magically appeared for all browsers. Note a few subtleties present here: “position” didn’t seem to want to do anything other than “top right” for me in Safari, but top-right would make it butted up to the corner, so I tested out percentages until I found the right placement: 96% (almost to the far right) and 18% (giving some vertical headroom). Also, I saw a post which suggested the “image” should ideally go last (didn’t say why), so I did that as well.