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: https://i.sstatic.net/E8uld.jpg
The background: https://i.sstatic.net/qYwvA.jpg
DIVs with background: https://i.sstatic.net/RPBBs.jpg
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...
This form is structured similar to Bootstrap: HTML: <div class="container"> <div class="row"> <div class="form-group row-group"> <label class="col-6">First name</label> <input class="col-6" type="text" v ...
Want to learn how to create a background like this using CSS? Check out this link for inspiration! ...
My project has only a few npm dependencies, but the build process is taking longer than 30 minutes and still counting. I'm not sure if this is normal or if there's an issue causing the delay. I have two specific questions: Is it common for pro ...
Imagine you have two React components, A and B. As component A is displayed on the page, the user makes changes that affect some of the states within A. The user then clicks a button to navigate to component B using router.push('/b'). Subsequentl ...
I am developing a Ruby web application and using JQuery and AJAX to send/receive data. However, I am facing an issue where pressing the enter key does not submit the form. What should I do to ensure that my form submits successfully? Within my Foundation ...
I'm looking for assistance with implementing add/remove functionality for both top-level and sublists, which should result in a serialized output. Can anyone provide guidance on how to achieve this? For example: Add Question Question 1 | Delete An ...
Hey everyone, I'm struggling with running mysql queries repeatedly in my Node.js application. I need to shape the second query based on the results of the first one. The code example I have below is not working as expected. Can anyone provide guidance ...
var today = new Date(); var dd = today.getDate(); var mm = today.getMonth() + 1; //January is 0! var yyyy = today.getFullYear(); var currentdate = yyyy + ',' + mm + ',' + dd; var appointmentDate = moment($scope.AppointmentsList[i].J).f ...
At present, the checkboxes in my application are quite basic with labels. However, our app designer has requested that we revamp this feature and make it more appealing by using clickable images that still function like checkboxes. Allow me to provide an ...
I'm encountering some difficulties when trying to create a route that allows me to respond to comments (.../comments/:_id/reply) and publish the related post. Below is the code snippet: Publications Meteor.publish('commentUser', function(c ...
After searching various resources for solutions to my issue, I stumbled upon this helpful and . Both of these links provided valuable insights. The issue I'm facing is that one of my templates is loading twice - first with the collection undefined, ...
Whenever I go on indeed.com using the firefox web driver in Marionette mode, I keep encountering an hCaptcha popup. In an attempt to avoid this, I experimented with a user script that alters the navigator.webdriver getter to return false right at the sta ...
I have been developing an express application (server-side) that offers movie information to users, and I am attempting to send a JSON response in the following format: { "title": "Star Trek: First Contact", "year": 1996, ...
I am working on appending attribute parameters to a URL using the following code snippet: this.$router.push({ query: Object.assign({}, this.$route.query, { attributes: this.encodedAttributes() }) }); However, I have noticed that when I call this method fo ...
I'm currently utilizing lazy_high_charts along with foundation 4. Within my view, I have included <%= high_chart("my_id", @chart) %>, which produces the following: <section> <script type="text/javascript"> (function() { ...
Is it possible to style different series on Highcharts based on JSON names? $.each(names, function (i, name) { $.getJSON('https://www.highcharts.com/samples/data/jsonp.php?filename=' + name.toLowerCase() + '-c.json&callback=?' ...
I am relatively new to full stack development and I am currently working on a project to enhance my understanding of frontend development with React JS. While working on this project, I have been using Redux without any issues so far. However, I am facing ...
I have a JSON object that I am manipulating to create a new JSON object. The challenge lies in dynamically constructing a part of the JSON object. Below is the original JSON object: [{"acptFlag":true,"count":14288,"limsFlag":true,"plantId":30,"plantName": ...
In the project I am working on, there is a need to customize a checkbox using FormControlLabel. The requirement is to display the name and code of an item one above another with a reduced font size. Attempts were made to add HTML markup to the label or use ...
Embarking on a tutorial journey to dive into Angular setup. Facing a persistent error in my code... Error: [$injector:undef] http://errors.angularjs.org/1.6.0/$injector/undef?p0=Bear Listing the order of files within the <head> tag in the html ...