Can you help me with setting up a CSS background image that remains fixed and adjusts to any screen size, regardless of monitor or browser resolution? Here is the image I would like to use:
I want this image to act as a static foreground while other images behind it move as the user scrolls, creating a cool overlay effect. Any suggestions on how to achieve this?
If you want to stretch an image to fit the width of any screen while maintaining its proportional height, there are a few ways to achieve that. Here is one way to do it using CSS. The top and bottom of the image will be filled in by padding divs:
`
.bg{
margin: 0;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
display:flex;
flex-direction: column;
}
.img {
width:100vw;
align-self: center;
height: auto;
}
.padding {
flex: 1;
background-color: pink; //MAKE THIS THE COLOR OF YOUR IMAGE
}
.content {
height: 300vh;
background: linear-gradient(0deg, rgba(2,0,36,1) 0%, rgba(9,9,121,1) 35%, rgba(0,212,255,1) 100%);
}<div class="bg">
<div class='padding'></div>
<img class='img' src="https://photos-3.dropbox.com/t/2/AACmD9Oh8XyU7XsuoMbGiFvhR74Kyf2mmCrvJnHqoPIyQA/12/548079133/png/32x32/3/1528948800/0/2/ygb-t.png/EJK827EEGEYgAigC/X_nlbu7xSKtG1OsirOK65Kyxjviska-5QQCExTwpanM%2ChhX24rQp1YsmgIno_q-Sb66Y78jGxhYf_ZswlAPtHwI?dl=0&preserve_transparency=1&size=1600x1200&size_mode=3">
<div class='padding'></div>
</div>
<div class="content"></div>`
If you're not too bothered with messy code and inline styling, here's a possible solution to achieve what you're looking for. Instead of setting colors, you can set the background of each div to the image you desire.
<body style="height: 200vh;">
<div class="1" style="height: 20vh;
background-color: red;"></div>
<div class="1" style="height: 20vh;
background-color: red;"></div>
<div class="1" style="height: 20vh;
background-color: red;"></div>
<div class="1" style="height: 20vh;
background-color: green;"></div>
<div class="1" style="height: 20vh;
background-color: blue;"></div>
<div class="1" style="height: 20vh;
background-color: yellow;"></div>
<div class="1" style="height: 20vh;
background-color: orange;"></div>
<div class="1" style="height: 20vh;
background-color: purple;"></div>
<div class="container">
<img class="stay" src="https://photos-3.dropbox.com/t/2/AACmD9Oh8XyU7XsuoMbGiFvhR74Kyf2mmCrvJnHqoPIyQA/12/548079133/png/32x32/3/1528948800/0/2/ygb-t.png/EJK827EEGEYgAigC/X_nlbu7xSKtG1OsirOK65Kyxjviska-5QQCExTwpanM%2ChhX24rQp1YsmgIno_q-Sb66Y78jGxhYf_ZswlAPtHwI?dl=0&preserve_transparency=1&size=1600x1200&size_mode=3" style="vertical-align: middle;
border-style: none;
width: 100vw;
height: 100vh;
position: fixed;
left: 0;
top: 0;">
</div>
</body>Utilize an image with partial transparency (such as in your illustration, likely in png format) and position it centrally within a container that is set to position: fixed and covers the entire window size, as shown below:
.container {
position: fixed;
width: 100vw;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
The remaining content (like your moving background images) should be placed outside of this container.
ADDITION:
To adapt the image size based on the window size, assign a percentage-based size like this:
.container img {
width: 60%;
height: auto;
}
Example: https://codepen.io/anon/pen/mKwZVV (demonstrating text instead of background images as a substitute for a partially transparent placeholder image)
Our main source page will be index.html, while Employees.html is where our results end up. An error occurred: TypeError - Cannot read property 'ss' of undefined Error in the code: let rating = req.body.ss; Seeking assistance please >< C ...
Currently, I have been developing a template for a database-driven page that is supposed to contain four divs for content arranged like this: ----- ----- | 1 | | 2 | ----- ----- ----- ----- | 3 | | 4 | ----- ----- The information in each box will always ...
Two things are on my mind: 1. I'm trying to set up my project's URL as 127.0.0.1:8080/param=id, but I've been unsuccessful so far despite attempting the following: app.get('/param=id', function(req, res) { console.log(req.param ...
I am faced with a situation where I have a collection of categories and a separate collection of places, with each place having a foreign key that corresponds to a category ID. You can find the list of categories in categorie.json: http://pastebin.com/ttu ...
I am working on a basic node.js app and I need to retrieve the post body from the user. app.js var express = require('express'); var app = express(); app.use(express.json()); app.post('/api/user', function (req, res) { console.lo ...
I am currently working on Core PHP. Whenever I click on a div, data is retrieved and stored in a variable. I want to check this variable against a database query, and if it matches, all the records will be displayed. Can anyone provide guidance on how to a ...
Currently, I am engaged in long polling (ajax) and have a looping portion of code that is part of an internal messaging system. When a message arrives, a specific area of the page will start blinking to notify the user. If the user checks the message, the ...
This is the navigation bar code: <nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top"> <a class="navbar-brand" href="/teashirt/public/">TeaShirt</a> <button class="navbar-toggler" type="button" data-toggle="colla ...
I am experiencing an issue with the following HTML element that has an onclick() function dynamically attached. When trying to call the function, it throws an error stating that "ST" is not defined. The variable passed as name is something like "ST-123". C ...
How can I remove the intentionally set active class from a list item when other items are clicked, while still keeping it active on page load using routerLinkActive="active" in Angular? I attempted to use ngClass but it did not work as expected. Is there ...
I am facing a challenge with styling my invalid elements in HTML forms. It is simple in Chrome, but Firefox seems not to recognize my :invalid pseudoclass. To see the difference, try opening the following code snippet in both Chrome and Firefox: <html& ...
Attempting to use the lookAt function to make zombies move towards the character has been a challenge. The problem lies in the fact that they are not turning correctly but at odd angles. Here is the code snippet I tried: var pos = new THREE.Vector3(self ...
Currently, I am working on parsing an array in React JS. Here is an example of my array (it can change dynamically): [ "save", "save", "not", "save"] The objective is to create a function that triggers another funct ...
Seeking a solution to prevent a mouseup or touchend event from firing twice. See the complete example below: <!DOCTYPE html> <html> <head> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script& ...
attendedEvents: [{ type: Schema.Types.ObjectId, ref: 'Event' }] ...
Currently, I am developing a Web application and considering integrating JqueryUI and AngularJS into my ASP.NET MVC project. Is this the best decision for my project? Are there any recommended Databinding libraries that can be used with JQuery UI? Please ...
export class AppComponent { title = 'shopping-cart'; ngOnInit() { } images = [ { title: 'At the beach', url: 'https://images.unsplash.com/photo-1507525428034-b723cf961d3e?ixlib=rb-4.0.3&ixid=MnwxMjA ...
I am facing an issue with the function fetchJSONData() that I created. It is supposed to retrieve a JavaScript object from a given URL and log the output correctly. However, when I attempt to access a property from the returned object, it displays as undef ...
I have a scenario with two input text fields and a save button. <input type="text" id="myInput" /> <input type="text" id="searchResult"/> <button id="myButton>save</button> The myInput t ...
While working on my NextJs project, I attempted to integrate Vercel Speed Insight import { SpeedInsights } from "@vercel/speed-insights/next" <SpeedInsights /> An error related to hydration is being returned. I am looking for an explana ...