: How do I create a background image on web page? 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

@YK1175434

Here is my suggestion:


Make the page background a solid color of the the grey in the design
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.

Vote Up Vote Down

@Goswami781

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;

Vote Up Vote Down

@Kevin317

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.

Vote Up Vote Down