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.
I want to apply the following css styles #header { color: #333; width: 900px; float: left; padding: 10px; border: 1px solid #ccc; height: 150px; margin: 10px 0px 5px 0px; background-image: linear-gradient(to top, #CACACA 0%, #EFEFEF 100%); } With ...
Hello, I have a table with varying column widths as shown below ${"#goldBarList"} table tr td:first-child{width:5%;} ${"#goldBarList"} table tr td:first-child+td{width:5%;} ${"#goldBarList"} table tr td:first-child+td+td{width:6%;} ${"#goldBarList"} table ...
I am facing an issue with my bootstrap columns. One column has a form, while the other contains an image. The image section is set to 100% width, making it responsive when the screen size changes. However, the form remains at a fixed height regardless of t ...
Currently, I have a container div for textbox (div.tb) with position:relative. Inside this div, there are input and placeholder divs, both of which have position:absolute. The issue lies in the fact that while the input text is vertically centered, the pl ...
Is it possible to set a background image specifically for a content placeholder? Currently, I can display a background image for the entire page, but the content placeholder covers most of the picture. I would like to set a background image for the content ...
In my current project, I am creating a vue-component based on vue-select. Within this component, I have added a custom info Icon. The issue I am facing is that when the user clicks on the Icon, instead of triggering my custom method getInfo, it opens the s ...
I'm having an issue with functions related to sending emails. I am attempting to create a function where I can input a variable ($product_id) and based on that product id, send out emails. <?php $product_id = 2000; echo select_users_to_send($produ ...
The date picker successfully functions when I assign the id to the input tag as shown below: <div class="col-sm-4" id="datepicker"> <input type="text" class="form-control" id="inputDate" placeholder="Date"> <span class="glyphicon gl ...
Imagine this: With the help of this plugin, you can have a video playing as your site's favicon using the following code snippet: var favicon=new Favico(); var video=document.getElementById('videoId'); favicon.video(video); //stop favicon.v ...
I have been attempting to showcase the interior of various businesses using the Google Maps API street view feature. Initially, I was able to retrieve the place_id and then use it to access any available street view panoramas. However, this functionality s ...
This code is functioning in IE9: body.country-XYZ .abc:nth-child(3) { display:none; } As :nth-child() is effective in IE9 and newer versions, what can be done to ensure it also functions on IE8? Can you suggest an alternative method for achieving th ...
I've set up a master page called wrap.master which is connected to multiple content pages. I'm looking to create a new content page and link it to the master page. However, I want this new content page to be independent from the header and side n ...
I am facing an issue with creating a navigation bar that covers up the header text. I tried adjusting the margins to fix this problem but ended up moving the header along with the navigation bar. How can I ensure that the navigation bar remains fixed witho ...
Although Susy is a powerful tool, I have noticed a potential weakness with it. For example, imagine having three floated block elements within a container named "blocks": The "block" element is assigned a "span(4 of 12)" <div class="blocks"> &l ...
I would greatly appreciate it if someone could provide instructions on how to incorporate ico-moon icons into an email HTML, ensuring they can be properly displayed in various email clients such as Outlook and Gmail. ...
To better understand this concept, please refer to the following fiddle: http://jsfiddle.net/abhicodes/LasxP/ The main goal here is to calculate the visible height of the element with the ID #content-wrapper as the user scrolls. The height of the header ( ...
I am trying to implement a fallback for the use of calc() in my CSS using jQuery CSS: width: calc(100% - 90px); However, when I tried running the code below, it seems like the second css() function is not executing. I suspect that there might be an issu ...
Hey there, I am facing an issue with my form page that I created using HTML, CSS, and Javascript. It looks good on my computer but appears messy on a mobile phone. The elements are getting out of the white box (div) making the entire page look chaotic. Sin ...
I've been struggling with this issue for over 48 hours now. I've attempted to troubleshoot by commenting out everything except the affected components and even swapping entire components around, but the problem persists. Oddly enough, rearranging ...
Currently utilizing Twitter Bootstrap and curious if there is a specific CSS class to designate IE browsers within the BODY or HTML tags. Interested in writing CSS specifically for all IE browsers. Aware that Bootstrap offers some CSS classes for IE brows ...