CSS max-width

Discussion in 'Web Design and Development' started by Muskie, Feb 15, 2007.

  1. Muskie macrumors 6502


    Dec 1, 2003

    So I've got a .swf (150px tall x 800px wide) anchored to the bottom left corner of my page, and it has a gradient running from top to bottom across its width. What I'd like to do, is repeat a 150x1px gradient across the rest of the page (from 800px -> wherever the users stretches the window too).

    This is the code i have now:
    #footer {
    	background-image: url(imagesetc/bottomBar.png);
    	background-repeat: repeat-x;
    	position: absolute;
    	left: 800px;
    	bottom: 0px;
    	width: 100%;
    	height: 150px;
    but that just seems to add an 800px repetition of the image.

    i thought maybe using max-width somehow would work, but can't seem to get that working either. using max-width, i never even get the image to show up at all.

    Any ideas?

    p.s. as a sidenote, the gradient looks almost entirely black on other people's monitors. am i going to have to do this a totally different way for it to work correctly (im guessing flash is displaying the gradient a little differently than the actualy gradient image im repeating)?
  2. Makosuke macrumors 603

    Aug 15, 2001
    The Cool Part of CA, USA
    Maybe I'm not visualizing the page correctly, but couldn't you just set the background of the body (or whatever containing div is at the bottom of it) as:

    background-repeat: repeat-x; background-position: bottom left;

    ...that'd end up tiling the image across the bottom of the element, which will cover the whole width of the window if it's set to width: 100% (or, alternately, if you don't need a background image for the page itself, you can just apply it to the body and be done).

    I've done exactly what you're trying to do before, and I'm not quite seeing where it's not working for you, so if you've got a link to an example it would help...

Share This Page