954,600 Members — Technology Publication meets Social Media
Username:
Password:
Lost login information?
Have something to say? Contribute New Article Reply to this Article

image resize based on screen resolution.

Hello friends,

I have a background image in body.
What i want to achive is that
1)- calculate the visitor screen resolution.
2)- based on that resolution i want to resize my background image.

Can anyone help?

Looking for quick response.

Thanks and regards
navi

navi17
Junior Poster
118 posts since Oct 2007
Reputation Points: 15
Solved Threads: 6
 

Use javascript

screen.width - gives you the screen width
screen.height - gives you the screen height

window.resizeTo(600,600); - resizes the window

I hope that was quick enough for your needs, however this info took me 2 minutes to find using google.

Hangfire
Junior Poster in Training
62 posts since Mar 2009
Reputation Points: 14
Solved Threads: 12
 

Hello hang,
Thanks for the reply.
the code you have given is for window resizing.
I dont need that.
what i want is that, I want to resize the background image based on screen resolution.
suppose if vistior screen resolutiion is 800*600 it will resize background image to 800*600 and so on.

I have tried enough in google but no success yet.
Pls help. it very urgent

navi17
Junior Poster
118 posts since Oct 2007
Reputation Points: 15
Solved Threads: 6
 

A chap has done quite a bit of work on this, i'd read it.

http://css-tricks.com/how-to-resizeable-background-image/

Hangfire
Junior Poster in Training
62 posts since Mar 2009
Reputation Points: 14
Solved Threads: 12
 

Hi Check the article Image-resize based on screen resolution at http://netprogramminghelp.com

chandru7
Junior Poster in Training
72 posts since Sep 2009
Reputation Points: 9
Solved Threads: 13
 

Some other might do it "automatically" by adopting other code from other well-known developer. I develop my own simple code in javascript that I attached in my page to solve your issue that used to be mine.

<script type="text/javascript">
	
		function setContPos() {
			//get client screen resolution
                        var docWidth = document.body.clientWidth;
			var docHeight = document.body.clientHeight;
			
			//set image size to suit your needs
                        //percentage based
                        var elWidth = docWidth*0.7;
			var elHeight = docHeight*0.9;
			
                        //set position of the image
			var leftPos = (docWidth-elWidth)/2;
			var topPos = (docHeight-elHeight)/2;
			
                        //setting up everything in your workspace
			document.getElementById('droppable').style.left=leftPos;
			document.getElementById('droppable').style.top=topPos;
		   document.getElementById('droppable').style.width=elWidth;
		 document.getElementById('droppable').style.height=elHeight;
		}
	</script>


that is how I do it since I need to put an image to suit my clients screen resolution so it will not be over/under-size on different screen resolutions and I want to put my image on the center of the screen.

as for background image, there are many tutorials on the net that can show you how to do it but basically you need to put your image on a layer then "manipulate" it. you can use my approach there which means your image percentage is 100% and set the position accordingly.

vee_liang
Light Poster
38 posts since Aug 2008
Reputation Points: 25
Solved Threads: 8
 
<style>
body{margin:0 0 0 0;padding:0 0 0 0;}
#backgrounddiv{position:absolute;left:0;top:0;width:100%;height:100%;background:black;color:white;z-index:0;}
#bodydiv{position:absolute;left:0;top:0;width:100%;height:100%;z-index:1;}
</style>
<body><div id=backgrounddiv><img src="lleft.jpg" width="100%" height="100%" border=0></div><div id=bodydiv>Here is some text. bodydiv is your master wrapper.</div></body>
vsmash
Junior Poster
119 posts since Feb 2010
Reputation Points: 9
Solved Threads: 17
 

This article has been dead for over three months

Post: Markdown Syntax: Formatting Help
You
View similar articles that have also been tagged: