Solved

Background image texture

Posted on 2012-03-23
10
461 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
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 
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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

The standard (non-Professional) edition of PaperPort (http://www.nuance.com/for-individuals/by-product/paperport/index.htm) from Nuance Communications (http://www.nuance.com/) (previously known as ScanSoft) is limited to five Scanning Profiles, but …
In a previous article published here at Experts Exchange, Signature Image with Transparent Background (http://www.experts-exchange.com/Web_Development/Document_Imaging/A_12380-Signature-Image-with-Transparent-Background.html), I explained how to cre…
The goal of the tutorial is to teach the user how to make his/her own presets while editing so it is easier to edit there photos. Create a preset you like and copy that setting then save it in to your presets folder.
Not only does Prezi allow you to create non-linear presentations, it also makes it easy to apply transition animations between your frames. Learn how to apply a fade-in transition to select items and entire frames in this tutorial Select "Edit Path"…

919 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

19 Experts available now in Live!

Get 1:1 Help Now