: 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
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...
problemio.com/home_page_1_1.pdf
More posts by @Martha676
3 Comments
Sorted by latest first Latest Oldest Best
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.
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;
Terms of Use Create Support ticket Your support tickets Stock Market News! © vmapp.org2024 All Rights reserved.