Background Patterns on Webpages

My website has a lovely gradient background on the html tag in css, while the body tag showcases a seamless pattern repeating on both the x and y axes.

Everything was looking great until I checked the website on an iPad/iPhone in portrait mode, where the screen height is much taller than its width.

Normally, on standard screens or in landscape mode on mobile devices, the footer of my page would mark the end of the website. However, when the screen's height exceeds its width, the seamless pattern stops repeating, leaving an empty space with the gradient background after the footer.

I've attempted to set both html and body heights to 100%, but it doesn't seem to solve the issue. Even trying to use JavaScript to dynamically adjust the body's height to match the html's height proved unsuccessful.

If anyone has any advice or solutions for me, I would greatly appreciate it! Thanks in advance!

EDIT:

Check out this JSFiddle.

In the JSFiddle, the background gradient in the html repeats as expected, whereas the white background color in the body does not. I understand that setting the body's height to 100% would likely resolve this issue, but I'm showcasing what happens on a mobile device even with the body at full height.

javascriptjqueryhtmlcssweb

Answer №1

To experience the updated appearance, implement the following adjustments and explore the jsfiddle demo:

body { background-color: #FFF; } /*exclude this*/

html{
    height: 100%;
}
body {
    height: 100%;
    background: #4c4c4c; /* Earlier versions */
    background: -webkit-gradient(linear, 0 0, 0 100%, from(#4c4c4c), color-stop(0.54, #595959), to(#131313));
    background: -webkit-linear-gradient(#4c4c4c 0%, #595959 54%, #131313 100%);
    background: -moz-linear-gradient(#4c4c4c 0%, #595959 54%, #131313 100%);
    background: -o-linear-gradient(#4c4c4c 0%, #595959 54%, #131313 100%);
    background: linear-gradient(#4c4c4c 0%, #595959 54%, #131313 100%); /* FF3.6+ */ /*         Chrome,Safari4+ */ /* Chrome10+,Safari5.1+ */ /* Opera 11.10+ */ /* IE10+ */ /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4c4c4c',             endColorstr='#131313',GradientType=0 ); /* IE6-9 */
}

View Demo: http://jsfiddle.net/EaGAV/

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

Chrome is blocking my ajax cross-origin request, causing it to be cancelled

I have been working on a Google Chrome extension and encountering an issue with my ajax requests. Every time my extension sends a request, it ends up getting cancelled for some unknown reason. The following code snippet seems to be functioning properly: ...

javascriptjqueryajaxgoogle-chrome

What is the best way to retrieve the response from an AJAX request that is triggered by clicking on a link?

I need to trigger an ajax POST request by clicking on a specific link. This is how I'm currently doing it: $('a#create_object').click(); Although this works, the actual code for making the ajax call ($.ajax({...})) is happening within the ...

ruby-on-railsajaxjquery

Issues concerning the customization of error messages in forms are arising

Summing it up, upon form submission, error messages appear beneath each input field with invalid values. Utilizing Zend_Form results in the following markup: <form enctype="application/x-www-form-urlencoded" method="post" action="/auth/register">< ...

htmlcss

Retrieve information from arrays within objects in a nested structure

I am working with structured data that looks like the example below: const arr = [{ id: 0, name: 'Biomes', icon: 'mdi-image-filter-hdr', isParent: true, children: [{ id: 1, name: 'Redwood forest& ...

javascriptvue.jsecmascript-6

Error: Unable to locate module: 'material-ui/styles/colors'

I encountered an issue with the code below, as it failed to compile: import React from 'react'; import { AppBar, Toolbar } from 'material-ui'; import { Typography } from 'material-ui'; import { MuiThemeProvider, createMuiThem ...

javascriptreactjsmaterial-ui

How can I extract text within a specific HTML tag using Selenium?

On my second day of learning Selenium, I am looking to extract text from within specific HTML tags. Here is a sample of the HTML code: <div id="media-buttons" class="hide-if-no-js"/> <textarea id="DescpRaw" class="ckeditor" name=" ...

javascriptselenium

The absence of defined exports in TypeScript has presented a challenge, despite attempting various improvement methods

I've exhausted all available resources on the web regarding the TypeScript export issues, but none seem to resolve the problem. Watching a tutorial on YouTube, the presenter faced no such obstacles as I am encountering now. After updating the tsconf ...

javascriptnode.jstypescript

AngularJS Error: $element.find(...) does not support iteration

I'm attempting to utilize a datatable in my AngularJS application. Below is the HTML code I've implemented: <div ng-app="datatable"> <div ng-controller="voucherlistcontroller"> ...

javascriptangularjsspring-bootdatatables

Error code 12030: AJAX request status

When making an ajax XMLHttpRequest using the POST method, I am encountering a readyState of 4 with a status of 12030. It is known that 12030 is a Microsoft-specific state code indicating that the connection was not sustained. However, I have been unable to ...

javascriptajaxxmlhttprequesthttp-status-codes

What is the process for transferring a JavaScript file (containing multiple functions) from the server to the client side?

I am looking for a way to hide the server-side functionality from the end user in order to maintain privacy. I have not been able to find a solution for this issue thus far. Currently, I have a .js file containing functions that are used within an html5 f ...

javascriptjquerynode.jshtml

site with scrolling options in various directions

Someone recently asked me if I could create a multi-directional scrolling website similar to the one found at COS, but using WordPress. At first, I assumed it might be done with Flash, but the source code suggests it could actually be more simple, possibly ...

jqueryhtmlcsswordpressscroll

Using Bootstrap's card component, design a grid layout for your website

I am attempting to construct a grid using the Bootstrap 4 card component. After reviewing the documentation and utilizing the card-deck feature, I aim to have each row consist of two columns with the behavior similar to col-12 col-md-6. Additionally, the s ...

htmlcssbootstrap-4

Convert HTML form input into a JSON file for safekeeping

<div class="email"> <section class="subscribe"> <div class="subscribe-pitch"> </div> <form action="#" method="post" class="subscribe-form" id="emails_form"> <input type="email" class="subscribe-input" placeholder="Enter ema ...

javascriptjqueryhtmlcssjson

Keep a vigilant eye on the peak utilization of memory within the Node.js process

I am in search of a way to effectively monitor the maximum memory usage in a Node.js process, regardless of whether there are memory leaks or not. The processes in question include both real applications and synthetic tests. My expectation is that it sho ...

javascriptnode.jsprofiling

Struggling with resolving the error message "EEXIST: file already exists, mkdir 'C:UsersOKRDesktopMeetUp' after the apk generation failed in React Native? Learn how to troubleshoot this

Currently, I am in the process of testing my React Native apk app file. These are the steps I followed before generating the apk: react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/app/src/main/assets/index.a ...

javascriptandroidreactjsreact-nativeapk

How can we set up Node JS to automatically trigger events when a specific future date and time from the database is reached?

I have taken on the challenge of providing users with a feature where they can select a date and time in the near future while placing an order. This chosen time and date will be saved in the database. How can I set up a function to automatically execute ...

javascriptnode.jsreactjsmongodbtriggers

Steps to display a single entry in a Laravel/Vue implementation

My goal is to combine Laravel with Vue and eventually Nuxt in order to incorporate dynamic page transitions similar to the ones showcased on into my websites. I recently followed a tutorial on using Vue with Laravel at https://scotch.io/tutorials/build-a ...

javascriptphplaravelvue.jsvuejs2

Can diverse array elements be divided into separate arrays based on their object type in JavaScript?

Looking to create new arrays based on objects with similar attributes from an existing array? Here's how: Starting with this [ {name: "test", place: "country"}, {name: "walkAndEat", Long: 100, Lat: 15, Location: "place name"}, {name: "te ...

javascriptarraysangularjsmean

Using Flexbox to align content in a column with space between items

Is there a way to move the read more button to the bottom of the card using flexbox in a column layout? The top section, middle paragraph, and see more button are each contained within their own div inside the parent card div. https://i.stack.imgur.com/NG ...

cssflexboxtailwind-css

Using the async.waterfall function in an Express application

Query: I'm encountering an issue with my express.js code where, upon running in Node.js, an empty array (ganttresult) is initially displayed. Only after refreshing the browser do I obtain the desired result. To address this problem, I have attempted ...

javascriptnode.jsexpressnode-async