Solved

Background image texture

Posted on 2012-03-23
10
459 Views
Last Modified: 2013-11-19
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
0
Comment
Question by:TonyReba
  • 5
  • 3
  • 2
10 Comments
 
LVL 26

Expert Comment

by:pony10us
ID: 37757976
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
 
LVL 9

Author Comment

by:TonyReba
ID: 37757989
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
 
LVL 26

Assisted Solution

by:pony10us
pony10us earned 250 total points
ID: 37758276
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
 
LVL 26

Accepted Solution

by:
David Brugge earned 250 total points
ID: 37770026
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
 
LVL 26

Expert Comment

by:pony10us
ID: 37771964
@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
Free Trending Threat Insights Every Day

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

 
LVL 9

Author Comment

by:TonyReba
ID: 37772091
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
 
LVL 26

Expert Comment

by:David Brugge
ID: 37772093
@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
 
LVL 26

Expert Comment

by:pony10us
ID: 37772309
@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
 
LVL 9

Author Comment

by:TonyReba
ID: 37773631
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
 
LVL 26

Expert Comment

by:pony10us
ID: 37773996
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

Featured Post

IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

Join & Write a Comment

In a previously published article (http://www.experts-exchange.com/articles/10331/Automatic-Duplex-Scanning-in-PaperPort-Versions-11-12-14.html) here at Experts Exchange, I explained how to achieve duplex (double-sided) scanning in Nuance's PaperPor…
This article shows how to convert a multi-page PDF file into multiple image files, with one image file created for each page of the PDF. It does this by utilizing an excellent, free software package called GraphicsMagick. The solution is amazingly s…
Make a selection using the pen tool to trace the selection. Then alter the color of the selection by using the color balance option in Adobe Photoshop.
Learn how to use the remote presentation tool in Prezi to allow you to harness the power of this cloud based presentation platform. You can show your presentation with a remote audience using this free tool.

757 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

16 Experts available now in Live!

Get 1:1 Help Now