Using multiple background images in CSS on mobile devices

I decided to experiment with creating a grid pattern using css background-images in this way:

.grid {
    width:720px;
    height:720px;

    background-color: #333333;

    background-image: linear-gradient(rgba(255,255,255,0.1), 1px, transparent 1px),
                      linear-gradient(rgba(255,255,255,0.5), 1px, transparent 1px),
                      linear-gradient(90deg, rgba(255,255,255,0.1), 1px, transparent 1px),
                      linear-gradient(90deg, rgba(255,255,255,0.5), 1px, transparent 1px);

    background-size: 40px 40px,
                     240px 240px,
                     40px 40px,
                     240px 240px;
}

https://jsfiddle.net/nicholasstephan/47zyx3pq/1/

However, to my surprise, although it works perfectly on most desktop browsers, the grid isn't displaying in either Safari or Chrome on iOS. What could be causing this issue?

Thanks.

ioscssbackground-image

Answer №1

Firstly, there is a minor syntax error in your code snippet:

linear-gradient(rgba(255,255,255,0.1), 1px, transparent 1px)

The correct syntax should be:

linear-gradient(rgba(255,255,255,0.1) 1px, transparent 1px)

Additionally, when setting the visible part of the gradient to 1px on a high-resolution display like a retina screen, it can lead to issues if the viewport is not properly adjusted to prevent zooming or rescaling. Have you considered increasing this value to 2px or even larger to ensure optimal display?

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

Text alignment and block dimensions

I attempted to organize three buttons within a block. <link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.0.3/tailwind.min.css" rel="stylesheet"/> <div class="grid grid-cols-1 md:grid-cols-3 text-center place-content-center"> ...

htmlcsstailwind-css

Achieve a stylish layout by displaying three cards per row using Vue.js and Bootstrap 4

I'm facing an issue with my code where I am trying to display Bootstrap cards in rows of three, but the layout is not rendering correctly. It starts with one card, then two, and eventually adds a new column, resulting in some empty spaces with offsets ...

csstwitter-bootstrapvue.jsvuejs2bootstrap-4

Is there a way to adjust the padding of html and body elements to 0 in Vue.js without interfering with the styling of bootstrap

In my Vuejs project, I am designing a bootstrap navbar that has left and right margin spacing, even though I have not added any body or html padding. When I navigate to the welcome.blade.php file and set the body and html padding to 0 as shown below: *{ ...

htmlcssvue.jspadding

Navigating on Blogger can be a tricky task when it comes to searching and

I recently added a Table to my blogger post, along with an input form for readers to easily search data. After finding the code on W3Schools (link here), I implemented it successfully. However, I am looking to make some improvements. Here is my question: ...

javascripthtmlcssblogger

Enhancing Firebase push notifications with multilingual support

Looking to localize the push notifications I receive on my Android/iOS device using Firebase notifications. There's an option in the console to filter language, but I can't find any documentation on how to use it effectively. I have two main ques ...

androidiosfirebasenotificationsfirebase-cloud-messaging

The onchange function in JavaScript is malfunctioning

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Product page</title> <!-- Fonts -- ...

javascripthtmlcss

Choosing descendant elements in CSS styling

Is there a way to select child elements in sequence? For instance: <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li> ...

htmlcss

The challenge of overlapping elements in jQuery UI resizable

Encountering an issue with the resizable class in jQuery UI (http://jqueryui.com/resizable/). When resizing begins, all divs below move to overlap with the resizing div. Upon inspecting the js console in chrome, it appears that resizable applies inline sty ...

javascripthtmlcssjquery-uijquery-ui-resizable

Adjust the svg rate using jQuery or JavaScript

Seeking help with a gauge I found on CodePen - struggling to adjust bubble values... <path id="Fill-13" fill="#F8B50F" d="M3.7 88.532h26.535v-#.795H3.7z"/> Can change the bars in JS, but not the bubbles using jq/js. Adjust the gauge with values be ...

javascriptjqueryhtmlcsssvg

Can Labels Be Added Dynamically in iOS?

Currently, I am developing a feature similar to a canvas where users can add draggable labels onto a view and resize them as needed. My query for you is: What method do you believe is the most effective way to dynamically load these labels programmaticall ...

iosuiviewuilabel

What is the process for validating the CSS background-image URL using Javascript?

The concept here is to verify the URL of the CSS element's id (.boot). If the URL matches, which it does, then it should display "hello world." However, despite everything seeming correct, the expected behavior is not occurring, and the reason behind ...

javascriptcssif-statementbackground-image

What is the most efficient method for updating URLs in CSS files before the website goes live?

The project I am currently working on has been worked on by various coders with different backgrounds. One of my recent achievements was writing a clean Capistrano recipe to minimize CSS and JS files. Now, the challenge ahead is figuring out how to identif ...

cssregexbashcapistranoweb-deployment

Tips for effectively documenting CSS on a extensive website

Our website is quite extensive, with numerous pages. As we've added more pages, the amount of HTML and CSS has also increased. We're wondering if there's an efficient way to document all of this information. For example, how can we easily de ...

htmlcss

Tips for utilizing fontawesome effectively in a select menu

I'm having trouble displaying fontawesome icons in a select element, as they do not appear correctly in the drop-down list. .FontAwesomeSelect { font-family: Font Awesome\ 5 Free; font-size: 18px; } <link href="https://use.fontaw ...

cssfont-awesomefont-awesome-5

Modifying the appearance of scoped child components in Vue: A step-by-step guide

I am currently using vant ui components in my Vue project, such as buttons. I would like to make some minor style adjustments, like changing the color and border, but I am unsure how to do it. Can anybody please assist me in solving this issue? Thank you i ...

cssvue.jscomponentsstylesvantui

The loader image does not appear on mobile screens during an AJAX call, but it functions correctly on desktop screens

While I have successfully implemented a loader (.gif) using a div tag in an AJAX call for desktop screens, the same code is not functioning properly on mobile devices. Instead of displaying the loading animation, it simply shows a white screen. <div ...

javascriptjqueryhtmlcssajax

Is there a JavaScript toolkit specifically designed for animating mobile devices?

Currently in search of a JavaScript Library that is similar to impress.js, allowing me to create dynamic animations on text content that are compatible with iOS/Android. Although Hype by Tumult seems promising, I am not interested in an editor but rather ...

animationmobilecssjavascript

Guide to setting up a custom js file in Laravel admin template

Currently working with Laravel 5.8 and utilizing the laravel-admin Template for administrative purposes. There are times when I require custom JavaScript and CSS files specifically for certain admin controllers. How can I include these JS and CSS in lara ...

javascriptcsslaravel-5laravel-admin

Rename multiple files in bulk

With 10000 files consisting of php, html, css, and png formats that are interconnected to operate the website's engine, I am looking for a way to perform bulk renaming in order to ensure proper functionality. Not only do I need to rename the actual fi ...

javascriptphphtmlcss

Converting a string to XML in iOS can be achieved through Objective-C and Xcode 7.2. Here's how you can

Is there a way to convert a NSString variable that contains XML codes into proper XML format? The XML request is as follows: <?xml version="1.0" encoding="UTF-8"?> <soapenv:Envelope xmlns:soapenv="http://schemas.xmlsoap.org/soap/envelope/" xmln ...

iosobjective-cxmlxcode