Solved

How to extend background image across top of entire web page

Posted on 2008-06-14
4
1,666 Views
Last Modified: 2013-12-25
Hello Experts,

I'm a total novice when it comes to creating images in PS CS3.  I recently created a PNG with some nice shading and rounded corners and then I intserted text and a company logo in it.  What I would like to do is use this as a background image at the top of the page so that it extends from what side to the other.  I set as a background image in the body tag

Problem is, it is currently a rectangle (width: 771px, height: 391px) and I don't know how I can alter it so it becomes longer and thinner to extend to either end of the page.  If this is not possible to do with this image, what specifications would I need to create a new image that would do this?


0
Comment
Question by:max7
  • 2
4 Comments
 
LVL 2

Accepted Solution

by:
rabio earned 200 total points
ID: 21786121
images will always show at the same size that they were created. You can use a simple program like microsoft paint to open the image, then go to "Image" on top in the file menu, and select attributes. Try changing the attributes to suit your needs.
When it comes to placing it as a background in the body of a web page, it is also effected by the borders that you set in HTML or web design program that you're using.
0
 
LVL 1

Author Comment

by:max7
ID: 21786151
Do you know the size I would need to create the original as so that he does extend to either end of the web page?
0
 
LVL 1

Author Closing Comment

by:max7
ID: 31467217
Suggesting MS Paint was really the best since unlike PS CS3, I can easily resize the image to my specifications w/out getting an ulcer!  Thanks for help.
0
 
LVL 1

Expert Comment

by:gin_smythe
ID: 21786816
You have to consider that your visitors will have differrent screensizes
If you create a background picture and a visitor has a larger screen or widescreen, your static image wont fill the screen correctly.

It would be possible to stretch the image over the hole page but your would take a huge loss in quality
-browsers arent build to enlarge pictures, if you tell them to stretch they will do so but the result wont be
satisfying

still there are some ways.
The common general aproach would be to divide the image into several parts
for example || left border - repeatable middle part - right border ||
The middle part would be the actual part that would automatically resize to the screensize
this solution would require of course more than assigning a background picture




 
0

Featured Post

Master Your Team's Linux and Cloud Stack

Come see why top tech companies like Mailchimp and Media Temple use Linux Academy to build their employee training programs.

Question has a verified solution.

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

Learn by example how to specify CSS selectors for Selenium WebDriver test automation software.
Because your company can’t afford for you to make SEO mistakes, you’ll want to ensure you’re taking the right steps each and every time you post a new piece of content. This list of optimization do’s and don’ts can help you become an SEO wizard.
Make a selection using the pen tool to trace the selection. Then alter the color of the selection by using the color balance option in Adobe Photoshop.
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":…

803 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