Can you use one image (PNG or SVG) as the background for multiple divs? Take a look at the images below to see how it could work. And if the screen width gets smaller and the divs stack up vertically, is there a way to change the background accordingly?
DIVs without background:
The background:
DIVs with background:
To achieve the desired effect, simply use background-attachment: fixed. Ensure that your background image fits within the boundaries of the div to prevent tiling. You can disable tiling by using background-repeat: none
.border {
border: 1px solid #000;
position: absolute;
}
div {
background-image: url("https://dummyimage.com/500x250/000/fff.png");
background-attachment: fixed;
}<div id="div1" class="border" style="height:100px;width:200px"></div>
<div id="div2" class="border" style="left:225px;height:100px;width:200px"></div>
<div id="div3" class="border" style="top: 125px;height:100px;width:225px"></div>
<div id="div4" class="border" style="left:250px;top:125px;height:100px;width:175px"></div>If you're searching for information on how to use background-attachment: fixed, then here's what you need:
The background-attachment CSS property controls whether a background image remains fixed within the viewport or moves with its container as it scrolls.
.container {
background-color: gray;
}
.window {
background-image: url("https://i.sstatic.net/RPBBs.jpg");
background-attachment: fixed;
display: inline-block;
}<div class="container">
<div class="window" style="width: 100px; height: 50px; margin: 20px;"></div>
<div class="window" style="width: 200px; height: 50px; margin: 20px;"></div>
<div class="window" style="width: 500px; height: 50px; margin: 20px;"></div>
</div>Hey there! I'm fairly new to HTML and CSS, but I believe we can work on this together!
Your complete picture could be encompassed within a div that includes other window elements, with each window positioned in relation to the parent div.
.whole{
position:relative;
}
.UpperL{
position: absolute;
height: 25px;
width: 100px;
}
.UpperR{
position:...;
}
.LowerL{
position:...;
}
.LowerR{
position:...;
}<div class="whole" img src="whole picture.png">
<!-- Make sure the whole class includes the background image-->
<div class="UpperL"> Upper Left Window</div>
<div class="UpperR"> Upper Left Window</div>
<div class="LowerL"> Upper Left Window</div>
<div class="LowerR"> Upper Left Window</div>
</div>
The code may not be perfect yet, but the idea behind placing four windows inside a fifth window is to allow the four windows to see through the fifth one;
If your parent div contains the image but appears white (opacity at 100%), the four window elements should be able to see through the opacity of the fifth window by reducing their own opacity to reveal the image.
hmm...
Currently, I am utilizing Vue 3 along with Prettier in VS Code. One issue I am encountering is that when a string is on its own line, it is formatted correctly to my liking. However, the problem arises when my browser in Dev Tools renders strings with extr ...
Is there a proper way to save data on Socket.io per client? I was considering using this approach, but after doing some research, it seems like it may not be the best method: io.on('connection', function(socket) { console.log('socket co ...
Implementing the use of :before to insert an icon font into a div for a CSS3 hover state. I am looking to incorporate a div within the <a> tag in order for both elements to function as links: <a href="#set-4" class="column product hi-icon product ...
Struggling with my React project, I hit a roadblock when trying to import my generalInput file into my App file. The error message stated that the generalInput was declared but never read. Desperate for a solution, I even turned to AI for help, but it too ...
Below is a json string that needs to be converted into a new Json Array: Raw Data: [ ["yrxqBHmPkNhZ60_eab97ebf-c2a3-40a5-972a-91597ad9a4ca_99371", "SUCCEEDED", "2023-08-31T21:59:31.325000+05:30", "2023-08-31T22:13:42.165000+05:30"], ["yrxqBHmPkNhZ ...
What is the best way to prevent the calendar popup from appearing when using a Bootstrap date picker with jQuery? $("#id").val('').attr('disabled',true).trigger("liszt:updated"); I have tried using .prop and it's not working for ...
Let's consider a situation where I have implemented a search function to make an HTTP call. Each call made can have varying durations, and it is crucial for the system to cancel any previous HTTP requests and only await results from the latest call. ...
Just diving into Vue.js and I've got a header html that doesn't include the cdn link for Vue.js. <nav class="navbar navbar-toggleable-md navbar-inverse"> <div class="collapse navbar-collapse" id="navbarSupportedContent"> ...
I am currently in the process of developing my own commenting system because I have found that existing platforms like Disqus do not meet my specific needs. My backend is built using NodeJS and MongoDB, and I need to execute two primary queries on my data ...
Recently, I utilized jQuery's clone method to duplicate and add an HTML table. The rows and cells of the table were added using jQuery. However, despite using clone, it only replicated the headers and CSS, not the appended data. This raises the ques ...
In order to filter records from a jQuery data table, I have utilized the following code. The format for my data table is as follows: var aDataSet = [['1', 'GOld', 'G-110,G-112,G-123', 'G1-001,G1-005,G1-008'], ...
There seems to have been some discussion about this issue before, but I am struggling to find a solution. I want to add css, js, and asset files to my php framework. However, when calling these files, the path must always match the folder structure like t ...
I'm encountering a debugging challenge and would appreciate any assistance from the community. I've been working on my first React app and successfully implemented a Login feature, but after a user logs in, they have to hard refresh their browser ...
io.on('connection',function(socket){ console.log('connected'); socket.on('disconnect',()=>{ console.log('a user disconnected'); }); socket.on('sendMessage',function(data){ const message = data.te ...
I am attempting to encapsulate an <input> within a directive in order to manage date validation, conversion from string to Date object, and keep the Date version in the original scope. The functionality seems to be working as intended. However, the n ...
I am encountering a frustrating issue with my javascript portal-like application (built on JPolite) where modules are loaded using the $.ajax jquery call. However, the initial request fails with a 404 error when a user first opens their browser. The app i ...
I'm working with an element that loops through all the objects using v-for and has a CSS class named top-class{}... I need to dynamically add the top-class to the first object (object[0]) and update it based on changes, removing the old top-class in t ...
After creating an npm link within a local dependency and then deleting that dependency from my hard drive, I am now attempting to remove this npm link. I have attempted the following steps: npm rm --global dependency npm uninstall dependency npm unlink - ...
In my application, I have a single data variable called message, as well as a method in the methods section that performs cryptographic algorithms. Below is the code snippet: export default { data: () => ({ message: "" }), methods: { clic ...
I'm currently developing a nodeJS web application and utilizing JWT for authentication. My code is all written in ES6 modules, so I wanted to import JWT the same way. However, it seems that the package does not fully support this method yet. Since I&a ...