SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Zealot
    Join Date
    Sep 2008
    Posts
    189
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    How Do I Get This To Work Properly? (CSS Vignette)

    I have background images rotating with the maximage slideshow so my site is set up like this:


    html

    Code HTML4Strict:
    <body>
     
    <div id="vig"></div>
    <!-- maxImage Background Slideshow -->
    <img src="/src/images/bg1.jpg" alt="" class="slidemaximage" />
    <img src="/src/images/bg2.jpg" alt="" class="slidemaximage" />
     
     
     
     
        <header class="cf">
    		<div class="container">
    			<div class="row">
    				<div id="logo">
    					<h1><a href="/">site name</a></h1>
    				</div>
    				<nav>
    					<ul>
    						<li><a href="" class="active">home</a></li>
    						<li><a href="">link</a></li>
    						<li><a href="">link</a></li>
    						<li><a href="">link</a></li>
    						<li><a href="">link</a></li>
    					</ul>
    				</nav>
    			</div>
    		</div>
    	</header>
    	<section id="content">
    		<div id="container">
    			<div class="row">
    				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    			</div>
    		</div>
    	</section>
     
     
    </body>

    css:
    Code CSS:
    html { height: 100%; }
     
    body {
    	background: #000;
    	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    	height: 100%;
    }
     
    #vig{
    	background: -moz-radial-gradient(50% 50%, transparent 0%, transparent 60%, rgba(0,0,0,0.8) 100%);
    	background: -webkit-radial-gradient(50% 50%, transparent 0%, transparent 60%, rgba(0,0,0,0.8) 100%);
    	height: 100%;
     
    	}

    The vignette works, but I guess since the height is 100% it removed everything on the website. I've tried absolute positioning with no luck so im a bit confused on how i can get this to work

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,598
    Mentioned
    411 Post(s)
    Tagged
    6 Thread(s)
    What browser are you using? The content shows fine in Firefox.

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,797
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    I'm not sure what you are trying to do there without seeing an example. Is #vig an overlay that you want on top of your rotating background images?

    If so you could used fixed positioning and place it at top:0;bottom:0;left:0;right:0; and then the rest of the page would sit on top assuming you give the main page container position relative and a higher z-index than the fixed element.

  4. #4
    SitePoint Zealot
    Join Date
    Sep 2008
    Posts
    189
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    What browser are you using? The content shows fine in Firefox.
    Only Firefox for now since I haven't added the proper css to work with the other browsers

    Quote Originally Posted by Paul O'B View Post
    I'm not sure what you are trying to do there without seeing an example. Is #vig an overlay that you want on top of your rotating background images?

    If so you could used fixed positioning and place it at top:0;bottom:0;left:0;right:0; and then the rest of the page would sit on top assuming you give the main page container position relative and a higher z-index than the fixed element.
    I uploaded it to a site so this should make it easier to understand. It can be found here

    I removed the #vig div since I'm not sure if this is the best way to go about this and placed the vignette back on body which is the way I originally had it. You can see when the page first loads or when the images fade to the next that the vignette is there I just can't figure out how to get it on top of the images.

    I've been trying to figure this out for a couple hours now with no luck, but you can see it takes some time for the content to load but if you goto the scripts example page you can see the content quickly loads, it does not cycle quickly through all the images in the beginning, and the first image in the code is the first image shown.

    That is a 2nd problem, but thought it would be worth a mention since it could be related in some way.


    Anyways thanks for the help so far! this has been a pain for me all night

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,797
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    Hi,

    Unless I'm misunderstanding (quite likely) what I said above worked for me straight away.

    e.g.
    Code:
    html { height: 100%; }
    body {
    	background: #fff;
    	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    }
    .overlay{
    position:fixed;
    left:0;right:0;
    top:0;bottom:0;	
    background: -moz-radial-gradient(50% 50%, transparent 0%, transparent 60%, rgba(0,0,0,0.8) 100%);
    z-index:2;
    }
    .container{z-index:3;position:relative;}
    Code:
    <body class="slideshow">
    <div class="overlay"></div>
    Or am I missing the point somewhere along the line

  6. #6
    SitePoint Zealot
    Join Date
    Sep 2008
    Posts
    189
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    Hi,

    Unless I'm misunderstanding (quite likely) what I said above worked for me straight away.

    e.g.
    Code:
    html { height: 100%; }
    body {
    	background: #fff;
    	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    }
    .overlay{
    position:fixed;
    left:0;right:0;
    top:0;bottom:0;	
    background: -moz-radial-gradient(50% 50%, transparent 0%, transparent 60%, rgba(0,0,0,0.8) 100%);
    z-index:2;
    }
    .container{z-index:3;position:relative;}
    Code:
    <body class="slideshow">
    <div class="overlay"></div>
    Or am I missing the point somewhere along the line
    thank you! It seems to be working the way I want now

  7. #7
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,732
    Mentioned
    31 Post(s)
    Tagged
    0 Thread(s)
    You know...since support of this property is rather limited.. you could eliminate div.overlay in the markup all together, and replace it with body:before {display:block;...;}

    Support for the :before can easily be emulated for IE. Not like it matters, since only IE9+ does gradients.. and radial-transparency-scalable gradients are another issue.


Bookmarks

Posting Permissions

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