Need Better Backgrounds

My client’s sister informed me that the website I just built looks “blah”.

Currently I have a white background and pages are divided into boxes using thin gray lines.

My design is minimalistic and personally I like it that way. Yet when I go to most websites these days that are plastered with background images and patterns and all kinds of “bling”.

Could someone give me some pointers on…

1.) From an artistic standpoint, what do I need to know about background?

2.) How do I technically go about adding backgrounds?

There is just no pleasing some folk :smile: one of our UK Goverment customers was given 49 designs before he was satisfied.

Maybe best to ask your client’sister for a site that she likes then copy the design.

Is it possible to see a link to the site, it will give others a better chance of supplying suggestions.

I see gov’t isn’t just a U.S. problem.

She told me she hatred one color on the site and then two ours later showed me a similar shade in a magazine and said to use it. When I pointed out that is what I already had, she said, “Oh. Well then keep what you have!”

I am ignoring her after that!

Sorry, I have been asked to leave it off of forums by the owner.

It has a white background, black text, 3-column layout, and looks like a newspaper as far as the home page. Other pages usually have a right column and then main column.

How would I do a gradient background? (I have Inkscape and Gimp but really don’t know how to use them.)

What if I wanted a ribbed or pinstripe background? Like a light silver thin-ribbed background? (I think Apple Computers used to use that somewhere…)

CSS3 can generate gradients without a bitmap, though you may want to add one as a fallback, or at least use a solid colour as a fallback.
Some css grad resouces:-
https://css-tricks.com/examples/CSS3Gradient/
http://www.htmldog.com/guides/css/advanced/gradients/

I’ve not used these, but heard Gimp is similar to Photoshop which has a gradient tool that is quite simple to use. If you do create bitmap gradients, they only need to be 1px wide (or high) if they are not diagonal or radial, so you can really slim down the filesize. Though you may want to create it wider first, so you can see it, then resize to 1px.
If you are not sure about using Gimp or whatever, I imagine there will be tons of tutorials on kicking about if you search Youtube or Google

These are people who don’t actually know what they want, they are not designers, so don’t have a clue, but still like to assert their authority as “the boss” rather than trusting your expertise, which is what they hired you for. I’ve seen it all 1000 times, idiots.

.

2 Likes

A compromise between dead plain and intrusive images might be something from here: http://subtlepatterns.com/

2 Likes

CSS3 can generate gradients without a bitmap, though you may want to add one as a fallback, or at least use a solid colour as a fallback.
Some css grad resouces:-
https://css-tricks.com/examples/CSS3Gradient/
http://www.htmldog.com/guides/css/advanced/gradients/

+1
CSS based would definitely be good, saves the image loading, at least.

I imagine there will be tons of tutorials

Yeah there for sure are. Pick the program you’re most comfortable with - I know that GIMP and PhotoShop both do this rather well - and Google it, a video or image augmented tutorial will be easier than someone trying to type out instructions probably. It’s pretty easy to do though, I bet you’d be able to come up with what you want.

These are people who don’t actually know what they want, they are not designers, so don’t have a clue, but still like to assert their authority as “the boss” rather than trusting your expertise, which is what they hired you for. I’ve seen it all 1000 times, idiots.

Definitely know the … they may not know anything, but THEY ARE IN CHARGE OF THIS PROJECT. :smiley: sigh

A compromise between dead plain and intrusive images might be something from here: http://subtlepatterns.com/

…bookmarked.

Yep, a total fool. :unamused:

When I went to that site the first thing I saw was “plug-in”. That word scares me and makes me instantly think of WordPress. Am I going to get stuck installing software to use those patterns?

The customer cannot complain about having a low rank if you are not allowed show the public site and to seek professional advise. If he is concerned about spam then have the site name “Joes Volvo Repair Site dot com”

Try this demo:

  1. Background-image
  2. @PaulOB’s Special Sliding Menu
  3. Responsive Three Column
  4. Google Mobile Friendly Tested
  5. Source code included

Link to Demo

@John_Betong,

Not understanding you…

What is that list above, and how does it relate to making super-thin vertical pinstripes for the background?

(I’m not sure what to call what I want. They really aren’t “pinstripes” because they are thinner. And when I Googled “ribs” everything required barbeque sauce!) :smile:

The single image I supplied was to demonstrate how a background image can be repeated.

As far as a pinstripe is concerned then search for a pinstripe image and replace the existing image.

Oh, okay. Your link was first broken when I read it.

What do people think about backgrounds in general?

Are they a must?

Is my client’s sister being too picky?

Am I being too much of a geek?

Personally I miss the simplicity of the former www…

Interesting but too strong.

Could I adjust things to 1px wide so it is super subtle?

Maybe alternate between #FFF and #AAA

No. If you take a deep breath and read before panicking, you’ll see that they are offering a plug-in for PhotoShop (presumably to help you create/edit your own backgrounds; I don’t know. I don’t use PS so have never investigated).

Quite separate is an entire site full of background images for download.

You can adjust to anything you want to get the desired effect. Those are just examples to demonstrate the technique and syntax. Change the colours to what you want and the widths too.

background: repeating-linear-gradient(
  to right, /*set your direction*/
  #ddd, /*this is the start colour*/
  #ddd 20px, /*the same colour 20px in to make a solid stripe 20px wide*/
  #aaa 20px, /*switch to the next colour at the same point*/
  #aaa 22px /*end it 2px after to get a 2px thin stripe, this is the end so after this it repeats*/
);
1 Like

I have updated the Demo sp that the background-image changes for different pages.

Updated Demo

Sample images from:

https://www.google.co.th/search?q=google+images+vertical+pinstripe+background&es_sm=122&biw=1745&bih=847&tbm=isch&tbo=u&source=univ&sa=X&ei=UDCEVb_ELY-jugTP9o-wBg&ved=0CCgQ7Ak

1 Like

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.