Our Magento website has a background image that expands according to the content, working well on PCs and Macs. However, the white background does not show up on iOS devices.
I have attached two screenshots - one showing how it appears on a regular PC browser and another displaying how it looks on an iPhone. (refer to next post for the screenshots)
Visit our site here:
And here is a direct link to the image that is not appearing on iOS devices:
Thank you!
The issue at hand is iOS's restriction on the maximum size of images it can handle, typically ranging from 3 to 5 megapixels depending on the specific device. In this case, your image measures 9.78mp (978 x 10000).
There is no valid reason for the background image to be so large. With a file size of 171kb and repeatable after just 10px, trimming off the excess could reduce its height to 10px while achieving the same effect with background-repeat: repeat-y. The top portion of the background can then be applied to a separate element.
Alternatively, the background image could be emulated using CSS properties like box-shadow and a dashed border.
CSS:
.outer {
margin: 20px;
width: 200px;
box-shadow: 0 0 10px 4px rgba(0, 0, 0, 0.3);
padding: 10px;
}
.inner {
height: 200px;
border: 1px dashed #bde432;
}
HTML:
<div class="outer">
<div class="inner"></div>
</div>
I am experiencing an issue with this particular code. I have successfully used getElementById, but when I try to use document.getElementsByClassName("hearts");, it does not work as expected. This is a snippet of my HTML code: status = 1; function change ...
I am facing an issue with a dropdown field that has placeholder text and options to select. Initially, both the placeholder text and the options were in color #333. However, I managed to change the color of the placeholder text to light grey using the foll ...
I have a need to dynamically generate CSS with each request. For example, in my Express.js application, I've set up a route like this: /clients/:clientId/style.css When a matching request is received, I want to retrieve the Client from the reposito ...
I need help moving the language switcher and its items to the right side of the page. I tried using ml-auto but it didn't work for me. Whenever I try to adjust the position with padding-left, all the items end up in the center of the page. Any suggest ...
In one of my JavaScript functions, I have the following CSS line which works well in all browsers except for IE (Internet Explorer). When the page loads, the height of the element is only about 4px. element.setAttribute('style', "height: 15px;") ...
Looking for help customizing the background position in a PSD image to adjust the slope at the top, right-left side, and bottom. Here is my PSD: https://i.stack.imgur.com/Jr4h7.png Below is some of my CSS code: html{ background:#aea99f; } body{ backgroun ...
Here is an example code (SSCCE) that showcases the issue I am facing. The MaterializeCSS frontend framework documentation states: Scrollable Tabs Tabs automatically become scrollable Source However, when I attempt to use more tabs than can fit on the ...
Hi there, I am encountering an issue with the following code snippet: <input type="radio" value="{{commencementDate.value}}" id="bankCommencementDateSelect" formControlName="bankCommencementDate"> <input #commencementDate id="bankCommencementDat ...
Currently, I am working on a project and need to showcase a table from MySQL on an HTML page. The JavaScript function in my code is responsible for this task, but due to the Framework 7 requirement, I must separate the function into a different .js file ra ...
After experimenting with the Static cell option on the storyboard, I've come to realize that UITableViewController can control its own height without any issues. On the other hand, when utilizing Dynamic prototype cells with varying heights, the tabl ...
My input number is as follows: <input type="number" id="quantity" name="quantity" (change)="firstRangePointChanged($event)" > I need to ensure that users cannot input invalid values like --99 (--) instead of ...
I am just starting out in web development Would it be a good idea to utilize position: absolute; for controls? If not, can you explain why? ...
I'm having an issue with my dropdown menu. It keeps sliding up when I try to navigate under the sub menu. I've spent all day trying to fix it, testing out various examples from the internet but so far, no luck. Any help would be greatly apprecia ...
I am currently utilizing Bootstrap 3 for my website, and I have a sentence composed of three parts at a certain point on the page. For example, it might read "Bud Spencer walks with Terence Hill." where X="Bud Spencer", Y="walks with", Z="Terence Hill." T ...
I've been struggling to center the social media icons on my website, but haven't had any luck. Here's the code I've been working with: https://jsfiddle.net/2ahgL130/1/ CSS: .table1{ margin:0; padding:0; min-width:100% } ...
I am relatively new to d3.js and currently working on building a simple application. However, I have encountered a roadblock in my progress. I have a separate JavaScript file named jack.js which generates a pie chart when linked with an HTML page. The Iss ...
Is there a way to retrieve the selected option in this form from the other side when clicking a link? <form (ngSubmit)="onSubmit(x)"> <input type="radio" id="radioset3" name="radioset" [checked]="x==0"> <input type="radio" id="radio ...
I've been grappling with this issue for the past few days and I just can't seem to crack it. Whenever I try adding a class to an AngularJS element directive, the styling appears in the code view of my browser (Chrome), but the styles themselves ...
https://i.sstatic.net/zbCfI.png I'm having trouble creating a text field in Vuetify where the button and height are not behaving as expected. I've attempted to adjust the height multiple times without success. Although I have the necessary CSS, ...
I am currently in the process of designing a website with a layout consisting of a Header, Content, and Footer all set at 100% width. To achieve a background image that fills the screen in the content section, I utilized CSS3 with background-size:cover pr ...