Solved

Background image texture

Posted on 2012-03-23
10
469 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 
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
 
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

Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

I. Introduction In a previous article (http://www.experts-exchange.com/Web_Development/Document_Imaging/A_6537-PaperPort-Upgrade-How-to-download-and-install-updated-versions-of-PaperPort-11-and-12.html) (now deprecated), I discussed how to upgrad…
Adults who share images on social media aren’t the only ones who need to worry about their privacy. Our culture’s tendency to share every move and celebration affects the privacy of our children, too.
In addition to being a great web-based presentation tool, Prezi also makes it easy to save your presentation as a PDF to share with others as well. Learn how in this tutorial. Select the share icon from the top menu in your Prezi editor: Select "D…
I designed this idea while studying technology in the classroom.  This is a semester long project.  Students are asked to take photographs on a specific topic which they find meaningful, it can be a place or situation such as travel or homelessness.…
Suggested Courses

627 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