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

The combination of HTML Agility Pack and VB.NET is a powerful duo for web

While there are numerous examples available for other programming languages, I am curious to know if there are any specifically for vb.net. Can anyone provide some relevant examples? ...

htmlvb.netparsinghtml-agility-pack

Div elements containing identical content and styled in the same manner exhibit distinct dashed borders

After designing a pen with a unique twist, you'll notice that the first div has a border-bottom, while the second has a border-top. What's interesting is that the border on the second div is not the same as the first. Visit this link to see for ...

htmlcssfirefox

Hide the Modal Content using JavaScript initially, and only reveal it once the Onclick Button is activated. Upon clicking the button, the Modal should then be displayed to

While trying to complete this assignment, I initially attempted to search for JavaScript code that would work. Unfortunately, my first submission resulted in messing up the bootstrap code provided by the professors. They specifically requested us to use Ja ...

javascripthtmlcssbootstrap-4

If either the form is invalid or has been submitted, disable the button

Is there a way to either disable the button when the form is invalid or after the user clicks it, but not both at the same time? How can I incorporate two statements inside the quotes for this purpose? I attempted the following code, but it didn't w ...

htmlangularionic4

There seems to be a glitch with certain div elements not behaving as expected in Bootstrap version

I've been struggling with a persistent question lately that seems like it should have a simple solution, but I just can't seem to figure it out. The issue I'm facing is related to Chrome and how certain divs on this particular page behave ...

htmlcssresponsive-designtwitter-bootstrap-3

What is the best way to implement a scrollbar in a specific div rather than the entire window?

Hey everyone! So, I have this window in electronJS with a div where I'm dynamically adding elements using Javascript and the function --> document.createElement('section'). Here's the loop in Javascript to add these elements: for (var ...

javascripthtmlcss

Can someone tell me where I can locate the CSS file once I've finished using Scene Builder?

Currently, I am working on my database project using Scene Builder. I have applied some CSS styling and would like to locate the CSS file in order to attach it to my IntelliJ project for further code editing. Can anyone guide me on where to find the CSS ...

cssjavafxscenebuilder

I'm having trouble figuring out how to perfectly center this div on all types of devices

As someone who is new to css, I have been struggling to center these divs in the middle of the page across all devices despite searching extensively online and trying various solutions without any success. Check out my code below: Snippet: :after, :be ...

htmlcss

The side menu in Bootstrap dropdown experiences a one-time functionality

When navigating through a responsive top menu with Bootstrap, everything works seamlessly - from toggling the menu to dropdown functionality. However, I encountered an issue with the side menu as nav-pills used to select tab-panes. <div class="containe ...

javascriptjqueryhtmlcsstwitter-bootstrap

Having trouble with Python Selenium CSS Selector? If your element is not visible, it

My goal is to search for all hyperlinks on a webpage that contain an XML download link and download them in a continuous loop. When I click on these hyperlinks, a form pops up that needs to be completed before I can proceed with the download. However, I ...

pythoncssseleniumwebdrivervisibility

Deactivate multiple textareas within a loop by utilizing JQuery/Typescript and KnockoutJS

I am working on a for loop that generates a series of textareas with unique ids using KO data-binding, but they all share the same name. My goal is to utilize Jquery to determine if all the textareas in the list are empty. If they are, I want to disable al ...

jquerytypescriptinputknockout.jsdisable

An error message is displayed when attempting to retrieve a json response

After implementing my flask app, I noticed that the following code snippet is being returned: return json.dumps({'status': 'OK','url': 'www.blahg.com'}) Upon inspecting my javascript code, I found it to be structur ...

javascriptjqueryjsonajax

problems arising from the alignment of floating divs

I am struggling with aligning the image "logo.jpg" in a left-floated div. How can I center it both vertically and horizontally within the code below? Thank you. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtm ...

css

Proper way to effectively remove a previously attached handler in jQuery

One way to remove a previously added event handler is by using the following code snippet: var func = function() { $('body').append('<div>' + this.a + '</div>'); }, a1 = $.proxy(func, { a: 1 }); ...

jquery

Is there a way to place the icon on the right side of the @mui/Chip component?

Currently, I am working with MUI version 5.15.0. I have a component called Chip, and my goal is to display the icon after the label on the right side. I attempted to use the CSS rule - .MuiChip-icon{ order:1 }, but it resulted in too much spacing. Additio ...

cssreactjsmaterial-uisx

managing the placement of tooltipster tooltips for a set of radio buttons

I have successfully set up tooltipster to display my validation messages, but I am facing an issue with one specific case. The problem arises when dealing with a set of radio buttons where selecting "Yes" from the Yes/No options is mandatory. Despite setti ...

jqueryvalidationtooltipster

Preloaded background images are loaded twice

I have a background image that I am preloading and caching, but my code is not reading it from the cache. It keeps loading the image as if it is not cached. Even though I have 8 images in the "imgSrcArray," I have simplified this example by hard coding jus ...

jquerycss

How to Place a Button Halfway Out of an Angular 5 Material Dialog

Is there a way to place a close button on the top right corner of a dialog box, partially inside and outside the dialog like shown in this image: I attempted using absolute positioning to achieve this, but that solution is not ideal. I want to position t ...

cssangularangular-material

Storing user input in an existing text file using ASP.NET MVC

What steps should I take to store user form input from a view into an already existing text file using the ASP.NET MVC framework? ...

c#htmlasp.net-mvc-4

Discover the method to retrieve the month name from an HTML Date input value

Here we have a date input field <input id="customer-date" name="customer-date" type="date" required> Accompanied by this script const customerDate = document.getElementById('customer-date').value; const dateHandler = document.getElementB ...

javascripthtmldate