New with website- image question. Please Help

ceece · 05-16-2007

Hi,
I found this group by googling and ran across an answer that helped somewhat. I am trying to get a decent background image that doesn't tile and covers the whole page. I edited the stylesheet with the info I found here, but I still can't figure it out. The URL is: Joy Christian Center Church
the style sheet is ..../style.css
They want a water background. I like what I have at www.joychristiancenterchurch.com/img/bg2.jpg BUT that tiles and looks ugly. www.joychristiancenterchurch.com/img/water2.jpg may look okay with white text but will probably also tile and look strange. Any ideas or help with the stylesheet in controling how it's displayed? Thank YOU! ceece

**Tamlin** · 05-16-2007

The trouble with getting a background image to cover the "whole page" is that the whole page will be different sizes for different users, depending on their screen resolution. For example, an image 800 x 600 pixels will look fine on a monitor set to 800 x 600 or smaller, but view it on a monitor at (for example) 1024 x 768 and the image will tile to fill the available area. You could of course create an image of a ridiculously huge size (say 5000 x 5000) which would not tile on any current monitor resolution, but then you would have the additional problems of large filesize, meaning a slow page load time.

I think your best bet if you really have to use a background image (and many professional web designers wouldn't touch background images with a 10 foot pole) would be to create a proper seamless tile. There are a number of tutorials available on creating seamless tiles. Here's a start: photoshop seamless tile tutorials - Google Search

stiney51 · 05-16-2007

Another comment for the website though. Reversing type on a dark background (especially one with the variations of water) is a ill-advised idea. Unless you do it in very small quantities it will make the website harder to read and add strain to the eyes.

When you find a solution that works, post the update here so we can see what you went with though!!

BTW, tamlin's comment about getting the image to tile is your best solution for using a background image. It will load quicker and will display correctly for someone like me who is using a 1900x1200 screen resolution. :-)

notjustgraphics · 05-16-2007

I agree with Stiney... light text of dark backgrounds should be avoided... especially when the background has highlights...

Not all monitors are configured with the same contrast and brightness levels... and considering the audience: church goers, i'm sure you'll have some viewers with less than perfect vision to start with... i'd recommend making it easy on them!

There are other tricks like translucent white overlays but you'd be getting into semi-complex css...

If you want to explore this idea, let me know. You can see a bit of it in action at Mike and Dan's Burger Crusade

Mike.

ceece · 05-19-2007

Quote:

Originally Posted by tamlin

.........(and many professional web designers wouldn't touch background images with a 10 foot pole)........

Herein is my problem. I'm no professional by any means. I hate most all web editors, especially the likes of Frontpage, so that leaves me learning by tutes and on my own. I knew a bg image would be difficult, but with css, it seems 100% could come into play to cover the various resolutions and different browsers somehow. Anyway, I took all of your advice and just went with a colored background. The easiest is the best for me. I created some simple banners at the free places and put them at: Joy Christian Center Church
He wants running water or a water looking background and I thought that would be neat for a banner. Time and smarts-- things I have too little of. Check out this website:Welcome to The Oasis Church --- Now that's a very good looking website. I love that blue water at the top. I may contact that church and see if they'll share it for a banner background for me. I'd think it could be found as a simple gif. Would anyone know a good place to look besides google images?
the backgr and temp page i went with is at: Joy Christian Center Church ... looks very simpleton, i know. I'm just not that creative. If I do enough and get good at this, maybe I can get paid! I'd think that Oasis church is about a $3000 site you think?
Thanks again you all,
This seems like a very nice and helpful group.
ceece

**Tamlin** · 05-19-2007

Umm...where to start?

Quote:

Originally Posted by ceece

Check out this website:Welcome to The Oasis Church --- Now that's a very good looking website. I love that blue water at the top. I may contact that church and see if they'll share it for a banner background for me. I'd think it could be found as a simple gif. Would anyone know a good place to look besides google images?

OK, the Oasis church site is built entirely in Flash which is why the animated banner looks so "watery". It's unlikely you could get a GIF with that sort of quality, and even if you did it would be huge, which would impact on the page load time of your site. Another point that springs to mind immediately is that the Oasis site does not offer a HTML alternative. Some visitors choose not to enable Flash in their browsers, while others may be using browsers where Flash has been disabled by a sys admin (as our Internet Explorers are where I work), so if you produce a Flash-only site you run the risk of losing potential visitors/customers.

Quote:

Originally Posted by ceece

the backgr and temp page i went with is at: Joy Christian Center Church ... looks very simpleton, i know. I'm just not that creative. If I do enough and get good at this, maybe I can get paid!

To be brutally honest, what you have on your site so far - although there is nothing wrong with it technically - does look a little crude and amateurish. The thing that a lot of people don't seem to appreciate is that creating a good and effective website comes down to two specifics:

Good coding
Good graphic design

A website can function with just one of these, but to really impress, you definitely need both. While coding skills can be learnt from books and tutorials, graphic design principles are a bit more "nebulous" - and (like most notions of a "creative" aspect) can vary from person to person. I know of a few sites that try to put across good design ideas (Vincent Flanders's excellent Web Pages That Suck for example), but by and large it's a case of learning by experience and analysing other sites that impress you.

However, all is not lost: you've come to the right place for good advice and I'm sure one or more of our resident web gurus will be able to give you more help on all aspects of good coding/design.

**unleash** · 05-19-2007

well, tamlin said almost everything about you're site.....but i do have a question for you:

Do you use xara? bacause the text looks a bit generated in a programm alike.

then a few tips,
1.get rid of the white behind the text(don't use shadows in text you export with an transparent bg!!)
2.you're background shouldn't be to bright, because it makes the site chaotic and hard to read.
3.try to make you're site one complete thing(everything must have a reason and must be connected to another part of the site)
4.try to use 1 to 3 fonts, that makes the site more orderly.....

well hope this helps a bit, this is just my vieuw of a good website....and I think that there are people who disagree. So I say it again this isn't the prototype for the perfect website....just my idea of a perfect website