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
  • 84 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by EndofSentence
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.