EvilZone
Programming and Scripting => Web Oriented Coding => Topic started by: Uriah on November 04, 2012, 01:10:53 AM
-
How many pixels do you need to make an image in order for it to take up the whole page as a background? I'm making a template in gimp to serve as the main background image and the meat of the site, but I'm not sure how many pixels to make it, and how to prevent scrolling from removing the image.
In short, I need to know how to apply what I make in gimp to my webpage.
This is my first time making a website, and I'm pretty new in this area. I Google'd it (And tried many other things), but the results haven't been very helpful...
Thank you in advance.
-
try
body {
background: url('IMAGE.PNG') no-repeat;
background-size: 100%;
}
-
try
body {
background: url('IMAGE.PNG') no-repeat;
background-size: 100%;
}
Didn't work, it's still a smaller size. :( Thx though. Do I have to make it actually bigger in gimp? If so, how much bigger? How many pixels do I need to make it full screen?
-
Didn't work, it's still a smaller size. :( Thx though. Do I have to make it actually bigger in gimp? If so, how much bigger? How many pixels do I need to make it full screen?
well it dose not really matter what size you make it because people use different screen resolution
so it can look good at one screen and crappy on another
what browser are you using? the above code should work :/
(http://evilzone.org/data:image/gif,GIF89a%12%00%12%00%B3%00%00%FF%FF%FF%F7%F7%EF%CC%CC%CC%BD%BE%BD%99%99%99ZYZRUR%00%00%00%FE%01%02%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00!%F9%04%04%14%00%FF%00%2C%00%00%00%00%12%00%12%00%00%04X0%C8I%2B%1D8%EB%3D%E4%00%60(%8A%85%17%0AG*%8C%40%19%7C%00J%08%C4%B1%92%26z%C76%FE%02%07%C2%89v%F0%7Dz%C3b%C8u%14%82V5%23o%A7%13%19L%BCY-%25%7D%A6l%DF%D0%F5%C7%02%85%5B%D82%90%CBT%87%D8i7%88Y%A8%DB%EFx%8B%DE%12%01%00%3B)
-
Yeah im very confused on this lol. Maybe someone who worked on EZ can give an answer? Nothing I tried on google actually worked...and there are so few website tutorials on youtube.
-
body {
background: url('IMAGE.PNG') repeat;
background-size: 100%;
}
Try that, use repeat instead of no-repeat
-
Same result... Maybe Zesh will know an answer when he sees this, since we're working on it together.
Thanks for the help so far guys, I'm surprised it's this hard to find an answer. I thought this would be the last thing I'd get caught up on. :D
-
Here, try this:
body {
background: url('IMAGE.PNG') repeat-x;
}
-
try making a new *.htm file with this as code
<body style="background:url('http://evilzone.org/index.php?action=dlattach;attach=1062;type=avatar') no-repeat;background-size:100%;">
just copy/paste
-
Neither seem to have worked...I have no clue why. It wont even repeat across the x-axis, but I think that may be because the image would go over the width of the page if there were two. :(
-
Ill ask again what browser are you using?
-
Ill ask again what browser are you using?
Oh I apologize for not having answered that. I'm using Google chrome.
-
Oh I apologize for not having answered that. I'm using Google chrome.
hmm that is wierd, the above code sould give you a full-sized background with chrome..
tryed a diffrent browser?
-
Is 'IMAGE.PNG' actually displaying?
-
Is 'IMAGE.PNG' actually displaying?
Yep. That's why I'm confused. If something were wrong i would think nothing would happen at all. And I did save it before re-running :D, im not making any stupid mistakes like that.
@relax: Same thing on Ie and firefox...
-
check this link
http://r3lax.host-ed.me/1.htm
full-size or small?
-
check this link
http://r3lax.host-ed.me/1.htm (http://r3lax.host-ed.me/1.htm)
full-size or small?
Yeah thats what I was looking for! It worked this time when i tried it too, I don't know what went wrong the first time. However, when I replace your image with mine, it's still small :(
-
Yeah thats what I was looking for! It worked this time when i tried it too, I don't know what went wrong the first time. However, when I replace your image with mine, it's still small :(
what file extension dose your file have?
and what size is it originally?
-
what file extension dose your file have?
and what size is it originally?
It's a ping file. (png) 650 X 600
-
It's a ping file. (png) 650 X 600
png sould work but test to save it to jpg and see if there is any difference
-
png sould work but test to save it to jpg and see if there is any difference
Same thing happened... :(
-
try
background-size: cover;or
background-size: 100% 100%;
(https://evilzone.org/data:image/gif,GIF89a%12%00%12%00%B3%00%00%FF%FF%FF%F7%F7%EF%CC%CC%CC%BD%BE%BD%99%99%99ZYZRUR%00%00%00%FE%01%02%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00!%F9%04%04%14%00%FF%00%2C%00%00%00%00%12%00%12%00%00%04X0%C8I%2B%1D8%EB%3D%E4%00%60(%8A%85%17%0AG*%8C%40%19%7C%00J%08%C4%B1%92%26z%C76%FE%02%07%C2%89v%F0%7Dz%C3b%C8u%14%82V5%23o%A7%13%19L%BCY-%25%7D%A6l%DF%D0%F5%C7%02%85%5B%D82%90%CBT%87%D8i7%88Y%A8%DB%EFx%8B%DE%12%01%00%3B)
-
try
background-size: cover;or
background-size: 100% 100%;
(https://evilzone.org/data:image/gif,GIF89a%12%00%12%00%B3%00%00%FF%FF%FF%F7%F7%EF%CC%CC%CC%BD%BE%BD%99%99%99ZYZRUR%00%00%00%FE%01%02%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00!%F9%04%04%14%00%FF%00%2C%00%00%00%00%12%00%12%00%00%04X0%C8I%2B%1D8%EB%3D%E4%00%60(%8A%85%17%0AG*%8C%40%19%7C%00J%08%C4%B1%92%26z%C76%FE%02%07%C2%89v%F0%7Dz%C3b%C8u%14%82V5%23o%A7%13%19L%BCY-%25%7D%A6l%DF%D0%F5%C7%02%85%5B%D82%90%CBT%87%D8i7%88Y%A8%DB%EFx%8B%DE%12%01%00%3B)
Wow, neither worked... I am so clueless right now. Well, I thank you for all of your help Relax, but I think I'll just change the size in gimp and make sure scrolling is not an option, lol. Hopefully I'll find out what went wrong someday, this just astounds me :D.
-
Wow, neither worked... I am so clueless right now. Well, I thank you for all of your help Relax, but I think I'll just change the size in gimp and make sure scrolling is not an option, lol. Hopefully I'll find out what went wrong someday, this just astounds me :D .
i cant let you be forced to resize you image to your screen ress to make it work :P
this is an ugly solution... copy/pase to a new file and see if it works for you..
<style type="text/css">
body,html {padding: 0px;}
#bg { padding:0px; position:fixed; width:100%; height:100%;top:0;left:0;z-index:-1;}
#main {position:absolute;z-index:1;}
#img {width: 100%;height: 100%;z-index: -1;}
</style>
<div id="bg"><img src="http://61.19.202.164/works/smtpweb52/B01/bg1.gif" id="img"></div>
<div id="main">main page</div>(https://evilzone.org/data:image/gif,GIF89a%12%00%12%00%B3%00%00%FF%FF%FF%F7%F7%EF%CC%CC%CC%BD%BE%BD%99%99%99ZYZRUR%00%00%00%FE%01%02%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00!%F9%04%04%14%00%FF%00%2C%00%00%00%00%12%00%12%00%00%04X0%C8I%2B%1D8%EB%3D%E4%00%60(%8A%85%17%0AG*%8C%40%19%7C%00J%08%C4%B1%92%26z%C76%FE%02%07%C2%89v%F0%7Dz%C3b%C8u%14%82V5%23o%A7%13%19L%BCY-%25%7D%A6l%DF%D0%F5%C7%02%85%5B%D82%90%CBT%87%D8i7%88Y%A8%DB%EFx%8B%DE%12%01%00%3B)
-
Lol, thanks man but this is so stupid: It worked but I got the same image when I replaced the source. Still too small. :(. Maybe my gimp version or something...? I don't know, I was thinking maybe I would just up the pixels in gimp to my res and hope for the best, while making sure you never have to scroll, because then you'd leave the template behind... I am working with 2 other people though, so maybe when we agree on a theme we can figure it out together.
I haven't given up and am still open to suggestions, but this is just crazy...It must be a gimp problem or the like, maybe it doesn't have to do with the code?
-
try opening the image and saving it with other program or online converter or image hosting or something ^