Member Avatar for EndofSentence

Ok.. I'm a little stuck at the moment. I am currently redesigning NaturalBronze.com and updating the company's website. It hasn't been touched in almost 4 years. When I mean touched, I mean they didn't even realize the website was still up. Yeah.

Anyways, after many meetings and many mocks, we decided upon a heavy images. Great! Not so great. They want the entire background of the site to be an image. I'm pretty excited about this project though as it's a completely different approach then I've ever explored before. Please take a look at this:
www.ringvemedia.com

I need to figure out how to place a background image, like they have done. If you notice no matter your browser window size, it is always the background image (never repeats!). I'm not sure if this is a simple HTML/CSS fix or if it is possibly javascript? Or am I just being dumb about this? Is the regular/basic HTML background image tag still vaild?

I don't want to put in a browser window resize function into this site, because that can be fairly annoying. I also want it to be able to be viewed on any browser, obviously.

I'm also worried about image loading time. Eh..

Help!

  • 4 Contributors
  • 7 Replies
  • 106 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by EndofSentence

Dani AI

Generated

Short summary and a practical path forward, building on 's findings and the replies from , and .

The clean, modern way to get a single, non‑repeating image that always fills the browser window is CSS3: scale the image to cover the viewport and keep it centered. That removes the need for table tricks (which, as noted, force scrollbars because the table cell follows the image size) and yields a fluid result across window sizes. Browser support is broad; see the spec and compatibility notes for background-size (MDN, Can I use).

A minimal CSS setup (apply your image via your normal stylesheet or inline style) to make the background cover and stay centered:

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

body {
  background-position: center center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

For older browsers or when you want a predictable fallback, an absolutely positioned image element that scales can be used instead of a CSS background:

.bg-fullscreen {
  position: fixed;
  top: 0;
  left: 0;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  z-index: -1;
}

Performance and UX notes: optimize the image (compress, progressive JPEG or WebP where supported), serve smaller files to mobile with media queries, and consider a small JS preloader if the image is very large. If dynamic resizing or cross‑browser polyfills are required, lightweight helpers such as Backstretch exist (project on GitHub). Avoid table-based layouts for this purpose — they work, but are brittle and nonresponsive.

Recommended Answers

All 7 Replies

Member Avatar for buddylee17

Its Css and not really anything advanced about it. If the image is big enough (like the site you referred to), it won't repeat. If it's small and you don't want it to repeat, simply say:

background-image:url('backgroundImage.jpg');
background-repeat:no-repeat;
Member Avatar for EndofSentence

Ok, I just wanted to make sure! Thanks so much for your quick reply (:

Member Avatar for EndofSentence

Actually, I don't think that's what they did. If you right click on the image and click on "view background image" (in firefox), a loading image pops up. That makes me think that they used another function to preload the image and have it act the way it does.. hm..

Member Avatar for buddylee17

The source code shows the image to be inside a one row one column table that encompasses the entire page. I have no idea why they did it this way because css would have been both cleaner and easier.

Member Avatar for icorey

Its Css and not really anything advanced about it. If the image is big enough (like the site you referred to), it won't repeat. If it's small and you don't want it to repeat, simply say:

background-image:url('backgroundImage.jpg');
background-repeat:no-repeat;

and

background-attachment: fixed;
Member Avatar for MidiMagic

The table prevents the browser from resizing. The td tags size to the image. It causes scrollbars to appear instead.

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.