Member Avatar for Kraai

Hi

I have a client wanting a wordpress site with fixed background image and content scroll over it. My problem is, that my client has a 1400 x 1050 px screen, and I have no idea how this background I currently have on the site, would appear on their screen. I myself can only check up to 1240 x 1024 px on resolution. Up to what I can check, the bg image seems to be fine with no white spaces on the sides and bottom outside the container area. But, is it also fine on this larger screen resolutions like what my client have?

I need someone to check this for me, someone with 1400 x 1050 px screen resolution, and tell me if there are any white spaces that bg image not covering? Maybe a screenshot of what it looks like on that resolution size? Any takers?

I realy do not want to increase the current bg image size, as it will take to long to load on smaller connections, and as I do have it tiled at the moment, I prefer not to tile it, as it is a big block image with detail in it and it just won't look right if that detail repeats when tiled.

If you can help, post here, and I will pm you the url.

Edited by Kraai because: spelling errors, dam
  • 3 Contributors
  • 3 Replies
  • 410 Views
  • 2 Months Discussion Span
  • Latest Post Latest Post by matricol

Dani AI

Generated

raised the core issue: a fixed background must cover a 1400 x 1050 viewport without adding a huge file or looking wrong when scaled. 's question about image size and 's "top center" suggestion point us to a practical pattern: let CSS scale a well-compressed source image, position it center/top, and supply a larger variant only for very wide viewports. This avoids tiling while keeping load for most users low.

A compact, production-ready CSS pattern:

html, body { height:100%; margin:0; }

body {
  background-color: #222;               /* fallback color matching image edges */
  background-image: url('/img/bg-1400.jpg');
  background-repeat: no-repeat;
  background-position: center top;      /* as @matricol suggested */
  background-attachment: fixed;
  background-size: cover;               /* ensures no white space at common sizes */
}

/* serve a larger file only for very wide screens */
@media (min-width:1600px) {
  body { background-image: url('/img/bg-1920.jpg'); }
}

/* disable fixed on touch devices (many mobile browsers ignore it anyway) */
@media (hover: none) and (pointer: coarse) {
  body { background-attachment: scroll; }
}

Practical notes and troubleshooting

  • background-size: cover prevents gaps but will crop/scale the image; choose the focal point near the top/center.
  • Create two compressed source files (example: 1400px and 1920px widths). Compress aggressively (progressive JPEG or modern WebP/AVIF where supported) so the large file is only sent to large viewports.
  • If you cannot add a larger source, keep a fallback background-color that matches the image edges to hide any tiny exposed areas.
  • Test with browser DevTools responsive mode set to 1400x1050, and request a screenshot or remote share from the client if possible. Check older browsers: IE8 lacks background-size support and mobile Safari handles fixed attachment differently; provide fallbacks if those are target environments.

This approach balances visual fidelity on a 1400x1050 screen with load-time constraints and ties back to the suggestions already posted in the thread.

Recommended Answers

All 3 Replies

Member Avatar for Wraithmanilian

What is the size of the image you are currently using as the background image?

Member Avatar for Kraai

Hi

I actually found a nice online screen resolution tester yesterday, and it seems the bg image is ok on that site. It only starts to tile with a resolution of 1920 x 1200 px, and the tile does not look bad at all. So I am a happy chappie. Thanks for replying, I will mark this as solved.

For those of you who want to test your work in different screen resolutions, the url below works nice, but you have to use IE to actually get the online results.

http://www.screen-resolution.com/

Member Avatar for matricol

give a big resolution and position it to top and center of the page

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.