I'm working on an application that requires a login box with a transparent background to display the body's background image, similar to LinkedIn:
LinkedIn uses a blurry background for their login box. How can I achieve this effect using CSS?
I've attempted the following code, but it's not producing the desired result:
background-color: ffffff;
opacity: 0.4
margin-left: 200px;
Can someone point me in the right direction?
Have you experimented with using the CSS filter (currently only functional in webkit)?
Take a look at this resource: http://davidwalsh.name/css-filters
(I haven't had the opportunity to test it myself, but you may need to separate the image and the filter into two separate divs)
Apologies for any language errors :)
EDIT:
I've created this pen: http://codepen.io/anon/pen/gEmrD
HTML:
<div class="container">
<div class="content">
</div>
<div class="form">
<p>This represents your form (use your imagination!)</p>
</div>
</div>
CSS:
.container {
width: 1000px;
height: 100%;
min-height: 500px;
background-image: url('http://www.gordonviaggi.it/files/wedding_packets/in_giro_per_san_francisco.jpeg');
background-size: 1000px;
background-position: 50% 50%;
display: block;
}
.content {
width: 100%;
height: 300px;
margin: 0;
background-image: url('http://www.gordonviaggi.it/files/wedding_packets/in_giro_per_san_francisco.jpeg');
background-size: 1000px;
background-position: 50% 0;
filter: blur(3px);
-webkit-filter: blur(3px);
display: block;
}
.form {
position: absolute;
top: 200px;
left: 250px;
width: 500px;
height: auto;
background-color: rgba(255,255,255,0.5);
color: #222;
display: block;
}
To achieve a semi-transparent background color, you can use
background-color: rgba(255,255,255,0.5)opacity: 0.4 will also make the content transparent.
Check out the DEMO
I’m having issues with AddToAny for social media sharing on my website. It seems like FireFox is blocking it because of tracking prevention measures. Error Message in Console: The resource at “https://static.addtoany.com/menu/page.js” was blocked d ...
Today, I made the decision to dive into learning React. Typically, I use Brackets for my coding environment. The first step I took was adding the necessary sources to my HTML code. <html> <head> <link rel="stylesheet" href="styl ...
I am in the process of setting up a preview box for an HTML editor on one of my pages. I created a basic <div id="preview"></div> style container where I occasionally input my HTML source, which is working adequately. The issue arises when Boo ...
When trying to access the 'data' element in a JSON object, I have encountered an issue. The element is accessible when called from HTML, but not when called in JavaScript. HTML: <p>{{geoJson.data}}</p> JavaScript: let scope; let d ...
As I work on designing a website, I am facing an issue with responsiveness that I am willing to accept for now. I am looking to establish a minimum width for the overall page to be around 1000px, with a horizontal scrollbar appearing if the screen width is ...
Here is the code snippet I am working with: HTML: <div id="mapWrapper" style="height: 624px;"> <div class="box" id="map"> <h1>Campus</h1> <p>Description Campus Map.</p> <img src="abc.png" ...
I'm looking to enable user input in one of my SVG text fields when they click on it. Any ideas on how to achieve this? const wrapper = document.getElementById('wrapper'); const text = document.getEl ...
Hello there! I've run into a height and border issue with a div. Here's the CSS I'm currently working with: .content { background-image: url(../../images/logo-04.png); background-position: left bottom; ...
let b = (function maria() { alert("ee"); })(); * this code runs as soon as the page loads * <button onclick="b">Click me</button> * this code only runs when button is clicked * <button onclick="alert('ee')">Click m ...
Utilizing Bootstrap Modal for quick news pop-ups has been a challenge. Currently, the issue is that when clicking on a link, it only displays a small box instead of fullscreen. My question simply put: Is there a way to append the width and height propert ...
I am trying to arrange 2 paragraphs side by side. <p class = "firstClass">This is the first paragraph.</p> <p class = "secondClass">This is the second paragraph.</p> Result: This is the first paragraph. This is the second paragra ...
I have been attempting to create a hoverable dropdown menu, but I am encountering an issue where the items of the dropdown are overlapping. Despite my efforts to adjust the CSS classes, I have not been successful in fixing this problem. Additionally, I ha ...
<div id="rightContent" style="display: inline-block; width: 700px; vertical-align: top;"> <div> <h1><em class="SomethingHeading">Something</em></h1> </div> <d ...
While working with Django framework, Interestingly, both name="button" and name="submit" function correctly upon submitting the form. {% buttons %} <button name="button" class='btn btn-primary'>Save</button> {% endbu ...
Everything is smooth sailing with PLUpload on my development machine. However, once I transfer it to my ASP server, it suddenly comes to a screeching halt. After some investigation, I've pinpointed the issue to a discrepancy in the headers being sent ...
I'm attempting to create an input component that wraps the text and increases in height with each new line, similar to how it works on desktop Facebook. When you select someone, open the message box, and start typing, the input grows larger with each ...
I am currently facing an issue with my HTML fragment that iterates over a key and value collection. Everything works perfectly when I insert values into an object and iterate through it using the HTML fragment. However, in order to maintain a specific key ...
There is a div element that includes a specific class. My goal is to remove this class when the window is resized to fit a mobile view-port. <div class="box"></div> ...
I encountered an issue with an input tag that has a specific logic: https://codepen.io/ion-ciorba/pen/MWVWpmR In this case, I have a minimum value retrieved from the database (400), and while the logic is sound, the user experience with the component lea ...
I've been going through a whirlwind of confusion lately, unable to find a solution after spending over 100 hours on this. I'm reaching out for help in hopes that someone can guide me in the right direction! UPDATE: To clarify my issue and seek a ...