1

I am a new designer so hopefully this question isn't too basic! How do I create a background image on a webpage for a programmer? I designed the page in photoshop and I would like to know how to send the background image (the 25% opacity buildings overlay). I would be happy to send the main image (but it is too large and I imagine would slow the site and loading time drastically).

here is the link to the design...

http://problemio.com/home_page_1_1.pdf

Improve this question
2
  • Is that set of grey buildings in the back tiled?
    – SBWorks
    Commented Nov 16, 2011 at 7:53
  • No. The background is not tiled. I don't want it to be tiled-I want it specifically fixed. with the white body scrollable (as it will contain a lot of information) but I want the background fixed and not scrollable nor tiled.
    – kasha
    Commented Nov 16, 2011 at 15:09

3 Answers 3

Reset to default
3

it doesn't really matter what extension you're using as far as your browser can implement it, anyway if your background is all of a pattern, you should trim it to average dimensions (so the way it loads and it displays on the screen is faster than if you were using a large image that you expect to fit all the screen-size on the web).

here's the way you can implement it in your website. In your css file :

background-image : url(path/to/your/background/image);
background-position : 0 0;
background-repeat: repeat;

or the short-hand:

background : url(path/to/your/background/image) 0 0 repeat;
Improve this answer
5
  • thanks. I don't want the background to be tiled or scrolling which I'm afraid it will if I make the image smaller. I want a fixed background with the white body to scroll over. I'm thinking of creating a css file (which is brand new for me) with several transparent .png images of the buildings and set them at 25% opacity over the opaque background color. is that a better idea or just leave it as one large background image? I've been viewing websites with developer tools and see how sites do this and it appears they use several separate images rather than one large bg. Does that help? Thank you
    – kasha
    Commented Nov 16, 2011 at 15:23
  • ok. so it appears that designers do make background images large 960-1000X500 or so and it doesn't have a long load time. I think I'm still stuck in my knowledge from early 2000 when first started learning about web and graphic design. Been out of field for a long time and just getting back into it. It appears that large images aren't as a hindrance since most computers are much faster.
    – kasha
    Commented Nov 16, 2011 at 15:33
  • background : url(path/to/your/background/image) 0 0 no-repeat;
    – Bosworth99
    Commented Nov 16, 2011 at 20:05
  • @kasha no you're right computers are getting faster and faster so the rendering is not a trouble for most computer displaying the background (if it's large images) however fetching the data (e.g. bits of your background image) is something to take into consideration since bandwidth can significantly differ from one computer to another. And this is more true if there are more than one graphics on the page (you don't want your user quickly watch to a half image being processed, unless you don't care..).
    – vdegenne
    Commented Nov 17, 2011 at 10:12
  • If you don't want your image to be tiled or being scrolled, so this is what you get : background: url(path/to/your/background/image) 0 0 no-repeat fixed transparent
    – vdegenne
    Commented Nov 17, 2011 at 10:12
2

Ask the programmer how they want you to send it to them. Some may want a PSD, some may want a PNG, JPG, or GIF, etc. It all depends on what they are familiar with and how comfortable they are with working with graphics.

Improve this answer
0

Here is my suggestion:

  1. Make the page background a solid color of the the grey in the design
  2. Make your background image a black and white PNG image with a transparent background

That should give you the smallest set of files possible. You can mess with CSS and style definitions to make the background image fixed so it doesn't scroll.

However, you are showing the most common problem of graphics designers in the web world - you don't have the same level of control as you have in the print world. You can't prevent people from changing browser windows sizes, color quality, text size, and other basic details. Learn to make your designs flexible you are going to have lots of trouble with online designs.

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.