help??

T

themasterrocker

Guest
Hi,
This might sound like im havin a laugh but
How do i change my background to a picture i got?
 
Pi606

Pi606

New Member
Messages
85
Reaction score
0
Points
0
Your windows background? Or the background of an HTML page?

Windows: In windows explorer, select the image, and in the sidebar there should be an option that says "Set as Desktop Background"

HTML:
HTML: 
<body background="PATH TO PICTURE">
 
T

themasterrocker

Guest
I need to stretch to fit the background instead of repeating itself. It looks rubbish that way.
 
Last edited by a moderator:
Pi606

Pi606

New Member
Messages
85
Reaction score
0
Points
0
Again, HTML or Windows?

HTML
HTML: 
<body style="background-image:url('path to image');background-size: 100%;">

Windows

Follow instructions in above post, then:
Right click and click properties. Go to Desktop tab. There should be a drop down box that says "Position". Select "Stretch" and click OK. (See screenshot)
 

Attachments

  • bkg.png
    bkg.png
    28.7 KB · Views: 20
T

themasterrocker

Guest
yeah i got it working but now it counteracted my other image on the page out :( and that one is the "more important" one
And my text :mad:
Btw i used this
In the Head
Code: 
#divbg {
width: 100%;
height: 100%;
left: 0px;
top: 0px;
position: absolute;
z-index: 0; <------------Notice!
}

#maincontent
{
z-index:1; <--------------Notice!
position:absolute;
}
In The Body (that includes the file im using)
HTML: 
<div id="divbg"><img src="http://www.powertunezfm.pcriot.com/BACKGROUND.gif" width="100%" height="100%"/></div>
<div id="maincontent"></div>
 
Last edited by a moderator:
Pi606

Pi606

New Member
Messages
85
Reaction score
0
Points
0
Try:
Code: 
#divbg {
width: 100%;
height: 100%;
left: 0px;
top: 0px;
position: absolute;
z-index: 0;
background:url("http://www.powertunezfm.pcriot.com/BACKGROUND.gif");
}

#maincontent
{
z-index:1;
position:absolute;
}

If that doesn't work, try setting the z-index of the actual image (inside the div) to 1.

If neither of those works, then I might be stumped.

BTW, you don't need the "<--------NOTICE!" in the CSS. That was just to draw attention to those lines.

EDIT: Oh, and for the code in the top box to work, you need to remove the <img> tag in the div (the one that controls the background).
 
Last edited:
T

themasterrocker

Guest
Okay. i guess right but its totally done the opposite to what i wanted it to. its put the image and then at the bottom of the page its stuck the Text and the picture etc....
NOT what i wanted it to do.... i want the background with them on top of it to make it look better :D

Well I got this one in at the moment.

Code: 
body {
background-image: url('http://www.powertunezfm.pcriot.com/BACKGROUND.gif');
background-repeat: no-repeat;
background-position: center;
background-color: blue;
cursor: hand;
scrollbar-arrow-color: blue;
scrollbar-base-color: blue;
scrollbar-dark-shadow-color: blue;
scrollbar-track-color: blue;
scrollbar-face-color: blue;
scrollbar-shadow-color: blue;
scrollbar-highlight-color: blue;
scrollbar-3d-light-color: blue;
}
I need to get it to fit the whole of the background instead of having it as a blue background and that image in the middle.
 
Last edited by a moderator:
Pi606

Pi606

New Member
Messages
85
Reaction score
0
Points
0
Based on a couple tutorials around google, place this in a script tag in the <head> section of your page.
Code: 
function CreateBackground() {
bgimg = document.createElement("bgimg");
bgimg.src = "/images/bg.jpg"; //REPLACE THIS WITH THE PATH TO THE BACKGROUND IMAGE
st = {
position:"absolute",
zIndex:"-10",
width:getDocumentWidth(),
top:"0",
left:"0"
}
for( s in st ){
img.style[s] = st[s];
}
document.body.appendChild(bgimg);
}

function getDocumentHeight() {
 
 // the more standards compliant browsers (mozilla/netscape/opera/IE7) use window.innerWidth and window.innerHeight
 
 if (typeof window.innerWidth != 'undefined')
 {
      return window.innerHeight
 }
 
// IE6 in standards compliant mode (i.e. with a valid doctype as the first line in the document)

 else if (typeof document.documentElement != 'undefined'
     && typeof document.documentElement.clientWidth !=
     'undefined' && document.documentElement.clientWidth != 0)
 {
       return document.documentElement.clientHeight
 }
 
 // older versions of IE
 
 else
 {
       return document.getElementsByTagName('body')[0].clientHeight
 }

}

function getDocumentWidth() {
 
 // the more standards compliant browsers (mozilla/netscape/opera/IE7) use window.innerWidth and window.innerHeight
 
 if (typeof window.innerWidth != 'undefined')
 {
     return window.innerWidth
 }
 
// IE6 in standards compliant mode (i.e. with a valid doctype as the first line in the document)

 else if (typeof document.documentElement != 'undefined'
     && typeof document.documentElement.clientWidth !=
     'undefined' && document.documentElement.clientWidth != 0)
 {
       return document.documentElement.clientWidth
 }
 
 // older versions of IE
 
 else
 {
       return document.getElementsByTagName('body')[0].clientWidth
 }

}

Now for the HTML:

HTML: 
...
<body onload="CreateBackground();">
...

This is harder than I thought it would be. :eek4:

EDIT: The scripts were from http://bytes.com/forum/thread503034.html and http://andylangton.co.uk/articles/javascript/get-viewport-size-javascript/
 
Last edited:
T

themasterrocker

Guest
okay i've given it ago, and it didn't work im afraid. could you have missed something in it or something like that?
And im just tryin the old codes now and it doesn't work anymore :S

What about using this but rearranging it to be the screen width? If it can be done will you do it for me? (im sooooo rubbish with HTML)

Code: 
function imageResize($width, $height, $target) {
if ($width > $height) {
$percentage = ($target / $width);
} else {
$percentage = ($target / $height);
}
return “width=\”$width\” height=\”$height\””;

}

?>
The Function in Action

//get the image size of the picture and load it into an array
$BACKGROUND = getimagesize(”http://www.powertunezfm.pcriot.com/BACKGROUND.gif”);

?>
<img src=”http://www.powertunezfm.pcriot.com/BACKGROUND.gif” >
Edit:
I got it working.

FORUM CLOSED
 
Last edited by a moderator:
You must log in or register to reply here.
Top