Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    New Coder
    Join Date
    Feb 2006
    Location
    Arizona, USA
    Posts
    74
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Two backgrounds on page?

    Hi, trying to build a real simple page, just background "stuff", with more or less a single column, centered, for all the content.
    The column is 780px wide.

    Here is the problem, I like the effect of putting a fixed positioned image on the backgroud, so it stays put even when scrolling. But on this page I also have a subtle tiled background around the whole body.

    So basically, it is very easy to put a tiled bg on the body. It's also easy to put a fixed image on the body. But I can't figure out how to use a fixed image in the top-left corner, and also a tiled background at the same time.

    I have tryed layering divs, using backgrounds on both, tried changing opacity and z-index to put one on top of the other. But z-index doesn't work between different positioned blocks.
    Plus, my centered column, when the browser's width is shrunk, the fixed image was going OVER the column instead of under.

    So I repeat, how do I set a tile in the far background, then a fixed image in the top-left, and then a single centered column that will appear OVER both of those?

    Thanks
    Last edited by Vigilante; 09-29-2006 at 09:15 PM. Reason: woops

  • #2
    New Coder
    Join Date
    Feb 2006
    Location
    Arizona, USA
    Posts
    74
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Also note that I can easily place the image over the tiled background, it's just that it won't be fixed anymore, and scrolls with the page.

  • #3
    New Coder
    Join Date
    Feb 2006
    Location
    Arizona, USA
    Posts
    74
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Any ideas? Still haven't figured it out.

    Simple the question, can anybody put a fixed image in the top left, and have a tiled background along with it?

  • #4
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    What are you wanting? I mean you haven't posted any code you've tried, you haven't posted any link, and you sure haven't posted a link to the images you are using.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #5
    New Coder
    Join Date
    Feb 2006
    Location
    Arizona, USA
    Posts
    74
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I don't have any code because I can't get any code to even get CLOSE to doing what I want.

    This is an expirement for you or anybody to try.
    Here is a couple images from a google image search.

    Try this for the transparent fixed image for the top left.

    Make a plain html page such as:
    Code:
    <html>
    <head>
    <title>test</title>
    <style type="text/css">
    body {
    background:#fff url('http://www.iwriteiam.nl/D020616.gif') no-repeat fixed top left;
    }
    </style>
    </head>
    <body>
    Hi
    </body>
    </html>
    Just did that off the top of my head, but whatever your image is, it should work.
    This is the fixed background, works great in IE, didn't try in FF. It's pretty common for creating a fixed image.

    Alternately, some people have a textured background with:
    Code:
    body {
    background #fff url('http://pages.prodigy.net/web-graphics/texture-backgrounds/images/soft_mint.jpg') repeat;
    }
    This also works great.

    What I'm trying to do, again, is have BOTH a textured background, AND a fixed image in the top left.
    The GIF image is transparent, so if there is a texture under it, it should show through.

    My main problem was that I can't put both background in the body style, doesn't work that way. So I tried putting the texture on body{} and then putting the fixed image in a 100%wX100%h div. But that didn't work.
    I've had problems with one back overwriting another, not showing through, margins being messed up. And also the fact that both of these backs have to also be BEHIND the main content div, which in my testing, the fixed image was going OVER the main content for some reason. Becaue it was fixed and content was floating, z-index doesn't work, so the fixed image just plain went above the other.

    So really I have no test code or page to show you, because I can't even come close to creating this effect.

    I've done some googling, but not finding solutions. Dual backgrounds, any ideas?

    P.S. Why does it is seem like you (aerospace) answer most questions around here

  • #6
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title>Fixed image with repeating background</title>
    <style type="text/css">
    html, body {
    margin:0;
    padding:0;
    background:#FFF;
    font-family:Verdana, Arial, Helvetica, sans-serif;
    font-size:12px;
    background:url(http://img175.imageshack.us/img175/4817/softmintdd8.jpg) fixed center;
    }
    #fixed {
    background:url(http://img175.imageshack.us/img175/8562/d020616bu4.gif) no-repeat;
    width:251px;
    height:218px;
    position:fixed;
    top:20px;
    left:20px;
    z-index:0;
    }
    #container {
    position:relative;
    z-index:1;
    }
    #container p {
    margin:0;
    padding:10px;
    text-align:justify;
    }
    </style>
    <!--[if lte IE 6]>
    <style type="text/css">
    #fixed {
    position:absolute;
    left: expression( ( 20 + ( ignoreMe2 = document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft ) ) + 'px' );
    top: expression( ( 20 + ( ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop ) ) + 'px' );
    }
    </style>
    <![endif]-->
    </head>
    <body>
    <div id="fixed">&nbsp;</div>
    <div id="container">
    	<div id="content">
    		<p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas hendrerit nisl vel massa. Quisque tincidunt dictum ante. Nulla varius. Quisque vel urna eu dui vestibulum volutpat. Nullam metus metus, laoreet quis, condimentum in, consectetuer eu, purus. Ut eu eros nec odio faucibus auctor. Aenean hendrerit. Nullam pharetra est vitae massa. Suspendisse potenti. Morbi vitae orci. Suspendisse tempor eros nec dolor. Vestibulum tortor nibh, pretium ac, accumsan quis, iaculis eu, nibh. Duis sapien. Curabitur neque quam, tristique nec, hendrerit sit amet, posuere ac, tellus. Sed at elit. Aliquam risus tellus, tempus vel, suscipit id, semper at, nisl. Mauris laoreet massa at augue. Nullam a lacus in lorem ultricies pretium. </p>
    		<p> In in lorem. Curabitur commodo posuere lectus. Donec ultricies justo non justo. Donec tristique. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam fermentum massa vitae enim. Nulla facilisi. Duis id mi quis massa tempor mattis. Quisque sagittis pharetra metus. Maecenas vitae neque. </p>
    		<p> Morbi eu nisi non pede consequat pharetra. Duis tellus odio, ultrices et, egestas euismod, lacinia sed, augue. Pellentesque placerat urna ut nisi. Sed lectus nisi, mollis in, placerat at, nonummy eu, quam. Aenean consectetuer augue. Curabitur vel est eget nibh porta tempus. In hac habitasse platea dictumst. Maecenas arcu velit, egestas tincidunt, tincidunt id, lobortis ac, justo. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aenean eleifend. Pellentesque scelerisque tortor. Nulla eu pede eget velit bibendum mattis. Maecenas suscipit pulvinar mauris. Sed varius tempor lacus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Mauris tortor libero, ullamcorper quis, consequat in, pretium sit amet, ante. Donec ultricies, velit sit amet adipiscing feugiat, velit odio bibendum neque, non ornare magna ipsum eget ipsum. </p>
    		<p> Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla facilisi. Suspendisse ut felis non tortor porta sodales. Nulla mi nibh, rutrum sed, tempor nec, ultricies ac, nisi. Donec scelerisque metus at leo. Nam mattis commodo velit. Suspendisse vel justo in mi elementum hendrerit. Suspendisse at lorem consequat neque ullamcorper blandit. Cras turpis eros, volutpat quis, tincidunt et, ullamcorper vel, nisi. Morbi a lorem. Duis pretium sollicitudin diam. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Mauris est nibh, hendrerit at, tincidunt eu, ornare at, sem. Maecenas ut lectus dapibus tortor suscipit pulvinar. Integer turpis lectus, lobortis suscipit, sagittis eu, mollis at, risus. Etiam sollicitudin consectetuer ligula. Phasellus id nisl. Aenean vulputate, elit non convallis tempus, augue sem venenatis turpis, quis sodales enim felis sed diam. </p>
    		<p> Etiam pede. Suspendisse potenti. Integer vel mauris. Aliquam sed erat. Maecenas ipsum sapien, feugiat in, porta faucibus, pharetra eget, mi. Etiam cursus lacus ac lorem. In nulla lorem, fermentum eget, suscipit quis, ullamcorper eget, magna. Aliquam pede sapien, fermentum a, consectetuer eget, bibendum sed, mauris. Nullam imperdiet mi sed odio. Praesent vitae felis. Pellentesque pulvinar, leo sed condimentum tincidunt, est nulla luctus magna, ut ornare quam nisl et lacus. Quisque urna leo, aliquam vel, viverra in, molestie vitae, erat. Nullam eleifend mauris id odio. Nam est dui, tincidunt a, vulputate quis, molestie sed, tortor. Morbi convallis. </p>
    		<p> Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nunc ornare faucibus odio. Cras sapien. Morbi leo enim, malesuada sed, imperdiet et, lacinia sed, nibh. Sed enim odio, accumsan in, luctus in, aliquet sit amet, quam. Donec pretium molestie lacus. Nunc elementum vulputate leo. Duis convallis eros eleifend metus. Fusce at ante eget enim vulputate dictum. Vivamus euismod sem eget enim. Suspendisse blandit malesuada justo. Fusce nec pede. Praesent molestie tellus sit amet sapien. Nullam porttitor eleifend velit. Maecenas imperdiet mi eu lectus. Praesent at pede vel mi rutrum gravida. Curabitur consequat leo sit amet elit. Maecenas elementum ante. Integer sapien nisi, tincidunt vel, volutpat a, sollicitudin eu, libero. </p>
    		<p> Etiam ultrices. Mauris turpis nibh, euismod ac, commodo quis, pellentesque quis, purus. In eu orci sed diam sollicitudin aliquam. Nullam commodo elit vel est. Mauris enim justo, consequat et, commodo eu, tristique id, lorem. Quisque id est. Donec pretium placerat urna. Curabitur laoreet nisl. Vivamus nulla libero, consectetuer id, aliquam quis, pretium non, nulla. Donec lorem ante, accumsan non, euismod et, malesuada ut, libero. Maecenas porta. Praesent nonummy neque in quam. Proin justo. Cras fringilla cursus eros. </p>
    		<p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas hendrerit nisl vel massa. Quisque tincidunt dictum ante. Nulla varius. Quisque vel urna eu dui vestibulum volutpat. Nullam metus metus, laoreet quis, condimentum in, consectetuer eu, purus. Ut eu eros nec odio faucibus auctor. Aenean hendrerit. Nullam pharetra est vitae massa. Suspendisse potenti. Morbi vitae orci. Suspendisse tempor eros nec dolor. Vestibulum tortor nibh, pretium ac, accumsan quis, iaculis eu, nibh. Duis sapien. Curabitur neque quam, tristique nec, hendrerit sit amet, posuere ac, tellus. Sed at elit. Aliquam risus tellus, tempus vel, suscipit id, semper at, nisl. Mauris laoreet massa at augue. Nullam a lacus in lorem ultricies pretium. </p>
    		<p> In in lorem. Curabitur commodo posuere lectus. Donec ultricies justo non justo. Donec tristique. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam fermentum massa vitae enim. Nulla facilisi. Duis id mi quis massa tempor mattis. Quisque sagittis pharetra metus. Maecenas vitae neque. </p>
    		<p> Morbi eu nisi non pede consequat pharetra. Duis tellus odio, ultrices et, egestas euismod, lacinia sed, augue. Pellentesque placerat urna ut nisi. Sed lectus nisi, mollis in, placerat at, nonummy eu, quam. Aenean consectetuer augue. Curabitur vel est eget nibh porta tempus. In hac habitasse platea dictumst. Maecenas arcu velit, egestas tincidunt, tincidunt id, lobortis ac, justo. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aenean eleifend. Pellentesque scelerisque tortor. Nulla eu pede eget velit bibendum mattis. Maecenas suscipit pulvinar mauris. Sed varius tempor lacus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Mauris tortor libero, ullamcorper quis, consequat in, pretium sit amet, ante. Donec ultricies, velit sit amet adipiscing feugiat, velit odio bibendum neque, non ornare magna ipsum eget ipsum. </p>
    		<p> Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla facilisi. Suspendisse ut felis non tortor porta sodales. Nulla mi nibh, rutrum sed, tempor nec, ultricies ac, nisi. Donec scelerisque metus at leo. Nam mattis commodo velit. Suspendisse vel justo in mi elementum hendrerit. Suspendisse at lorem consequat neque ullamcorper blandit. Cras turpis eros, volutpat quis, tincidunt et, ullamcorper vel, nisi. Morbi a lorem. Duis pretium sollicitudin diam. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Mauris est nibh, hendrerit at, tincidunt eu, ornare at, sem. Maecenas ut lectus dapibus tortor suscipit pulvinar. Integer turpis lectus, lobortis suscipit, sagittis eu, mollis at, risus. Etiam sollicitudin consectetuer ligula. Phasellus id nisl. Aenean vulputate, elit non convallis tempus, augue sem venenatis turpis, quis sodales enim felis sed diam. </p>
    		<p> Etiam pede. Suspendisse potenti. Integer vel mauris. Aliquam sed erat. Maecenas ipsum sapien, feugiat in, porta faucibus, pharetra eget, mi. Etiam cursus lacus ac lorem. In nulla lorem, fermentum eget, suscipit quis, ullamcorper eget, magna. Aliquam pede sapien, fermentum a, consectetuer eget, bibendum sed, mauris. Nullam imperdiet mi sed odio. Praesent vitae felis. Pellentesque pulvinar, leo sed condimentum tincidunt, est nulla luctus magna, ut ornare quam nisl et lacus. Quisque urna leo, aliquam vel, viverra in, molestie vitae, erat. Nullam eleifend mauris id odio. Nam est dui, tincidunt a, vulputate quis, molestie sed, tortor. Morbi convallis. </p>
    		<p> Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nunc ornare faucibus odio. Cras sapien. Morbi leo enim, malesuada sed, imperdiet et, lacinia sed, nibh. Sed enim odio, accumsan in, luctus in, aliquet sit amet, quam. Donec pretium molestie lacus. Nunc elementum vulputate leo. Duis convallis eros eleifend metus. Fusce at ante eget enim vulputate dictum. Vivamus euismod sem eget enim. Suspendisse blandit malesuada justo. Fusce nec pede. Praesent molestie tellus sit amet sapien. Nullam porttitor eleifend velit. Maecenas imperdiet mi eu lectus. Praesent at pede vel mi rutrum gravida. Curabitur consequat leo sit amet elit. Maecenas elementum ante. Integer sapien nisi, tincidunt vel, volutpat a, sollicitudin eu, libero. </p>
    		<p> Etiam ultrices. Mauris turpis nibh, euismod ac, commodo quis, pellentesque quis, purus. In eu orci sed diam sollicitudin aliquam. Nullam commodo elit vel est. Mauris enim justo, consequat et, commodo eu, tristique id, lorem. Quisque id est. Donec pretium placerat urna. Curabitur laoreet nisl. Vivamus nulla libero, consectetuer id, aliquam quis, pretium non, nulla. Donec lorem ante, accumsan non, euismod et, malesuada ut, libero. Maecenas porta. Praesent nonummy neque in quam. Proin justo. Cras fringilla cursus eros. </p>
    	</div>
    </div>
    </body>
    </html>
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #7
    New Coder
    Join Date
    Feb 2006
    Location
    Arizona, USA
    Posts
    74
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I'm so mad at you for figuring that out! Bugs the heck out of me actually, I've been messing with it for 2 days. I tried everything in your code accept setting the main area to relative. All I did was set margin:auto so it would float in the middle. Which I still do, but now with relative I guess that changes how z-index works, and lets it float over the top of the fixed image. I don't know.

    This web site is in super-ealy stages of development, but if you want to see how this design was going to work, check out the current rendition of it, I'm sure it will change often, but it is the reward of your labor:

    http://www.zacksdomain.com/websites/vhms/

    And it works in FF and IE as well! Which is cool. The only problem I'm having now is that I have transparency set for the content area, and then I do a little trick to turn that OFF for the text, but that doesn't work in FF. So I don't know how to remove transparency for the text in FF.


    Mind if I eventually write this technique into an article for my web site?

    Thanks a bunch, you saved another soul from self-sacrifice.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •