Member Avatar for sarahtodde

I have a background image on my homepage that is partially cut out whenever I use Google Chrome. Sometimes it's just a corner and sometimes half the top. I have the height set to the correct size. Looks fine in Safari and Firefox. Validates fine. Does anyone have any suggestions? http://www.movingpoets.org
Thanks.

  • 7 Contributors
  • 9 Replies
  • 468 Views
  • 1 Year Discussion Span
  • Latest Post Latest Post by almostbob

Dani AI

Generated

Intermittent cropping in Chrome usually points to layout/painting issues rather than an image file problem. ’s screenshots and the thread show the image sometimes appears fine and sometimes clipped; ’s width:100% tweak didn’t fix it, was right to flag the fixed height, and ’s note about a Chrome-detection script on line 5 is important — any browser-sniffing or JS that alters classes/styles should be disabled while debugging.

Try this concise checklist (fastest-first):

  • Remove fixed pixel heights on the body or the element that carries the background. Prefer min-height:100vh or let content determine height.
  • Use background-size and an appropriate background-position so the browser scales rather than relying on a fixed box.
  • Avoid mixing background-size:cover with repeat-y (they conflict). If a vertical tile is needed, use a true repeating slice.
  • Disable any Chrome-specific scripts or styles temporarily; check for JS errors in DevTools (F12).

Example responsive pattern:

body {
  min-height: 100vh;
  background-image: url('/path/to/image.jpg');
  background-repeat: no-repeat;
  background-position: center top;
  background-size: cover;
  background-attachment: scroll;
}

Further debugging steps: open Chrome DevTools → Elements → Computed to confirm which element has the background and its computed height. Check for transforms (transform, will-change, translateZ) on parent elements — those can change how Chrome composites and cause painting differences. Test in incognito or with extensions/hardware acceleration off to rule out extensions or GPU rendering. If CSS background rendering proves unreliable, an alternative is an absolutely positioned <img> with object-fit: cover for consistent cross-browser behavior.

Note: background-size: cover intentionally crops to preserve aspect ratio; use contain or serve different artwork if no cropping is acceptable.

Recommended Answers

All 9 Replies

Member Avatar for Reshma_1

Hi,

Just write width 100% to body section

body
{
width:100%;
}
Member Avatar for sarahtodde

Thanks so much for your respnse. I added that and it did not work. I also added height: 100% for the backgrond image. It worked the first 4 times I loaded the page, but now it isn't working anymore. Any other suggestions? thanks!

Member Avatar for frankchester

Could you provide a screenshot of it looking "wrong"? It looks OK to me, the edges will always be cut off if the window size is changed... is that what you are doing?

Member Avatar for sarahtodde

Absolutely. Here it is. Thanks! a47adeabcf070050880a2de93a80a87d

Here it is after I refresh the screen... fb713fb1256fa06130859a43d1dd9d9c

Member Avatar for JorgeM

I accessed your site using Chrome and it looks fine. I didnt have to refresh the screen.

Now, before accessing your site, i did hit F12 to bring up the dev tools (console log) in Chrome and it appears you have a problem with line 5 in your index page... and line 5 has to do with your attempt to detect chrome so it all sounds related.

Member Avatar for sarahtodde

Thanks JorgeM. I put that line in there hoping it would fix the problem. I found it as a possible solution when searching this forum. I'm pretty sure if I took it out, the problem would remain. It seems like it is a problem with Chrome that I will have to live with. I have looked at it on 3 different computers and usually the image is broken up but not always. I appreciate your repy. If anyone else has suggestions, I'm open. Thanks!

Member Avatar for Siju_1

Capture.PNG css not loading could anyone help me out ?

Member Avatar for Matt_17

Siju 1, this is not a case of css not loading. It seems your JavaScript and images are turned off. web pages will appear like this if your javascript and images are not on.

Member Avatar for almostbob 
<!--
body {
    background-color: #111111;
    background-image: url(jpgs/moving_poets.jpg); height:986px;
    background-repeat: repeat-y;
    background-position:left bottom;
    width: 100%;

try it without "height:986px;"

dammit I didn't notice this thread has been dead for a year

Edited by almostbob
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.