I need help keeping background images from tiling in webpages

M

Mr. Ass

Guest
#1
Alright the title basically describes it... The background image im dealing with is attached to this thread. I want to keep it from tiling because it just wont look right (since i want to keep the red at the top of the page only)... This was the closest solution i could find but it didnt work because the background image i have will be within a table only.

Code:
<STYLE TYPE="text/css">

<!--

BODY { background-image: url(myimage.jpg) }

BODY { background-repeat: no-repeat }

BODY { background-position: center }

-->

</STYLE>
 
L

lechtard

Guest
#2
I think tiling is the default feature for the backgrounds .. in order to keep it from doing it you could try this:
  • make a layer - put the top part as the background and ajust it to wear you want it at
  • Make another layer and put the rest in the background of that one ....
I had a simular prob with dreamweaver and that was the only way I could fix it ..

I hope you figure it out ..
 

scriptasylum

OSNN Senior Addict
#3
Originally posted by Quantum Thunder
Alright the title basically describes it... The background image im dealing with is attached to this thread. I want to keep it from tiling because it just wont look right (since i want to keep the red at the top of the page only)... This was the closest solution i could find but it didnt work because the background image i have will be within a table only.

Code:
<STYLE TYPE="text/css">

<!--

BODY { background-image: url(myimage.jpg) }

BODY { background-repeat: no-repeat }

BODY { background-position: center }

-->

</STYLE>
I assume by your attached pic that you'd like to tile it horizontally, but not vertically, right? If so, use the following style:

BODY {
background-image: url(myimage.jpg);
background-repeat: repeat-x;
background-color: black;
}

Then, you can trim that image down really small so it won't take so long to download for those with slow connections. The image will tile right to left, but not down. Since the lower part of your image is black, setting the background color to black will blend in with the image. I've attached the new smaller image too.

Edit: Oh yeah, almost forgot: This may or may not work well in the older Netscape 4.x browsers (but fine in versions 6 and up). If that's an issue, you'll have to do something a bit more exotic.
 
#5
Since it's supposed to be a background to a table and not to the BODY tag I suggest you apply the CSS to the TABLE tag instead.
Code:
TABLE {
background-image: url(myimage.jpg);
background-repeat: repeat-x;
background-color: black;
}
Or better yet, a specific TABLE tag, since you might want tables without the background. ;)
Code:
TABLE.withbackround {
background-image: url(myimage.jpg);
background-repeat: repeat-x;
background-color: black;
}
 

Members online

No members online now.

Latest posts

Latest profile posts

Perris Calderon wrote on Electronic Punk's profile.
Ep, glad to see you come back and tidy up...did want to ask a one day favor, I want to enhance my resume , was hoping you could make me administrator for a day, if so, take me right off since I won't be here to do anything, and don't know the slightest about the board, but it would be nice putting "served administrator osnn", if can do, THANKS

Been running around Quora lately, luv it there https://tinyurl.com/ycpxl
Electronic Punk wrote on Perris Calderon's profile.
All good still mate?
Hello, is there anybody in there? Just nod if you can hear me ...
Xie
What a long strange trip it's been. =)

Forum statistics

Threads
61,971
Messages
673,299
Members
89,016
Latest member
Poseeut