Hi
I have a problem with a repeating background. The situation looks like this: (The pictures are .jpg-images - geocities doesn't allow direct linking of images. Works fine with .txt
)
<!-- m --><a class="postlink" href="http://www.geocities.com/dellep03/problem1.txt">http://www.geocities.com/dellep03/problem1.txt</a><!-- m -->
On the left side of the page, I have a banner which gradually turns to a dark orange. The darkest color of this banner should continue to the bottom of the page. That's no problem - as you can see, the problem is that the background-repetition begins from the top of the page. I'd like to have it look like this:
<!-- m --><a class="postlink" href="http://www.geocities.com/dellep03/problem2.txt">http://www.geocities.com/dellep03/problem2.txt</a><!-- m -->
As the repeat-attribute is set in the <body>-tag, I'm doubting (but hoping
) that I somehow could make it start repeating ~80px lower - without pushing the javascript dropdown menu from the top.
I tried making a "hack" where I insert a picture which is all white in the top, thus covering the orange part that shouldn't be there. This works in IE but in Mozilla and Opera it looks like this:
<!-- m --><a class="postlink" href="http://www.geocities.com/dellep03/problem3.txt">http://www.geocities.com/dellep03/problem3.txt</a><!-- m -->
Everything but the javascript menu is pushed down, because of the white picture. Could I somehow get the white picture and the background-image to stack instead?
The code for the vital parts is as follows:
body {
background-image: url(../../grafik/background.jpg);
background-repeat: repeat;
}
The white background-image:
<img src=http://www.webdeveloper.com/forum/archive/index.php/"../../grafik/background2.jpg" alt="" class="testbg" />
testbg {
position: absolute;
}
Hope you get the idea
Any hints on what could be done? Thanksyou can't change the vertical alignment of a background image that repeats along the vertical access. You'll need to find a way to make your image work without repetition.you're o the right track, i believe, with your line of thinking. If you can wrangle it, you may be able to get an image to "cover" the background there. I'd have to see HTML and CSS to take a crack at it.
If thast "current location" area is in another div or some such, you may be able to make the background white and cover over the orange background.Thanks for your replies - I'll have to fiddle some more with it<head>
img.y
{
position:absolute;
left:0;
top:5px;
z-index:
}
img.x
{
position:absolute;
left:0;
top:20px;
z-index:0
}
</head>
<body>
<img class="y" scr=blahblah.jpg>
<img class="x" scr=blahblah.jpg>
</body>
Are you looking to do something like that? Where you have more than one img. look like one img.? If so this may help and all the stuff in the header can be put into a css file if its external style sheet.Not trying to be rude but I can't just look at code and know if it'll work. I'm very visual, I have to see it, be able to tinker. If you can get HTML, CSS and images into a zip or something maybe I can take a look. It's easier for me that way.The Little Guy:
Thanks for your reply - I'm not sure it'll work though. In order to use z-index the element in question must be positioned "absolute" (right?). Not sure, but I don't think this makes sense with the <body>-element. I'll have to give it a shot though - thanks
I have a problem with a repeating background. The situation looks like this: (The pictures are .jpg-images - geocities doesn't allow direct linking of images. Works fine with .txt
)<!-- m --><a class="postlink" href="http://www.geocities.com/dellep03/problem1.txt">http://www.geocities.com/dellep03/problem1.txt</a><!-- m -->
On the left side of the page, I have a banner which gradually turns to a dark orange. The darkest color of this banner should continue to the bottom of the page. That's no problem - as you can see, the problem is that the background-repetition begins from the top of the page. I'd like to have it look like this:
<!-- m --><a class="postlink" href="http://www.geocities.com/dellep03/problem2.txt">http://www.geocities.com/dellep03/problem2.txt</a><!-- m -->
As the repeat-attribute is set in the <body>-tag, I'm doubting (but hoping
) that I somehow could make it start repeating ~80px lower - without pushing the javascript dropdown menu from the top. I tried making a "hack" where I insert a picture which is all white in the top, thus covering the orange part that shouldn't be there. This works in IE but in Mozilla and Opera it looks like this:
<!-- m --><a class="postlink" href="http://www.geocities.com/dellep03/problem3.txt">http://www.geocities.com/dellep03/problem3.txt</a><!-- m -->
Everything but the javascript menu is pushed down, because of the white picture. Could I somehow get the white picture and the background-image to stack instead?
The code for the vital parts is as follows:
body {
background-image: url(../../grafik/background.jpg);
background-repeat: repeat;
}
The white background-image:
<img src=http://www.webdeveloper.com/forum/archive/index.php/"../../grafik/background2.jpg" alt="" class="testbg" />
testbg {
position: absolute;
}
Hope you get the idea
Any hints on what could be done? Thanks
you can't change the vertical alignment of a background image that repeats along the vertical access. You'll need to find a way to make your image work without repetition.you're o the right track, i believe, with your line of thinking. If you can wrangle it, you may be able to get an image to "cover" the background there. I'd have to see HTML and CSS to take a crack at it.If thast "current location" area is in another div or some such, you may be able to make the background white and cover over the orange background.Thanks for your replies - I'll have to fiddle some more with it
<head>img.y
{
position:absolute;
left:0;
top:5px;
z-index:
}
img.x
{
position:absolute;
left:0;
top:20px;
z-index:0
}
</head>
<body>
<img class="y" scr=blahblah.jpg>
<img class="x" scr=blahblah.jpg>
</body>
Are you looking to do something like that? Where you have more than one img. look like one img.? If so this may help and all the stuff in the header can be put into a css file if its external style sheet.Not trying to be rude but I can't just look at code and know if it'll work. I'm very visual, I have to see it, be able to tinker. If you can get HTML, CSS and images into a zip or something maybe I can take a look. It's easier for me that way.The Little Guy:
Thanks for your reply - I'm not sure it'll work though. In order to use z-index the element in question must be positioned "absolute" (right?). Not sure, but I don't think this makes sense with the <body>-element. I'll have to give it a shot though - thanks