...

View Full Version : Background image won't stretch to be full screen =S



crank01
02-25-2011, 08:38 PM
:confused: I am confused yet again lol. Here is the code I've been using to put y background image up.

<body topmargin=0 leftmargin=0 marginheight=0 marginwidth=0 bgcolor="#FFFFFF" background="/images/pinkbackground.jpg" padding=0; height:100%; link="#ffff00" vlink="#ffff00">

Now this code will not take up the full screen of the page :(
Anyone have any ideas as to why? I've tried everything that some websites told me what to do. Please help me coding forums. :thumbsup:

Excavator
02-25-2011, 08:54 PM
Hello crank01,
Your code is invalid. See the links about validation in my signature line.

This would be valid -
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
body {
height: 100%;
margin: 0;
padding: 0;
background: url(/images/pinkbackground.jpg);
}
</style>
</head>

<body>
</body>
</html>


Or this for inline code -
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
</head>

<body style="width:100%; margin:0; padding:0; background: url(/images/pinkbackground.jpg);">
</body>
</html>


To make that background image the full height/width of the browser window, have a look at this example (http://nopeople.com/CSS%20tips/background_image_resize/index.html).
That does not preserve image ratio and can get skewed out of proportion so bad as to ruin your background.

It could be that a jQuery solution would work better for you, see one here (http://bavotasan.com/downloads/full-sizebackground-image-jquery-plugin/).

crank01
02-25-2011, 09:05 PM
Ok thanks, let me have a go at it. and see how it works for me stay right there. lol

crank01
02-25-2011, 09:11 PM
Well I used the code that will stretch the image to fit the page, from the link u gave me, and I cant get the other stuff on the page to show up. I must have done something utterly wrong :confused:

Edit: Nevermind I just had to resize the image to fix the problem =) thx

Excavator
02-25-2011, 09:36 PM
Well I used the code that will stretch the image to fit the page, from the link u gave me, and I cant get the other stuff on the page to show up. I must have done something utterly wrong :confused:

Hard to tell without having a look at it. Link us to your test site.

crank01
02-25-2011, 10:01 PM
Exacavator, I fixed the last problem with my site, but now this may sound totally newbie, but hostgator duznt seem to be helping me, well... how do you make more pages? like i want to make a webpage called www.mysite.com/page2 now do I create a new file called page2.html under public_html? bcuz I tried doing this but it wouldn't load my new page :confused: :(

Excavator
02-25-2011, 10:09 PM
Exacavator, I fixed the last problem with my site, but now this may sound totally newbie, but hostgator duznt seem to be helping me, well... how do you make more pages? like i want to make a webpage called www.mysite.com/page2 now do I create a new file called page2.html under public_html? bcuz I tried doing this but it wouldn't load my new page :confused: :(

page2.html is fine for a name. Typing in your domain name is only going to load the index.html, other pages need to be linked to.

For example:

Type in mydomain.com and your site loads.
On that site you have a link to page2.html that looks like this - <a href="page2.html">Page 2</a>


See some menus you can use here (http://nopeople.com/CSS%20tips/index.html).

crank01
02-25-2011, 10:13 PM
page2.html is fine for a name. Typing in your domain name is only going to load the index.html, other pages need to be linked to.

For example:

Type in mydomain.com and your site loads.
On that site you have a link to page2.html that looks like this - <a href="page2.html">Page 2</a>


See some menus you can use here (http://nopeople.com/CSS%20tips/index.html).
but when I load the webpage, it will only work with ".html" at the end of it, i cant just load the page xxx.com/2 .Why not??? I see other websites doing it this way

crank01
02-25-2011, 11:44 PM
Please help me guys :confused:

Excavator
02-26-2011, 12:22 AM
Somthing like www.mysite.com/page2 is actually referring to directories only. If a page loads with that address it's because there is another index.html there.
The address would actually look like this - www.mysite.com/page2/index.html

Both those addresses are the same.

crank01
02-26-2011, 12:30 AM
Ok thanks so much, yeah hostgator said there servers wouldnt be able to do that, when I chat talked to customer support. I hope the guy just didnt know what he was talking about. Thx person above me who I forgot his username :thumbsup:

Excavator
02-26-2011, 12:51 AM
hostgator said there servers wouldnt be able to do that, when I chat talked to customer support. [/qhote]
Pretty sure they can. That's a very basic thing, I would expect any server would be able to do it.
[quote]
I hope the guy just didnt know what he was talking about.
Tech support giving wrong advice? :eek: That never happens!

crank01
02-26-2011, 01:08 AM
haha, is it alright if I pm you if I ever need more help from you, about any other problems I get along the road? bcuz I'm sure alot of people are sick of hearing my noob questions lol :thumbsup:

Dubs
04-02-2011, 06:56 AM
Yo bro try this out and it should work


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>

<style type="text/css">
body {
background: #FFFFFF url('IMAGE HERE') no-repeat;
background-size: 100%;
margin: 0;
padding: 0;
}
</style>

</head>

<body>
Background now should be stretched 100% both ways. If you wanna size it to a specific size you can do background-size: 100px 150px for width and height.
</body>
</html>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum