Tips for showcasing a full body height background

I'm currently working on a project where I need to display random background images when the body loads. To achieve this, I've created a function. However, I'm facing an issue where the images are filling up the entire page, making it very long. I want them to be displayed only within the height and width of the body. Here's the code snippet I have so far:


var body = document.body;
var html = document.documentElement;
var bodyHeight = Math.floor(Math.min(body.scrollHeight));
var htmlHeight = Math.floor(Math.min(html.scrollHeight));

var height = Math.max(bodyHeight, htmlHeight);

for(i=0; i<height; i++){
    var images = [];

    // Add image URLs to the array here
    
    index = Math.floor(Math.random() * images.length);
    
    document.write(images[index]);
}

Answer №1

To determine the screen height and width, you should create a div inside the body and set the image as the background of the div. Use units 100vh and 100vw to achieve this.

Answer №2

Simply follow these steps

body{
background-image:url('');
background-position:100% 100%;
**background-size:cover;**
width:100%;
background-attachment:fixed;
 }

Make sure to set the background-size property to "cover".

Answer №3

In this context, the body represents the entire page. To specifically target the 'viewport' dimensions, refer to the solution provided in another answer. An alternative method involves utilizing CSS to apply a background image to the html tag as demonstrated below:

        <style>
        html {
            background-image: url('https://images.unsplash.com/photo-1478427433968-28045906c1dd?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&s=f1c8cb36c65c1e472e0ebf9ef6d4eac5');
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
            height: 100%; min-height: 100%;
        }
        </style>

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

External JavaScript files are also subject to the same origin policy

Suppose a website http://www.mysite.com contains an external JavaScript file added like this: <script src="http://www.yoursite.com/new.js"></script> Within the http://www.yoursite.com/new.js JavaScript file, there is an AJAX call to a script ...

Sharing information linked to dynamically generated HTML elements in MVC5

Currently, I am working on developing an MVC5 application. Within a view, I am dynamically creating HTML elements such as textboxes and dropdown lists using a JSON result returned from the server and jQuery. Now, my goal is to submit the selected data IDs ...

Steps to include a Target property in a freshly created MouseEvent

Trying to dispatch a contextMenu event, I've noticed that in the MouseEvent interface for TypeScript, the target property is missing, even though it is documented in the contextMenu documentation. Here's my TypeScript snippet: const emulatedMou ...

Trouble with Bootstrap 3's nav-justified feature not displaying correctly upon window expansion

Looking at this Bootstrap example page, I noticed a small issue with the nav-justified navigation. When the window is minimized, it transitions correctly to a mobile version. However, when the window is maximized again, the buttons remain in the mobile for ...

Why is it that a JSX element can take a method with parentheses or without as its child?

Why is it that when I attempt to pass a method without parentheses into a React component as a child of one of the JSX elements, an error appears in the console? However, simply adding parentheses resolves the issue. What's the deal? For example: ran ...

Is there a way to assign "label 3" with the identical percentage as "label 1" on this particular form?

I'm currently using Bootstrap 4 for my project. I want to adjust "label 3" to have the same width as "label 1," while keeping the input width and the rest of the page intact (as shown in the code). Is this possible to achieve? Thank you. https://i ...

I am currently struggling with the mapquest GeoJson integration within my Node/Express application. I keep encountering an error message that reads "body used already."

I attempted to utilize the mapquest API by following the provided documentation, however I encountered an error message: HttpError: body used already for: Below is my geoCoder.js configuration: const NodeGeocoder = require('node-geocoder'); con ...

I am facing an issue where an AJAX post to Express is not returning any data to req.query. I have tried various solutions but nothing seems to

I have encountered an issue with my setup where the body is empty when sending data through ajax. In Chrome's network tab, I can see the post and content with the correct payload: {"EventName":"asd","PrivacyLevel":1,"TypeInt":1,"ExpectedDate":"asd"," ...

PHP is not receiving any data from the Ajax request

I'm currently attempting to set up my first Ajax example on my MAMP server. Here's how my ajax.html file looks: <html> <head> <script src='ajax.js'></script> </head> <body onload = 'ajax()'> ...

Angular's ngClass directive failed to be applied correctly

I am currently experimenting with the use of [ngClass] in Angular and it appears that it is not being applied as expected. Interestingly, [ngStyle] for similar CSS styles is working without any issues. What could I be doing wrong in this scenario? There ar ...

Utilizing Python and Selenium for Xpath, extracting text from a span tag within a web table

Struggling with this one, I've carefully gone through all previous posts before reaching out for help. The structure of the HTML web table is provided below. I am specifically interested in extracting the date from the span tag, and here are the vari ...

Is it possible to include more details in the document?

Is it possible to include additional metadata, such as a record ID, within a file without causing corruption? I am looking for ways to add extra information to files. Can anyone offer some guidance? Your help would be greatly appreciated. Thank you! ...

What is the best method for displaying a wbmp image on an HTML page?

In my recent HTML file, I included the following code: <!DOCTYPE html> <html> <body> <img src="thieftitle.wbmp" alt="W3Schools.com" width="104" height="142"> </body> </html> t ...

Set a maximum character limit for HTML input forms

Is there a way I can limit user input to more than 5 characters for certain fields like name? Additionally, is it possible to restrict a text input field so that only numbers can be entered (for example, an ID)? <tr> <th>ID:</th> ...

Incorrect Pixel Width with Relative Positioning in Internet Explorer 11

I'm encountering a positioning problem that seems to be specific to Internet Explorer (11). I'm attempting to absolutely position a div tag in relation to another element. The problematic code snippet appears as follows: <div id="FacebookWra ...

Unexpected compatibility issue with Chrome! Same AJAX feature flawlessly executed in Firefox but troubleshooting points to a potential event-related

I'm facing an issue where my script is functioning perfectly on Firefox but not working on Chrome. The script code I am using is as follows, where "r_tour" is the id of the select element and "option" is one of the options: $("#r_tour option").click ...

React DOM's offsetHeight prior to rendering

I am struggling to figure out how to position a React DOM element based on its offsetHeight. The issue is that I cannot determine the offsetHeight of an element that hasn't been created yet (so the height cannot be passed as a parameter to the render ...

Sequentially loading Bootstrap columns as the page loads

Is there a way to load columns one by one with a time gap when the page is loaded? Here's the code snippet that can achieve this: setTimeout(function() { $("#box1").removeClass("noDisplay"); },1000); setTimeout(function() { ...

Toggle visibility of div content when hovering over a link by leveraging the data attribute, with the div initially visible

I have a collection of links: <p><a href="#" class="floorplan initial" data-id="king"><strong>King</strong></a><br> 4 Bedrooms x 2.5 Bathrooms</p> <p><a href="#" class="floorplan" data-id="wood">< ...

Guide on sharing Photo Blogs on Tumblr using the "tumblr.js" NodeJS module

I've been using the tumblr.js node module to interact with the Tumblr API, but I'm having trouble understanding what exactly should be included in the "options" when posting on my blog. So far, I've only used this module to retrieve my follo ...