I have been trying to figure out how a pixel pattern overlay can be applied over a website section like in this site: http://www.tinkeringmonkey.com/ (over the background video image at top and image in bottom section)
I'm sure this is fairly straightforward, I just don't know what to google to try and find the css or whatever I need to implement it.
Thanks heaps for any replies!
David
If you inspect the website using your browser's developer tools you will see that they have simply included an empty div, scaled it to 100% width and height of it's container, positioned it absolutely, given it a higher z-index than the video container and used a tile-able background image to produce the diagonal lines you see. In this instance the class applied to the div is called mk-section-mask and the css applied to that class is...
.mk-section-mask {
background: url(../../images/video-mask.png) center center repeat;
position: absolute;
top: 0;
left: 0;
z-index: 3;
width: 100%;
height: 100%;
}
where video-mask.png is a 4px square png with a diagonal line running through it... See here
Hope that helps
Dan
Here take a look at this fiddle
With pseudo element :after, you can add a repeated background and make its position:absolute with top-left-right-bottom to zero.
CSS
div {
width: 300px;
height: 300px;
display: block;
position: relative;
background: url(https://placekitten.com/g/300/300);
}
div:after {
content: "";
background: url(http://dev.bowdenweb.com/a/i/style/patterns/tileables/06/dot-grid-1.png) repeat;
top: 0;
left: 0;
bottom: 0;
right: 0;
position: absolute;
opacity: 0.5;
}
In general, when you want to know how a certain effect or layout is achieved, try the web inspecting tools in your browser. I use Google Chrome to develop sites, it comes with a very complete tool set.
As for your specific question, there's several ways to attain this. If you want to apply this overlay to a non-void element, my approach would be using HTML pseudo-elements:
.overlay {
position: relative;
}
.overlay:after {
content: "";
position: absolute;
top: 0; left: 0; width: 100%; height: 100%;
background: url(path/to/your/transparent/overlay.png) repeat scroll 0 0;
}
Apply the class overlay to whatever <div> and you're good to go. There's a catch, though: elements inside the .overlay won't respond to mouse/touch events, because the overlay on top will get them first.
Related
How to make this headline in the css? Preferably without flexbox.
Image:
Although I would expect you to put some code and show us what you have tried, the following is one way to do it.
Essentially you create an after pseudo element, give it a 1px height and a background color of your choice. Then you position it absolutely within it's parent heading element with a lower z-index.
There are possibly better ways of doing it, with flexbox too but I didn't mention that as per the question.
.with-line {
position: relative;
}
.with-line span {
/*change it to match whatever background color you want.*/
background: white;
}
.with-line:after {
position: absolute;
left: 0;
right: 0;
content: "";
height: 1px;
background: #666;
top: 50%;
z-index: -1;
}
<h1 class="with-line"><span>Hello</span></h1>
Hey Stackoverflow Community,
I have a simple lightbox script with a few images on the page, but it somehow doesn't work as it should. When I use position:fixed on then the overlay, then it is full and the image sticks to the top, but when I use position:absolute, then it is cut half way through page and the image is gone to the top.
There must be something really easy I am missing, right? Maybe my HTML structure is wrong?
The error can be found here live - http://kriskorn.eu/lightbox-error/
Thank you for all the help!
Kris
here are two issues
1) you are using padding-top: 700px; in .main p which force the images to go down the page . and with position absolute the images can never display with overlay. the overlay div will go up with scroll .here position:fixed can work .Reason is with position fixed the content will move upside and the overlay will stay on fixed position.
2) you should use opacity:0.* or any light color .you are using 0.95 which will not display the content below the div.
this should work please check
#overlay {
background-color: rgba(255,255,255,0.3);
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
text-align: center;
/* display: none; */
}
with position absolute it will not cover all the page.
this is surprising. Why you are using this ??
.main p {
padding-top: 700px;
}
this can also be an option.
.main p {
padding-top: 10px;
}
#overlay {
background-color: rgba(255,255,255,0.3);
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
/* display: none; */
text-align: center;
}
It seems that the answer I was looking for is, that you can't have position:absolute without some kind of JavaScript code. I used position:fixed after all, because that was already working for me.
I have this fiddle for reference that shows what i'm talking about...when you scroll the table of data within the div, the image scrolls as well. I need the image to not move while the below div is scrolled, but I cannot do it. The div that overlays could be any size and I would also need the overlayed image to be in the correct spot even if the window was resized. I suppose that if it can't be done with CSS then a javascript solution would suffice, but would of course much rather have css only.
thanks!!!!
http://fiddle.jshell.net/ts46235/BMKZa/26/
css:
div.overlay {
position: relative;
}
div.overlay:after {
content: "";
position: absolute;
top: 0;
width: 100%;
height: 100%;
background: url(https://www.fadingred.com/media/images/spinner-small.gif) no-repeat 50% 50% ;
}
First, you need to move the overlay class property to a div containing your grid div (as an example your float-left clear-left div), so that the gif image do not scroll with the your table.
Then, you need to adapt your CSS code like this :
div.overlay:before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 700px;
height: 400px;
background: url(https://www.fadingred.com/media/images/spinner-small.gif) no-repeat 50%;
pointer-events: none;
}
The deal is that with top, left, width and height property, we create a box the same size as your grid div and at the same position. Then, with :before rather than :after, the image is display on top of the content of the table rather than behind. And finally pointer-events: none ensures that the image won't cause trouble when selecting text.
Here is a working Fiddle : ( Fiddle )
What I first suggested but didn't work as you wanted was :
div.overlay {
position: relative;
background: url(https://www.fadingred.com/media/images/spinner-small.gif) no-repeat 50% 50% ;
}
div.overlay:after {
content: "";
position: absolute;
top: 0;
width: 100%;
height: 100%;
}
I'm trying to create an invisible div, over the facebook comments plugin in order to disable the plugin's functionality in an Editor View. This invisible div works in all browsers except IE8. How can I fix this?
HTML:
<div id="container">
<div id="coveriframe"></div>
<div data-bind-component="fbml: fbml">(RENDER JS COMMENTS VIA KO)</div>
</div>
Try in IE8:
http://jsfiddle.net/pkbz4/19/
The above code works in ALL other Major browsers. WTF Microsoft?
Stylesheet:
#container {
width: 100%;
height: 100%;
position: relative;
}
#navi,
#coveriframe {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
#coveriframe {
z-index: 10;
}
I've done this several times in IE8. The solution that works for me is to assign a background color to the div and then set opacity to 0. IE8 then recognizes the div as "existing" above the rest of the content. I also find setting position: absolute and all four directions to 0 is more reliable than 100% width and height. Like this:
#coveriframe {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 3007;
background: #fff;
filter: alpha(opacity=0);
opacity: 0;
}
Here's my update to your jsfiddle: http://jsfiddle.net/pkbz4/21/
CSS Specification says:
The percentage is calculated with respect to the height of the
generated box's containing block. If the height of the containing
block is not specified explicitly (i.e., it depends on content
height), and this element is not absolutely positioned, the value
computes to 'auto'.
Basically, In older versions of IE (including IE8) percentage heights are based on the height of the parent element. If the parent element doesn't have an explicit height, the percentage is ignored and set to Auto (in this case, 0px).
So, to fix this, you'll either want to explicitly set the height/width of #coveriframe or its parent. One thing you could try is setting the height of html and body to 100% (I'm assuming those are the parent elements).
html, body { height:100%; }
#container {
width: 100%;
height: 100%;
position: relative;
}
#navi,
#coveriframe {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
#coveriframe {
z-index: 10;
}
why did you want to do in javascript and it works well in all browsers, I'll let my example I hope you work:
-----------------DIV-----------------
<div id="div1" style="display: block;">
<div class="mainbody">
<br />
</div></div>
-----------------JavaScript----------------
function showHideDiv(divX) {
if (divX == "1") {
document.getElementById("div1").style.visibility = "visible";
document.getElementById("div2").style.visibility = "hidden";
}
-----------------button HTML----------------
<li>click_Aqui</li>
The problem is that internet explorer up to ie9 doesn't recognize the mouse hover when hovered over a transparent background. Zach Shipley answer offers a good solutions.
But in case you want to add a border or an element to the transparent div or text the easiest way of doing this is by adding a 1px transparent png as background.
#coveriframe {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 3007;
background-image: url("pixel-transparent.png");
}
Make sure that you are putting fixed height & width to that DIV.
As Shaquin Trifonoff mentioned above sometimes 100% or any length in % may not work onIE8. Always I am trying to avoid % in such situation.
Code snippet :-
html,body{ //This makes your page expandable as per screen resolution
height:100%;
}
#your-hide-div{
height:100px;
width: 100px;
display:block;
}
EDIT: Tinkerbin example located in comments.
The issue I'm running into is with the fixed topbar going behind the slider (only one slide is in there now for testing). This is happening because the light green background used to outline the header is created using an :after pseudo-element on the .page-header class, like so (using SASS):
.page-header {
position: relative;
z-index: 0;
padding: 35px 0;
&:after {
position: absolute;
width: 100%;
top: 0;
left: 0;
right: 0;
height: 400px;
border-bottom: 5px solid $white;
z-index: -1;
}
}
This places the pseudo-element behind the header, but sill leaves it in front of the slider. I've positioned the slider relatively to place it in front of the pseudo-element, but I can't figure out for the life of me how to adjust so the topbar is always on top. Here the code for the topbar:
.nav-cont {
position: fixed;
top: 0;
left: 0;
right: 0;
padding: 0;
height: 40px;
z-index: 9999;
}
Feel free to take a look at the demo site and let me know if you have any ideas. I've been going through Chris Coyier's references along with some others and just can't seem to muster up a solution.
Thanks in advance for anyone who might be able to take a look into this!
I figured it out.
.nav-cont is a child of the header, and because of the weird z-index necessities of the background, it is getting pulled under the slideshow. z-index is relative, so with a high z-index the navigation could only be the highest thing in the header, which was all under the slideshow.
Moving .nav-cont out of the header and giving it a high z-index solves this problem. Also, strictly speaking, semantically the navigation belongs in a <nav> element.
Fixed example