Photoshop Contest PhotoshopContest.com
Creative Contests. Real Prizes. Essential Resource.
You are not logged in. Log in or Register

 


Photoshop Contest Forum Index - Computer Problems - Webdesign question: Large backgrounds - Reply to topic

Goto page 1, 2  Next

kinetic_be

Location: Belgium

Post Sun Apr 19, 2009 1:43 pm   Reply with quote         


I'm experiencing some problems at the moment because I'm trying to make my background-image fit in any resolution.
Before, I always worked with a background-colour and set my actual content to 900 Px to make sure it would fit on most resolutions.
However, now I'm working on a site in where I want to have a background image which stretches along with the resolution from 800x600 to 1920x1200.

What I have tried:
- Putting the image in a Div or table setting it to 100% width (this works well, but the height looks extremely out of proportion when viewed on a low resolution.

I need to find a way that will keep the background in constrain proportions at all times.. The image itself I'm using is 1920 px on 942 px.

Is there an easy way to fix this, or would I need to call for Javascript or pHp to solve this problem? I know it's possible if you set it in Flash, but this website isn't supposed to contain flash-content.




Post Sun Apr 19, 2009 1:46 pm   Reply with quote         


5OO bucks and i tell you the secret Very Happy




Post Sun Apr 19, 2009 1:54 pm   Reply with quote         


oke serious now, first you pm splodge if this doesnt help, plan B, recise all to 60 pix, than open it in dos Very Happy call an ambulance , ask for a bigger willy Very Happy put all in flash resice it again to 800 pix, mow the grass, kill your father Very Happy Very Happy go to te east to sirenka , and marrie, the marry Very Happy than all is oke Very Happy or buy a mac, no no i dont have any money any more ask sinterklaas Very Happy i hope this was any helpfull and dont go to brasil Very Happy the bundas are great but the pintos are to big Laughing Laughing Laughing




kinetic_be

Location: Belgium

Post Sun Apr 19, 2009 1:58 pm   Reply with quote         


Are you trying to hook me up with Sirenka or something? Smile




Post Sun Apr 19, 2009 2:01 pm   Reply with quote         


kinetic_be wrote:
Are you trying to hook me up with Sirenka or something? Smile
did you see here picture, if you dont go i will Very Happy on my old broomstick :lol:and dont wait to long i think anfa is ready to buy a ticket and that would be sad for the nice girl Very Happy




kinetic_be

Location: Belgium

Post Sun Apr 19, 2009 2:16 pm   Reply with quote         


Alright... :p

On a more serious note: Anyone has an idea for this webdesign-issue?




pakimo

Location: Norway

Post Sun Apr 19, 2009 2:18 pm   Reply with quote         


I think maybe you have to wait for CSS3 is supported in browsers to do this? Or play with z-index?

I found this that might give an opening for a solution:
http://www.swiftys.org.uk/cgi-bin/weights




kinetic_be

Location: Belgium

Post Sun Apr 19, 2009 2:35 pm   Reply with quote         


pakimo wrote:
I think maybe you have to wait for CSS3 is supported in browsers to do this? Or play with z-index?

I found this that might give an opening for a solution:
http://www.swiftys.org.uk/cgi-bin/weights


The link you showed is indeed approaching what I'm trying to achieve.
The source-code doesn't really display much. I see that the image is set into a <P> with 100% width.. What part of the source is making the image rescale in both width and height?

Code:
<HEAD><TITLE>Swift Family Weight Charts</TITLE></HEAD>
<BODY BGCOLOR=#FFE0C0>
<TABLE CELLSPACING=0 CELLPADDING=0 WIDTH=100%>
<TR VALIGN=TOP><TD><H2>Swifty Family Weight Charts</H2></TD><TD ALIGN=RIGHT><SMALL>Version 1.02</TD></TR>
</TABLE>
<P><IMG SRC=/images/weights.gif WIDTH=100% ALT="You need to turn on image display to see this page">
<TABLE WIDTH=100%>
<TR><TD><SMALL>This page last updated at 9:51 on Saturday, 18th April 2009</SMALL>
<TD ALIGN=RIGHT><SMALL>The image above scales to the size of your browser
<TR><TD COLSPAN=2><HR>
<TR VALIGN=TOP>
<TD><A HREF=/>Home Page</A>
<TD ALIGN=RIGHT><SMALL>A <I><script type="text/javascript" language="javascript"><!--
{document.write(String.fromCharCode(60,65,32,72,82,69,70,61,34,109,97,105,108,116,111,58,115,116,101,118,101,46,106,46,115,119,105,102,116,64,103,109,97,105,108,46,99,111,109,34,62,83,119,105,102,116,121,60,47,65,62))}
--></script><NOSCRIPT><A HREF="mailto:%73%74%65ve.j.%73%77%69f%74%40%67%6D%61%69%6C.c%6F%6D">Swifty</A></NOSCRIPT></I>&trade; webpage</SMALL>
</TABLE>




kinetic_be

Location: Belgium

Post Sun Apr 19, 2009 2:37 pm   Reply with quote         


I suppose it must be the Javascript:

Code:
<TD ALIGN=RIGHT><SMALL>A <I><script type="text/javascript" language="javascript"><!--
{document.write(String.fromCharCode(60,65,32,72,82,69,70,61,34,109,97,105,108,116,111,58,115,116,101,118,101,46,106,46,115,119,105,102,116,64,103,109,97,105,108,46,99,111,109,34,62,83,119,105,102,116,121,60,47,65,62))}
--></script><NOSCRIPT><A HREF="mailto:%73%74%65ve.j.%73%77%69f%74%40%67%6D%61%69%6C.c%6F%6D">Swifty</A></NOSCRIPT></I>&trade; webpage</SMALL>
</TABLE>




splodge

Location: Yorkshire,

Post Sun Apr 19, 2009 2:46 pm   Reply with quote         


TD ALIGN=RIGHT> should be ALIGN=CENTER, but i think what you are building is basicly a pop-up witch will be blocked in most servers




_________________


Hallcross Toots
sirenka

Location: around

Post Sun Apr 19, 2009 5:05 pm   Reply with quote         


If you want pm your background so I can try...

BTW have you tried putting in html tag this property style="background-attachment:fixed" ?

BTW I'm very amused with your comments Wink
Embarassed




supak0ma

Location: Photoshop Nation

Post Mon Apr 20, 2009 4:04 am   Reply with quote         


can you post an image of the result you want to achieve?




TofuTheGreat

Location: Back where I belong.

Post Mon Apr 20, 2009 9:52 am   Reply with quote         


Script it! Determine the browser resolution and set the image size (width & height) according to the resolution. You could even have a version of the pic for each common screen resolution and load the appropriate one. Cool

Scripting could be done server side via PHP, ASP, ASP.Net, etc. or client side via Javascript/AJAX solution. Smile




_________________
Why I do believe it's pants-less o'clock! - Lar deSouza
”The mind is like a parachute, it doesn’t work if it isn’t open.” - Frank Zappa
Created using photoshop and absolutely no talent. - reyrey

kinetic_be

Location: Belgium

Post Mon Apr 20, 2009 9:55 am   Reply with quote         


Alright, thanks for the replies and the help I've had in the meantime.
Multiple solutions, so I'm going to experiment a bit and see what suits me best.




TofuTheGreat

Location: Back where I belong.

Post Mon Apr 20, 2009 10:01 am   Reply with quote         


kinetic_be wrote:
I suppose it must be the Javascript:

Code:
<TD ALIGN=RIGHT><SMALL>A <I><script type="text/javascript" language="javascript"><!--
{document.write(String.fromCharCode(60,65,32,72,82,69,70,61,34,109,97,105,108,116,111,58,115,116,101,118,101,46,106,46,115,119,105,102,116,64,103,109,97,105,108,46,99,111,109,34,62,83,119,105,102,116,121,60,47,65,62))}
--></script><NOSCRIPT><A HREF="mailto:%73%74%65ve.j.%73%77%69f%74%40%67%6D%61%69%6C.c%6F%6D">Swifty</A></NOSCRIPT></I>&trade; webpage</SMALL>
</TABLE>


The javascript simply outputs the mailto link with the text "Swifty". The img tag set to 100% width is the culprit I'll bet. Especially because the image gets wonky when shrunk down.




_________________
Why I do believe it's pants-less o'clock! - Lar deSouza
”The mind is like a parachute, it doesn’t work if it isn’t open.” - Frank Zappa
Created using photoshop and absolutely no talent. - reyrey

Goto page 1, 2  Next

Photoshop Contest Forum Index - Computer Problems - Webdesign question: Large backgrounds - Reply to topic

You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot vote in polls in this forum


Navigate PSC
Contests open  completed  winners  prizes  events  rules  rss 
Galleries votes  authentic  skillful  funny  creative  theme  winners 
Interact register  log in/out  forum  chat  user lookup  contact 
Stats monthly leaders  hall of fame  record holders 
PSC advantage  news (rss)  faq  about  links  contact  home 
Help faq  search  new users  tutorials  contact  password 

Adobe, the Adobe logo, Adobe Photoshop, Creative Suite and Illustrator are registered trademarks of Adobe Systems Incorporated.
Text and images copyright © 2000-2006 Photoshop Contest. All rights reserved.
A venture of ExpertRating.com