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

HTML & CSS
1

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

html

<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:


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

What browser are you using? The content shows fine in Firefox.

3

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

Only Firefox for now since I haven’t added the proper css to work with the other browsers

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

Hi,

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

e.g.


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;}




<body class="slideshow">
<div class="overlay"></div>

Or am I missing the point somewhere along the line :slight_smile:

6

thank you! It seems to be working the way I want now :smiley:

7

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.