GMOD - Loading URL Resize For Different Resolutions
7 replies, posted
I made a image for my TTT server for the loading screen when joining, to make it look better, i made the image in 1920x1080 (which is what i play on) and it looks exactly how i wanted it to look. I used Imgur to host the image and I just used the link for the full screen picture ([url]http://i.imgur.com/zGG7LuX.png?1[/url]). However when my friend joined who plays on a laptop (1280x720) the picture did not fit in his screen, with the two scroll bars down the side ([url]http://i.imgur.com/zkSoux1.jpg?1[/url]). Is there a way i can make the image automatically change resolution to fit the joining persons display resolution to make it full screen like mine? Thanks! :smile:
I would be using Google Sites to create the page. Don't know what kind of code that it supports.
this might be able to help you: [url]http://css-tricks.com/perfect-full-page-background-image/[/url]
[QUOTE=drake90001;41711328][code]
<div align="center">
<img src="images/ttt.jpg" class="bg">
</div>
<style type="text/css">
.bg {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
z-index: -5000;
}
</style>
[/code]
Obviously, replace images/ttt.jpg with your image URL.[/QUOTE]
Hi, thanks for the code but Google sites doesn't seem to accept it :suicide: . Do you know how to do this using HTML code? Thanks!
get a free webspace (search google for "free webspace") and upload the html file with an FTP client like FileZilla to your webspace
Make a dropbox, upload it there.
[QUOTE=Stevens4709;41712039]Hi, thanks for the code but Google sites doesn't seem to accept it :suicide: . Do you know how to do this using HTML code? Thanks![/QUOTE]
Make sure the page is a php file. HTML code would be something like this:
[code]
<!DOCTYPE html>
<html>
<head>
<style>
* {
padding: 0;
margin: 0;
}
.fit {
max-width: 100%;
max-height: 100%;
}
.center {
display: block;
margin: auto;
}
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" language="JavaScript">
function set_body_height() {
var wh = $(window).height();
$('body').height(wh); // body height = window height
}
$(document).ready(function() {
set_body_height();
$(window).bind('resize', function() { set_body_height(); });
});
</script>
</head>
<body>
<img id="the_pic" class="center fit" src="pic.jpg" >
</body>
</html>
[/code]
pic.jpg is what you'd replace.
[QUOTE=zerothefallen;41717080]Make a dropbox, upload it there.[/QUOTE]
How would i do this? :D
[editline]6th August 2013[/editline]
[QUOTE=Stevens4709;41730843]How would i do this? :D[/QUOTE]
Did it, thanks to all your replys! :D
Sorry, you need to Log In to post a reply to this thread.
