Authentic clear space within a div, showcasing only the background without any text present

My dilemma involves a DIV with a background, text within it, and another FIXED DIV positioned on top of the first DIV with a background. When I apply a color to the FIXED DIV, the text appears behind it. If I don't give a color to the DIV (and want it to be transparent), the text is visible on top. However, if I set the DIV to be transparent, both the background and text are visible.

<div id="transparent"></div> <!-- fixed -->
<div id="content"> <!-- content with background and text -->
  content content content content content content content content content content content content content content content content content content 
</div>

The goal is to have a main background, main text, and a FIXED DIV that only shows the background without any text (without having to apply an additional cropped background image).

This is the desired outcome:

For a visual representation of the current situation, you can check out this link to the jsFiddle: http://jsfiddle.net/9ggvD/

htmlcss

Answer №1

Check out My Fiddle :

http://jsfiddle.net/5ghhR/3/

I made changes to the CSS for the #transparent div:

#transparent
{
    position:absolute;
    background:url('http://example.com/image.jpg') no-repeat top left;
    background-attachment: fixed;
    left:50px;
    top:200px;
    width:350px;
    height:40px;
}

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

What is the best way to reveal a concealed "div" when hovering the mouse over it?

Currently in the process of developing a dropdown menu to house a search engine form within a static menu bar. The desired functionality is for the search form to appear upon hovering over the "search icon." However, it seems that the submenu fails to disp ...

htmlcsshover

Utilize jQuery and AJAX to send a request when an object is loaded

For quite some time now, I've been struggling with a particular issue and despite numerous attempts to find a solution, I still haven't been successful. It seems that the function $("#id").load(function [...]); just won't work for me. Here ...

jqueryajaxhtmlrest

Prevent the page from refreshing when a value is entered

I currently have a table embedded within an HTML form that serves multiple purposes. The first column in the table displays data retrieved from a web server, while the second column allows for modifying the values before submitting them back to the server. ...

javascripthtmlforms

Ways to conceal buttons according to your 'occupation'?

I am currently developing an application and I would like to have certain buttons displayed based on the user's $job. There are four job roles stored in mysql databases: student teacher staff principal, The signup button should only be visible to te ...

javascriptphphtml

Having trouble getting my soundboard to work properly on mobile devices

I recently created a soundboard using HTML5, CSS3, and JavaScript. While the audio plays back perfectly on my computer when I click the buttons, I encounter an issue when trying to use it on a smartphone. <!DOCTYPE html> <html lang="en"> <h ...

javascripthtmlcssmobile

The Bootstrap Carousel cannot be manually manipulated to switch images

I've run into an issue while trying to integrate a Bootstrap carousel gallery on my webpage. Although the photos automatically change after a few seconds, I am unable to manually switch them using the control buttons. Even after including Jquery, Po ...

htmlcarouselbootstrap-5

Is it possible to access a comprehensive list of all the elements that are currently available?

Is there a way to retrieve all HTML tag names that are supported by the browser for my web application? I want it to be displayed like this: console.log(getAllElements()) //[a, abbr, acronym, address, applet, area, base, ...] ...

javascripthtmldom

Trouble with DevExpress ASPxButton: Some Properties Fail to Update

It's been a while and I'm facing a tough challenge. I need to change the image source of an ASPxButton from the code behind, but it seems like the height, width, and border style are getting lost in the process (resulting in an image with its own ...

csswinformsdevexpressaspxgridview

Tips for creating a responsive background image that adjusts after resizing the window to a certain width

Is there a way to create a responsive background-image that adjusts when the window is resized to a specific width, similar to the main image on ? ...

javascriptjquerycsshtmlresponsive-design

Tips on creating a css selector that targets an element depending on its content

Here is some example HTML code: <tbody> <tr class="cart-item"> <td class="image"> <a href="listing_page/PR1"></a> </td> <th scope="row" class="info"> ... </th> <td class="price"> ...

htmlcss

Should the window be closed, start a new function

Is there a way to trigger a function when a browser tab is closed (including using alt + f4) using JavaScript? ...

javascriptjqueryhtml

Vue Checkboxes - Maintain selection unless a different checkbox is selected

I have implemented a checkbox system with radio button behavior, but I am facing an issue where I want to keep the checkbox checked until another checkbox is selected (which will then uncheck the first one). I do not want the ability to deselect the checkb ...

javascripthtmlvue.js

Prevent users from inputting multiple minus signs by setting the input type to number and disabling the

Is there a way to prevent the input type number from accepting "--" as input? I am looking for a solution to disable this behavior. Additionally, the input field seems to allow for various incorrect formats like: -12-12 -- -121- 23-323- ...

htmlreactjs

Is It Possible for an HTML Page to Load Within an iframe?

Recently, I embedded an iframe link from a game hosted on Scirra onto my website. However, I noticed that the page automatically scrolls down to where the iframe is positioned once opened, which is quite annoying. Does anyone know how to resolve this iss ...

htmlcssiframeposition

Stylish progress bar using CSS animations

I am trying to make the progress bar expand from 0% width to 50% width in a span of 2 seconds. Here is the code I have written: <style> #progressbar { background-color: #000000; border-radius: 8px; padding: 3px; width: 40 ...

htmlcss

When using React JSX, the style attribute does not recognize the object-fit property for images

When working with bootstrap cards, I encountered the need to make all images within the cards the same size. While there are various ways to achieve this, I used the following styling approach: Take a look at the image style below <div className=" ...

cssreactjstwitter-bootstrapjsxbootstrap-5

Scroll overflow can be hidden

I'm working on a project with a div containing scrollable content, but I'm struggling to get the header to overflow its parent element. It seems that using overflow: scroll is causing the element to have overflow: hidden as well. Any assistance ...

htmlcssoverflow

Detecting changes in checkbox states

In my current scenario, I have a section of the screen that can be shown or hidden depending on whether a checkbox is checked. The user can change the state of the checkbox manually or programmatically. The challenge lies in detecting this change and upda ...

javascriptjqueryhtml

Other browsers, such as Chrome and Firefox, are visible, except for Safari

https://testing007.s3-api.us-geo.objectstorage.softlayer.net/1A23CDC6F75811E6BFD706E21CB7534C---prof__6.jpg This link displays correctly on browsers like Chrome and Firefox, but does not show up on Safari. ...

jqueryhtmlangularjs

Replacing HTML text with JSON data can be easily achieved by using JavaScript

After receiving data from an API and converting it into JSON format, I encountered difficulty when attempting to change a selected element in HTML. Every time I tried to do so, I either got 'undefined' or 'Object Object' as the output. ...

javascripthtmljson