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
Jump to PostUse javascript
screen.width - gives you the screen width
screen.height - gives you the screen heightwindow.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.
Jump to PostA chap has done quite a bit of work on this, i'd read it.
Jump to Post<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>
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.
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
A chap has done quite a bit of work on this, i'd read it.
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.
<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>@vee_liang and/or other fancy guys.
I'm very beginer to html/javascript programming.
I do not undertand how to call setntPCoos function
in order to resize my image(s).
A very short html example will be helpfull.
@vasile.manda, the post is 2 years old!!! Please do not hijack it but create a new post for your question.
To answer your question, the first portion of the script is to obtain and compute a proper set of image size from the current client's display resolution. The second part, which is a hard-coded, is to assign the style values to an element with id droppable in the page. It is hard-coded because it works if and only if the page which calls the function contains an element ID droppable. You could give your image that name, and then place the function call inside your page (could be in the head as well).
Many thanks for your answer.
We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.