I've been exploring how to add a pixel pattern overlay onto a website section similar to what's done on this site: (over the background video image at the top and the image in the bottom section).
I'm sure it's a simple process, I just haven't been able to find the right search terms to locate the CSS or other tools needed to make it happen.
Any advice or guidance would be greatly appreciated! David
By examining the website through your browser's developer tools, you will notice a clever technique used to create diagonal lines on the page. An empty div is included and positioned to cover 100% width and height of its container. It is then absolutely positioned with a higher z-index than the video container. The effect is achieved using a tile-able background image placed within the div with a class name of mk-section-mask. Here is the CSS applied to that class:
.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%;
}
The background image used, video-mask. png, features a 4px square design with a diagonal line pattern. You can view it here.
I hope this explanation clarifies things for you.
Best regards,
Dan
Feel free to check out this fiddle
Utilizing the pseudo element :after, you have the ability to incorporate a repetitive background and set its position:absolute with top, left, right, and bottom all at 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;
}
If you're curious about how a specific effect or design is achieved, a helpful tool to use is your browser's web inspecting tools. Personally, I rely on Google Chrome for site development due to its comprehensive set of tools.
For the particular question at hand, there are multiple approaches to achieve the desired outcome. To add an overlay to a non-void element, my recommendation would be to utilize 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;
}
Simply assign the class overlay to the desired <div> and you're all set. Keep in mind that elements within the .overlay may not respond to mouse/touch events, as the overlay layer takes priority.
Currently, I am attempting to determine the total height of a webpage's content, not just what is visible. In my efforts, I have managed to achieve some success in FireFox using: document.getElementsByTagName('html')[0].offsetHeight. Howeve ...
I am trying to showcase the following code in a REACT webpage, but it is not displaying as code. Instead, it is showing as actual elements. How can I display the button codes below as actual code? <code> <pre> <Button className='btn-grv ...
Encountering a seemingly straightforward issue where I am unable to make an inner div 100% height of the parent div, which is set with min-height 70vh. My goal is to have the table inside be 100% height and content vertically aligned. It currently works if ...
Is it true that setting inline width and height for all images is beneficial for SEO and can improve site loading speed? Here's an example: <img src="http://www.example.com/images/free-size.jpg" width="200" height="400" alt="random image" /> E ...
Introduction I am currently facing issues with blurry visuals in my canvas animation, especially on devices with high pixel densities like mobile and retina screens. In order to address this problem, I have researched canvas down-scaling techniques and f ...
After following instructions from another user, I successfully centered text vertically. However, I encountered difficulties when trying to center the entire content vertically. My attempt to enclose the text in its own div did not yield the desired result ...
I am looking to implement a video tag that can occupy the entire window, centered, without distorting the aspect ratio. Additionally, I want this video tag/container to push down all other content below it. When the window is resized, I would like the vid ...
Hey there, I'm a newbie to jQuery and this is my first post. Spent some time searching but couldn't find exactly what I needed. I'm trying to have alternating row colors in a table; one class as NULL/empty and the other as alt. My jQuery sc ...
Last week, my teacher and I collaborated on a fun game called rEAndom game (). The game is created using javascript, jQuery, and HTML5. One interesting feature of the game is that when you press the TAB key, a div displaying the score appears. You can chec ...
I am trying to solve a problem with creating a link that will take me to a specific part of the page while taking into account the height of the navbar. The issue is that since the navbar is fixed to the top with a solid color, it ends up covering part of ...
Something odd is happening with my HTML object: <div data-x="1" data-y="1" class="tile empty" style="top: 32px; left: 434px;"> <div class="inner">1:1</div> </div> When attempting to access its top property in jQuery using the ...
I have implemented a CSS effect where hovering over text creates an underline that expands and contracts in size. However, I now want to display an icon alongside the text that appears and disappears along with the underline effect. When I try using displa ...
Hey everyone, I'm trying to filter items based on the start and end dates using the daterange functionality in my meanjs app. I've tried multiple approaches but haven't found a solution yet. If anyone knows how to do this, please help me out ...
Having trouble getting my CSS to apply when creating a drop-down menu. I've set up UL and LI elements for the dropdown, but the styling is not rendering as expected. Check out the screenshot below for a look at how it currently appears using developer ...
Demo When clicking on any cell in the table within the JSFiddle using Firefox, you may notice that the bottom and right borders are hidden. Is there a clever solution to overcome this issue? I have experimented with a few approaches but none of them work ...
While transitioning the background-image, I noticed a difference between Chrome and Firefox. Firefox simply replaces the image instantly as expected, while Chrome adds a fade effect to the transition. Although this may be visually appealing, it introduces ...
Hello, I'm currently facing a challenge in changing my css3 -webkit-animation-play-state property from paused to running upon clicking on another div. Does anyone have any suggestions on how I can achieve this? I believe JavaScript might be the way to ...
My dilemma lies with my MVC4 web application that I'm attempting to deploy as an Azure web role. The site incorporates Metro UI CSS. While the deployed web role is functioning properly overall, I am encountering an issue with the CSS-generated conten ...
Here is an example of my HTML code: <div id="wrapper" class='common'> <div id="left" class='common'>Menu I Menu II Menu III Menu IV</div> <div id="right" class='common'>hello world..hello world ...
I have created an animation using a sequence of images. The animation runs smoothly with the setinterval function, but for some reason, it occasionally pauses. I've shared a fiddle where you can see this pause happening. Click Here to See the Unwante ...