CSS corner code?
I'm setting up a website for a friend of mine, and I am not as familiar with CSS as I am with HTML and I"m trying to do what she wants. She wants there to be a background image the flows with the page, not stay stationary in the background, but continue on, but she also wants there to be an image in one of the corners. Does anyone have any idea on how I could do this?
Even if you don't know the code, would you know where I could find the code? Any help would be very much appreciated.
Thanks.
For a fixed background, you'd need to use the following CSS code…
background-image:url("example.png");
background-repeat:no-repeat;
background-attachment:fixed
}
Assuming you do want the corner picture to be fixed…
position:fixed;
top:5px;
left:5px;
">
If not, you can just remove "position:fixed;" ^_^
Please give an example of the base HTML code you are trying to do and exactly what you are looking to build this as. I will help you if you can explain more of what you want it to look like (give examples of other sites that have a similar look) and I can get you the code thrown together in no time at all.
KvK, I tried to use those codes, and I don't think that was exactly what I was looking for, or I just didn't put it in the right way. But as far as putting it in the corner, it was spot on and helped out a lot. Thank you so much.
Spyware, I did do that before I even posted this thread. The codes that I had acquired didn't let me do what I was trying to do. That is the only reason that I posted this.
This is what I've been working with this entire time. I'm trying to get the background right before I start doing anything to big.
<html>
<head>
<style type="text/css">
body
{
background-image: url('http://s954.photobucket.com/albums/ae26/Fre_Quen_C/th_animebackground3.png');
background-repeat: no-repeat;
background-attachment:fixed;
background-position: 00% 100%;
}
</style>
</head>
<body background="http://s954.photobucket.com/albums/ae26/Fre_Quen_C/th_animebackground2.png">
<h1>Hello World!</h1>
<h1>Hello World!</h1>
<h1>Hello World!</h1>
<h1>Hello World!</h1>
<h1>Hello World!</h1>
<h1>Hello World!</h1>
<h1>Hello World!</h1>
<h1>Hello World!</h1>
<h1>Hello World!</h1>
<h1>Hello World!</h1>
<h1>Hello World!</h1>
<h1>Hello World!</h1>
<h1>Hello World!</h1>
<h1>Hello World!</h1>
<h1>Hello World!</h1>
<h1>Hello World!</h1>
</td>
</body>
</html>
She wants the picture in the bottom left to stay there, but also have a different background behind it. So instead of it being white in the background, it would hold a picture or a color. When you scroll down, the picture in the bottom left needs to stay in place like it does, but the background that is behind it, what I'm trying to get, needs to flow with the page like they do in some MySpace backgrounds, except the picture needs to take up the whole background and not just repeat.
I really hope that I explained that right, and if not I apologize.
If I don't have that set up right, then could someone tell me? That'd be great. Thanks.
I want the background to be like the background in this website:
http://www.grsites.com/archive/textures/view/source=archive/id=722/
But, I want to combine it so where it'll have an image in the lower corner like this:
http://w3schools.com/css/tryit.asp?filename=trycss_background-attachment
How the smiley image is up in the corner and doesn't move in the second link, I would like for it to be able to do that, but have a background image that flows at the same time like the first link.
Sorry that I didn't post those earlier, it took me a while to find them.
AldarHawk wrote: okay, so let me get this right…you are trying to get a double background image…
listen to that carefully…..think it through…..what is wrong with the question you are asking?
Lol. It sounds like you're speaking to your HTML101 class at a community college. "nooo… we don't use two backgrounds."
Ah, I understand now. You can easily accomplish this feat using the CSS z-index feature. Here is an simple example created through the modification of my original corner icon code.
<img src="example.png" style="
position:fixed;
top:5px;
left:5px;
z-index: -1;
">
It's a useful feature and simple to understand, CSS' method of layering DOM objects, "z-index". Problem solved, I believe. :happy: