CSS Repeating Question
I have a database to keep track of DVD's I own and of movies I plan on renting with Netflix. No connection between the two 
As you can see in this pictures:
I'd like my orange thing to stay there no matter how wide they expand the page. So how would I do that? I figure that I'd have to create a section of the image on the left side that I would just repeat as the page expands. So is there any way to do this?
On a different note...see my table at the bottom? I colored it like the iTunes blue and white alternating, but I was wondering if there was a day to make them slightly transparent. It's not a big deal, but my orang thing runs down into that and rather then making my orange thing fade faster I'd like to see how it looks if it goes behind the table.
As you can see in this pictures:
I'd like my orange thing to stay there no matter how wide they expand the page. So how would I do that? I figure that I'd have to create a section of the image on the left side that I would just repeat as the page expands. So is there any way to do this?
On a different note...see my table at the bottom? I colored it like the iTunes blue and white alternating, but I was wondering if there was a day to make them slightly transparent. It's not a big deal, but my orang thing runs down into that and rather then making my orange thing fade faster I'd like to see how it looks if it goes behind the table.
Comments
body
{
background-image: URL(blah);
background-repeat: no-repeat;
}
Also, what DB software are you using? I've wanted to get into web databasing, but keep getting scared off.
Originally posted by ast3r3x
I'd like my orange thing to stay there no matter how wide they expand the page. So how would I do that? I figure that I'd have to create a section of the image on the left side that I would just repeat as the page expands. So is there any way to do this?
If I understand what you're describing, this should be easy.
Simply create the image you want and set it to display in the top-left corner and not repeat.
{
background-color: white;
background-image: url("/images/orangething.jpg");
background-repeat: no-repeat;
background-position: top left;
}
I don't want this to happen:
Originally posted by ast3r3x
Sorry I wasn't very clear. I'd like those ripples to stay where they are.
I don't want this to happen:
you mean, stay centered in the middle of the page?
Originally posted by ast3r3x
I'd like those ripples to stay where they are.
And he's contradicting himself!
You don't want the ripples to stay where they are; that's what they're already doing. You want then to be centered so they *will* move as you resize the window.
Try this:
background-position: top center;
Originally posted by Brad
And he's contradicting himself!
You don't want the ripples to stay where they are; that's what they're already doing. You want then to be centered so they *will* move as you resize the window.
Try this:
background-position: top center;
but then there will be a white gap to the left, when the window is resized.
the only whay to fix this is to use separate cells with different backround images.
Originally posted by Brad
And he's contradicting himself!
Ok I suck at life, but we knew that didn't we?
Originally posted by New
but then there will be a white gap to the left, when the window is resized.
the only whay to fix this is to use separate cells with different backround images.
So how would I go about doing that? The real reason I have that orange thing is to split the page in half because I think it's good to visually have a seperation between the que and movie features.
{
...
background-attachment: fixed;
...
}
And this is a great site for learning CSS.
Originally posted by Noleli2
body
{
...
background-attachment: fixed;
...
}
And this is a great site for learning CSS.
how would this help?
Originally posted by Noleli2
And this is a great site for learning CSS.
Thanks, I know of that site and checked it out, and didn't find what I was looking for. I dont' see how that will do what I want, but I can't test it yet, I will when I get home. Thanks
Originally posted by New
the only whay to fix this is to use separate cells with different backround images.
Try what i wrote above. split the background image into separate parts. Put each into separate cells. I this is to hard why not just fade the image into white?
I need a way to have an image repeating along the upper left corner and have the right side of my orange thing stay at 50% of the page.
Originally posted by ast3r3x
I don't think that will work because the left side of my form never moves.
I need a way to have an image repeating along the upper left corner and have the right side of my orange thing stay at 50% of the page.
I think you are creating problems for yourself here. Just fix the width and everything will be fine. Or you'll have to slice the graphic and then repeat it in some of the cells.
Originally posted by New
I think you are creating problems for yourself here. Just fix the width and everything will be fine. Or you'll have to slice the graphic and then repeat it in some of the cells.
Oh yeah good idea. I was thinking of repeating images in cells which wouldn't work
Originally posted by ast3r3x
Oh yeah good idea. I was thinking of repeating images in cells which wouldn't work
Hey, it's not like I'm gonna write the code for you.
Update:
Quick example:
http://www.nullface.com/ai/itunesBG/itunes.html
That's just to show the 2 transparency effects -not- as an example of code. The code is pure quickie GoLive crap.
Just showing the 2 options for image transparency in background pattern for divs or tables. In your case you'll want a white and a blue image. Mine has both in one graphic.
Edit: Like your choice of images
Originally posted by ast3r3x
Yeah, I wanted to use transparent PNG's but I want this thing to be able to be used from windows so I have to work with keeping in mind transparent PNG parts are grey on windows. PNG's are my favorite format though. Small and the only format I know that works with transparency that well for the internet.
Edit: Like your choice of images
thanks
So what about the checkerboard GIF version? My only real complaint is that 1. it's somewhat of a hack and 2. it strobes on LCDs when scrolling.
How do you do that though...is there a filter in photoshop?
Originally posted by ast3r3x
I have a problem with all of the above
How do you do that though...is there a filter in photoshop?
No, I just make a 2px x 2px image and make top left and bottom right pixels be a color and the other 2 are left transparent.
Ideally, I will then make this a pattern, expand the canvas to like 128x128px and fill it. (If your gif is too small it takes longer to render as a pattern in browsers, that's why not to leave it at 2px).
Save as GIF and it can give a moderately acceptable transparency effect in certain situations.
Of course once you've made one of these, you can merely recolor it, no need to recreate it from scratch.
Another problem is that it washes out the color you want to use, so you need to use a darker blue than iTunes actually uses, for example.