urgent help needed with web page coding - Overclock.net

CSU_ComputerMajor · 09-08-09

im trying to do some coding on a website/page. im trying to put a picture as the sites background but it keeps tiling it but i want it to be centered and stretched. i dont want the picture to be tiled. i cant figure out what to do. ive resized the picture and everything but it keeps tiling the picture. what do i do??? heres the code for it.

/* background for the lounge */
div#pagecontent{
visibility:show!important;
background-image:url("http://i637.photobucket.com/albums/uu96/djdark_2009/lovins%20coding/peaches-1.jpg")!important;
background-repeat:repeat!important;
background-attachment:fixed!important;
background-position:center center!important;
/* changes outer scroll-bars */
scrollbar-base-color:#9A2EFE;
scrollbar-arrow-color:black;
scrollbar-track-color:#AC58FA;
scrollbar-shadow-color:#7401DF;
scrollbar-lightshadow-color:#E3CEF6;
scrollbar-darkshadow-color:#380B61;
scrollbar-highlight-color:blue;
scrollbar-3dlight-color:white;

Kryten · 09-08-09

background-repeat:none;

That would make it not repeat. I don't think there is a way to make it fill the page or automatically resize without jscript.

Link to the page in question?

And you should probably host the image on your host, not photobucket....

CSU_ComputerMajor · 09-08-09

Quote:

Originally Posted by Kryten

background-repeat:none;

That would make it not repeat. I don't think there is a way to make it fill the page or automatically resize without jscript.

Link to the page in question?

And you should probably host the image on your host, not photobucket....

http://www.fubar.com/lounge/68727

RapidFireGT · 09-08-09

Try deleting "background-repeat:repeat" - I think that is what is making it become tiled.

Now as for stretching it, I don't know if it'll do that automatically or not.

Some additional advice: try downloading the Firebug add-on for firefox. You can look at any website (including your own) and edit the code on the fly to see what it would look like. Likewise, it has an "inspect" mode when you can move your mouse over any part of the page and it'll automatically show you the code that is referring to whatever it is that your mouse is hovering over.

Kryten · 09-08-09

I think what you can do is make the image a completley crazy high resolution and have it go no bigger than the resolution of the user's browser. But that requires jscript and I avoid jscript at all costs.

CSU_ComputerMajor · 09-08-09

Quote:

Originally Posted by RapidFireGT

Try deleting "background-repeat:repeat" - I think that is what is making it become tiled.

Now as for stretching it, I don't know if it'll do that automatically or not.

Some additional advice: try downloading the Firebug add-on for firefox. You can look at any website (including your own) and edit the code on the fly to see what it would look like. Likewise, it has an "inspect" mode when you can move your mouse over any part of the page and it'll automatically show you the code that is referring to whatever it is that your mouse is hovering over.

tried that and tried changing it to repeat:none still not working. page is linked above

CSU_ComputerMajor · 09-08-09

Quote:

Originally Posted by Kryten

I think what you can do is make the image a completley crazy high resolution and have it go no bigger than the resolution of the user's browser. But that requires jscript and I avoid jscript at all costs.

how do i do that? im not familiar with jscript...

UndertheGun · 09-08-09

Is this on topic? Link.

Quote:

How do I stop my background image from tiling?

Short Answer
There is no standards-based way of doing this in HTML. Some people create a large background (say, 1600x1200 pixels) and place the desired image in the appropriate place. Keep in mind that this "technique" has some serious drawbacks.

Long Answer
There is no way, using standard HTML, of doing it. That is, this ability is not defined in any of the HTML specs. In fact, the HTML 3.2 Reference Specification for the BODY tag defines the BODY tag's BACKGROUND attribute as specifying a URL for an image that will be used to tile the document background (emphasis added).

What some do to get around this problem is to create a huge background image (1600x1200 perhaps) that has the image they want seen in the top left corner (or around there) and the rest is some neutral color that complements the image. Keep in mind, though, that doing this has some serious drawbacks, not the least of which is the increase in download time. Other problems include additional overhead (memory), rendering time, and the hard drive space required to store the large image in cache.

It is possible to do this using Cascading Style Sheets (CSS1). This is accomplished via the background-repeat property and would be specified as:

BODY { background: url(bgimage.gif); background-repeat: no-repeat }

On a similar note, Microsoft Internet Explorer allows you to set your background as a "watermark" by adding the following to your document's BODY tag:

BGPROPERTIES=FIXED

As described on Microsoft's website, (190K document) this property "Specifies a 'watermark,' which is a background picture that does not scroll. The background image remains fixed behind any scrolling foreground information." Note that, despite this, your background image will still be tiled. It just won't scroll.

Keep in mind, though, this property will only work for those using MSIE. People using other browsers will still see your scrolling background (assuming that image loading is enabled and the browser can support images).