Designing a charcoal square div featuring a see-through circular element at its center

I'm working on a design concept that involves creating a square div with a transparent circle in the center. The idea is to have an image as the background, with the transparent circle acting like a window through which the background image can be seen.

For reference, you can see a similar effect in action here:

My attempt at achieving this look failed:

<div style="width:100%; height:550px; float:left; background:#aaa;">
    <div style="width:250px; height:250px; margin:150px auto; border-radius:125px; background:transparent; border:1px solid #000;">
    </div>
</div>

Any advice or guidance on how to successfully create this effect would be greatly appreciated!

Thank you in advance

jqueryhtmlcss

Answer №1

Yes, it is totally achievable with CSS! You simply need to create a circle and adjust the background-position property to fixed:

.window{
  background: url("http://upload.wikimedia.org/wikipedia/commons/5/52/New_York_Midtown_Skyline_at_night_-_Jan_2006_edit1.jpg") center no-repeat fixed;
  width: 100%;
  height: 100%;
  border-radius: 50%;
}

Check out the FIDDLE here

UPDATE WITH YOUR CUSTOMIZED CSS:

Updated FIDDLE available here

Answer №2

the background image is being utilized

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Combining Rails 3.1 authenticity tokens with the uploadify feature

Currently, I am facing an issue while trying to integrate Uploadify with my Rails 3.1 application. Despite setting up all the necessary steps such as middleware, initializers, and configuration, everything seems to be working correctly except for one parti ...

jqueryruby-on-railsrubyuploadifyauthenticity-token

Tips for setting a value in $scope within an ng-repeat loop in AngularJS

I'm currently facing an issue with ng-repeat in angularJS, specifically on how to assign a value in $scope inside ng-repeat. Here is my scenario: I have a JSON file that contains all the data structured like this: [ {BookID:1,Chapter:1,ContentID:1, ...

javascripthtmlangularjs

To close the responsive menu, simply click anywhere outside of the navigation bar

My issue involves a responsive menu with Bootstrap. On desktop, the menu closes fine; however, on the responsive view, I want it to close when clicking outside of the nav menu in any area. Here is my navigation code: <!-- Navigation --> <nav id= ...

javascriptjqueryhtmlcsstwitter-bootstrap

Creating the main webpage's HTML through the Codebehind feature in ASP.Net using VB

Currently, I am immersed in a recreational project aimed at enhancing my understanding of vb.net and its interconnectivity. I welcome any suggestions that could potentially enhance the efficiency of my approach! My present focus involves extracting data f ...

jqueryasp.nethtmlvb.net

Is it possible to create a popup window that remains fixed at the top edge of the screen but scrolls along with the rest of the page if

In an attempt to organize my thoughts, I am facing a challenge with a search page similar to Google. The search results trigger a popup window when hovering over an icon, located to the right of the search results. Here is what I am looking to achieve with ...

javascriptcssajaxscrollpopup

Using display:inline-block will increase the vertical spacing

I am currently dealing with the following HTML and CSS setup: * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } body { margin: 0; } .row { background-color: red; /* display: inline-block; */ } ul { ...

htmlcsspadding

Navigate to the end of a container

Is there a method to automatically scroll to the bottom of a div when the page is loaded? I have attempted several solutions without success. If you have any insights, please share them. Thank you! ...

javascriptjqueryhtmlcssscroll

What are the steps to convert a canvas element, using an image provided by ImageService as a background, into a downloadable image?

I've been working on an app that allows users to upload an image, draw on it, and save the result. To achieve this functionality, I'm using a canvas element with the uploaded image as its background. The image is retrieved through ImageService. B ...

javascripthtmlgoogle-app-enginegoogle-chrome

Retrieve image data by capturing the image from the input field and showing it on the screen

I've been searching online and can't seem to find a clear answer on whether this task is possible. Here's what I want to achieve before submission: When a user chooses a file for upload, I aim to extract the image data and convert it into b ...

javascripthtmlajaxfile-uploadonchange

Unable to receive data from jQuery AJAX request

I'm feeling a little puzzled at the moment. Whenever I run my ajax call, the error function is triggered every time. I am aware that the data is returning as JSON, and I have set the datatype as jsonp to enable cross-origin functionality. I am not sur ...

javascriptjqueryajax

My CSS disappears when using an ASP.Net MVC form

Unable to find any similar issue on Google... seeking some assistance. When I apply CSS formatting to style my form as desired, it displays correctly on the page without any issues. However... When I place the actual form within the following code snipp ...

htmlcssasp.net-mvc

Creating a color icon for StackExchange using HTML

I am currently working on building my personal website. I am looking to include a link to my Stack Exchange profile on my site using the Stack Exchange icon. However, the icons available in Font Awesome are grayscale and not colored like other icons such a ...

htmlcsscolorsiconsstackexchange

Locate the <li> element within the list that was clicked on by the user using JQuery UI Selectable

I am trying to retrieve the <li> element that the user has clicked on in a jQueryUI selectable. The goal is to determine whether the clicked element is already selected or not and then take action based on that. The following code is what I have so f ...

jqueryselectable

Searching for a JavaScript tool that offers syntax highlighting capabilities

I have come across some excellent RTE HTML text editors such as jsredaktor, TinyMCE, and FCK Editor, but I am in search of an HTML/JavaScript component that functions similarly to a TEXTAREA with built-in code syntax highlighting. ...

javascripthtmlsyntax-highlighting

Tips for hiding the calendar icon once a form has been submitted

Below is the HTML code snippet for the date field. <asp:TextBox ID="txtExpiryDate" runat="server" Width="80px" MaxLength="10" CssClass="fromDate" /> And here is the HTML code snippet for the Submit button. <asp:Button ID="cmdSubmit" runat=" ...

javascriptjqueryhtmlasp.netvb.net

Tips for incorporating form validation into a modal in ASP.NET MVC

My task involves designing a form within a modal window with one mandatory field. The user should be able to submit the form only after filling out the required field; if left empty, an error message must display. What is the best approach to implement t ...

c#jqueryasp.net-mvcasp.net-corevalidation

<a> slightly off-centered horizontal alignment

I've been trying to center a link using different methods like text-align:center and display:inline-block, but it seems to be slightly off-center. I've attached images along with my code below for reference. Any assistance would be greatly apprec ...

htmlcenteringcsstext-alignment

Struggling to display the preloader animation while waiting for the render.com server to start up (using the free tier web service)

My choice for deploying dynamic websites is render.com and I am currently using their free tier. The issue with this free service is that Render spins down the web service after 15 minutes of inactivity, resulting in a delay when it needs to spin back up u ...

javascriptjquerypreloaderrender.com

Looking to target an element using a cssSelector. What is the best way to achieve this?

Below are the CSS Selector codes I am using: driver.findElement(By.cssSelector("button[class='btn-link'][data-sugg-technik='append_numbers']")).click(); driver.findElement(By.cssSelector("button[class='btn-link'][data-sugg- ...

javascriptjquerycssselenium

The button must be programmed to remove a specific item from the server

I am currently developing an application to monitor my expenses using javascript, nodejs, express, and handlebars as the templating engine. Within the app, I have a "list" div that displays all of my expenses. (There is an add button next to the list, not ...

javascripthtmlnode.jsexpressexpress-handlebars