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

2 Years Ago

Show Comments

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

2 Years Ago

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

2 Years Ago

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

2 Years Ago

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

2 Years Ago

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

2 Years Ago

Show Comments

<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

You