A better way ...
My last email was overkill. Here's a solution that uses
linear-gradient and doesn't need any images or pseudo-elements. I've
tested it in Google Chrome, Mozilla Firefox, Microsoft Edge, and
Internet Explorer 11. Use the following style for your body element
...
body {
position: relative;
min-height: 100vh;
background: #3d3d3d linear-gradient(to bottom, white 299px,
transparent 299px) no-repeat;
}
The position:relative was already there and is (maybe) necessary for
the proper positioning of all the other elements in your page.
The `vh` unit is most likely new to you. It stands for "viewport
height". You can read a better description of viewport units at MDN
than I can provide:
https://developer.mozilla.org/en-US/docs/Web/CSS/length#Viewport-percentage_lengths
The linear-gradient replaces your image. Since everything below 299px
is transparent, the "charcoal" background color shows through.
Without the "no-repeat" option, it would repeat the white part down
the page at increments equaling exactly the height of the viewport.
--
Vince
On Tue, Jan 8, 2019 at 7:13 AM Vince Aggrippino
<vinceaggripp...@gmail.com> wrote:
>
> 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/
On Tue, Jan 8, 2019 at 7:13 AM Vince Aggrippino
<vinceaggripp...@gmail.com> wrote:
>
> 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/
