Background image texture

Hi EE,

I am creating a website for my church , the website is :

site.ministeriosrayosdeluz.com


I am not really a designer, but a programmer, but I am trying to know how can I create a nice looking texture on the background to make it stand out more, I was thinking meabe a different color on the background or a texture and effects to it, also I had to create a very tall image since the scrollling once it grows , repeats the image vertically

Can you guys please suggest changesand or/ modify my background ? I'd appreciate your help a lot.

Tony
backgroundFull.jpg
LVL 9
TonyRebaAsked:
Who is Participating?
 
David BruggeCommented:
Visual design is all about hierarchy. You must decide on what element of the page is most important, what is least important, and where each element fits in terms of importance between the two.

Then you make what is most important stand out the most and what is least important you make much more subtle.

The way that you make things important is by size, position, contrast, color, and when working with web designs, motion.

In your web page design you make your lightbox showing your banners the largest element in the top third of the space. This plus the motion makes it the first thing the viewer sees on the page.

Next you have the lighthouse logo with its motion as well as the two motion gifs in the right hand column. This makes for A LOT of motion on the page. Each element is fighting for the viewers attention. The viewer has to actually work see what the page is about and where he needs to direct his attention.

The yellow bar just adds to the confusion. Now you want to know how to add a texture to the background to make it stand out more.

I have watched your progress on the web site since you first started posting questions about it, and I congratulate you on the progress that you have made. However, I think I can offer a few suggestions to make it stronger.

First, I like pony10us' suggestion of a simple graduated fill for the background. You only need to make a small gif and tile it vertically. Center your framing div and create the graduations so that they fade outward to the background fill color. Set a max width on this div and as the screen grows wider more of the graduation shows until it reaches the max width. After that, the background color fills in.

I have made a few other tweaks such as running the menu background across the width of the screen and extending the header background into the right hand gradation so that it looks continuous.

I would strongly suggest doing away with the motion gifs in the right column. If you feel strongly about using them, consider using them on inside pages, but not both on the same page--just too much visual clutter!
Click the image to download a larger version.
0
 
Steven CarnahanNetwork ManagerCommented:
Have you considered making the background NOT scroll?

Place this between your <HEAD> and </HEAD> tags to keep it from scrolling

<STYLE>
<!--
BODY {background-attachment: fixed;}
//-->
</STYLE>


As for the background, perhaps take a look here:   http://www.dazzlejunction.com/tumblr/christian/cross_1.jpg.html
0
 
TonyRebaAuthor Commented:
thanks , actually I was thinking to edit the original source file, of the one I am using , I had to enlarge it and lost a little resolution, I liked the one you suggested but without cross. Would you able to change it?>
0
Cloud Class® Course: Microsoft Exchange Server

The MCTS: Microsoft Exchange Server 2010 certification validates your skills in supporting the maintenance and administration of the Exchange servers in an enterprise environment. Learn everything you need to know with this course.

 
Steven CarnahanNetwork ManagerCommented:
Actually, try looking at this site: http://www.web-source.net/html_background_gradient.htm
 for how to do a gradient background. It would be easier than editing that picture and you can play around until you find the colors you like.

Sorry it took so long to answer however I had to go to a meeting.
0
 
Steven CarnahanNetwork ManagerCommented:
@D_Brugge

Very nicely done.  However I would offer a suggestion that in the menu bar you use a more distinct color scheme for those with "color blindness". I never cared much for that term since true color blindness is so very rare. Most just have trouble distinguishing between certain colors/shades.

Anyway, back to the menu bar.  The color of the words, other than the selected item (Home) are visible yet tend to "blur" into the bar making it difficult for me to read.

The gradient is very well done and I like how you brought it into the title bar. Very professional looking. Nice use of white space to bring the attention to the center.

Back to the color issue though.  The color of the top two items in the right pane are also difficult to see, at least for me.

I know that there are many variations of color blindness however the Red/Green is the most common and as one afflicted with it I like to help bring more awareness to web developers as there are so many pages out there that I simply close without actually checking them out simply because they are too difficult for me to navigate.

Just some minor suggestions to the great sample you have posted.  And I agree that the yellow bar is a little hard on the eyes and also draws your attention away from the content.
0
 
TonyRebaAuthor Commented:
I am thinking an even a different color on the background, you guys are the experts, ?> what color would be the best choice , probably a a gradient, lilish gray, ??
0
 
David BruggeCommented:
@pony10us
Excellent points all around. In fact, I generally check sites I design for contrast and "color blindness," as well as accessibility for visually impaired. Turns out that a significant number of my viewers fall into these categories and I urge every designer to heed your sage advice and design with these needs in mind.

In this case, my mind was somewhere else and I was in a rush to get an answer up and move on to paying tasks.
0
 
Steven CarnahanNetwork ManagerCommented:
@TonyReba

I like the "blue" that D_Brugge used however I can see where a grey might work as well.  I would think that you would want to use a rather light to lighter grey if you chose to go that way.  Perhaps create a copy both ways and test it out.

@D_Brugge

I appreciate individuals like you that take the time to test out with others. Thank you and if that is just a sample of what your are capable of then I am impressed.  :)
0
 
TonyRebaAuthor Commented:
I made a change on the background , can you please give me your opinion? and regards the menu item colors can you guys think on a better color??
0
 
Steven CarnahanNetwork ManagerCommented:
On my system, at least to my eyes there appears to be a white background with either 3 or 5 (depends on how I look it) bars under the title bar. I can't tell what color they are however since they look like less white as they go up I am guessing they are the grey you were asking about.

I would comment on the choppy graphics however for that I am pretty sure it is due to the way I am connected. (RDP to server and then out the net so I only get screen updates to my system) so I imagine that it might be much cleaner for most others.

.As D_Brugge mentioned, with that much movement/animation it is a little distracting to focus on the content.  Especially having it both at the top and the right.

I didn't see any real change in the colors for the links on the right so they are still a bit hard to read. I would maybe stick with the standard Blue/Grey here so that it ties in with the rest of the theme and is easier to see.

I like that you are using the lighthouse theme throughout however I would use the same lighthouse (not moving if possible) for the locations in the right side menu that you have at the top.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.