I can't explain why, but Chrome is having a problem with your
background image, not your CSS. If I just change the URL to point to
the same image that's used on your front page, everything works. I'm
guessing that Chrome changed something related to image rendering for
the sake of performance and it broke your page.
I didn't figure out how to make the CSS linear-gradient work as a
solution for you because everything on your page is absolutely
positioned and the body doesn't contain your elements. If I was
writing this page today, I'd avoid the absolute positioning, but
there's no sense in re-writing it to fix this problem. I found another
solution that'll work just fine without images...
1. Remove the background url and just set the background color to
"charcoal" (#3d3d3d) ...
body {
position: relative;
background-color: #3d3d3d; /* charcoal */
}
I got that color code by opening your original background image in
GIMP and using the color picker on the dark part.
2. Create a ::before pseudo-element for the white part...
body::before {
content: '';
display: block;
position: absolute;
width: 100%;
height: 299px;
background-color: white;
}
I got that block height from your original background image. The white
part is 299px tall. I'm guessing that was originally intended to be
300px, but one pixel made little difference and nobody bothered to fix
it. At least this way it's easy to change.
Normally, you'd want to specify top, left, bottom, and/or right after
position:absolute, but it's in exactly the right place without setting
them anyway.
When using absolutely positioned elements, you often want to keep
z-index in mind as well. Since this pseudo-element is intended to
always be in the background I might even set a negative z-index value,
but the default value should be fine for this site.
--
Vince
On Tue, Jan 8, 2019 at 5:07 AM Vince Aggrippino
<vinceaggripp...@gmail.com> wrote:
>
> I'm also able to reproduce this if I download your code locally and just run
> it off of my hard drive. I even see it if I reduce your CSS to just the style
> on the body tag. My time is limited right now, so I can't fully investigate
> this, but it looks to me like it's the image itself that Chrome is having
> difficulty with, not the CSS. Using the Danny Grissett page as an example, if
> I replace the background image URL (images/bodyimage_grissett.gif) with the
> one used on the front page (../../images/bodyimage.gif) it works fine.
>
> I don't know why this is happening, but I did notice that the grissett image
> is nearly twice the height (26250px) of the front page image (14999px).
>
> There is a way to do this without images at all using a CSS linear gradient,
> but I can't quote it from memory and I don't have time to figure it out right
> now.
>
> As far as "many years of flawless performance", I'd call that lucky. So much
> has changed in that time. Most sites need regular maintenance and updates to
> conform to ever-changing browser landscape.
>
> I'll try to take another look when I can later and give you the imageless
> solution with linear-gradient.
>
> --
> Vince
>
> On Tue, Jan 8, 2019 at 1:06 AM Michael Leibson <m...@michaelleibson.com>
> wrote:
>>
>> Hi;
>>
>> I was a member of this list about ten years ago (under the email address
>> michael_mabe...@yahoo.ca), while I was trying to teach myself CSS (via
>> Eric Meyer’s text) and HTML. Thanks to participants in this list
>> (especially Gunlaug Sørtun [“Georg”], Philippe Wittenbergh, and
>> others), I was eventually able to create a large website for myself
>> (www.thinkingmusic.ca). My website has been extremely valuable to me,
>> as it allows me to practice my profession (teaching music
>> theory/composition to a few students in different parts of the world),
>> and I’m very grateful to those who helped me along the way!
>>
>> My problem: after many years of flawless performance, two pages in my
>> website are suddenly not appearing completely as they should. The defect
>> is slight -- an x-repeated gif, that colours 2/3 of the <body> in a
>> charcoal colour – is not appearing at all, so that that part of the
>> <body> is white, rather than charcoal. Here is the relevant CSS:
>>
>> body
>> {
>> position: relative;
>> background: url(../../images/bodyimage2.gif) repeat-x;
>> }
>>
>> The “bodyimage2.gif” is stored in the <images> folder of the parent
>> (thinkingmusic.ca/index) directory.
>>
>> Here are some pages within my website in which the above-mentioned
>> “charcoal” backgrounds still appear as they should:
>>
>> http://www.thinkingmusic.ca/analyses/index.html
>> http://www.thinkingmusic.ca/analyses/coltrane/index.html
>> http://www.thinkingmusic.ca/thinkingharmony/commontonemodulation/index.html
>> http://www.thinkingmusic.ca/thinkingharmony/figuredbass/index.html
>>
>> and here are the two that are no longer showing that background – at
>> least, when using Chrome on a Windows desktop computer:
>>
>> http://www.thinkingmusic.ca/analyses/grissett/index.html
>> http://www.thinkingmusic.ca/thinkingharmony/justfriends/index.html
>>
>>
>> But here are some strange phenomena:
>>
>> - it only occurs in two of the many pages in which I used the identical
>> CSS technique
>> - it only occurs when using Chrome on Windows desktop computers: it
>> occurs on my Windows 7 desktop, and on a friend’s Windows 10 desktop.
>> - it does not occur when using Internet Exporer on the same desktop computer
>> - It does not occur when using Chrome on an Android tablet.
>> - Others, who have tried the pages on other computers (not necessarily
>> using Chrome), report that this problem does not occur for them.
>>
>> Because this is happening on another’s Windows computer, and only when
>> using Chrome, it makes me wonder whether Chrome has recently updated
>> itself in a way that might be rendering my CSS or HTML invalid. But
>> even this wouldn’t explain why only some pages – pages that use the
>> identical CSS techniques and structures – have this problem, while
>> others do not.
>>
>> So far, none of the web designers and computer repair people I know
>> have been able to figure out what’s happening.
>>
>> Any ideas?
>>
>> BTW: as you can probably tell, I am not a developer – just a
>> self-taught beginner.
>>
>> Thanks, in advance, for anything you’d care to share!
>>
>> Michael
>> ______________________________________________________________________
>> css-discuss [css-d@css-discuss.org]
>> http://www.css-discuss.org/mailman/listinfo/css-d
>> List wiki/FAQ -- http://css-discuss.incutio.com/
>> List policies -- http://css-discuss.org/policies.html
>> Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
______________________________________________________________________
css-discuss [css-d@css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
