Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17


Background image texture

Posted on 2012-03-23
Medium Priority
Last Modified: 2013-11-19
Hi EE,

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

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.

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

Expert Comment

ID: 37757976
Have you considered making the background NOT scroll?

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

BODY {background-attachment: fixed;}

As for the background, perhaps take a look here:

Author Comment

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?>
LVL 26

Assisted Solution

pony10us earned 1000 total points
ID: 37758276
Actually, try looking at this site:
 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.
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

LVL 26

Accepted Solution

David Brugge earned 1000 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.
LVL 26

Expert Comment

ID: 37771964

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.

Author Comment

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, ??
LVL 26

Expert Comment

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

Expert Comment

ID: 37772309

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.


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.  :)

Author Comment

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??
LVL 26

Expert Comment

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.

Featured Post

Enroll in September's Course of the Month

This month’s featured course covers 16 hours of training in installation, management, and deployment of VMware vSphere virtualization environments. It's free for Premium Members, Team Accounts, and Qualified Experts!

Question has a verified solution.

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

In a previous article here at Experts Exchange (…
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…
Learn how to create interesting presentations by including videos to keep your audience engaged using Prezi. Select "Insert" from the top menu in your Prezi editor: Select "YouTube Video": Paste the video URL into the prompt: "Select "Insert":…
This video Micro Tutorial shows how to password-protect PDF files with free software. Many software products can do this, such as Adobe Acrobat (but not Adobe Reader), Nuance PaperPort, and Nuance Power PDF, but they are not free products. This vide…
Suggested Courses

722 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