Having trouble with setting an image as a background in CSS for Nativescript on iOS?

In my NativeScript app, I am trying to set an image as the background using the CSS property 

background-image: url("res://ic_more")
. It works perfectly on Android, but unfortunately, it does not display on iOS devices.

I have confirmed that the image is located in the App_Resources/iOS folder. I can even use it in an Image element as indicated by the red arrow here: 

<Image src="res://ic_more"></Image>

Despite this, the issue seems to be rooted in the CSS styling. I have already attempted to fix it by running tns platform clean ios, but to no avail.

If anyone has any insights or solutions, I would greatly appreciate your help.

cssnativescriptnativescript-angular

Answer №1

To achieve a consistent background image in both Android and iOS, use the following code snippet:

<DockLayout stretchLastChild="false">
   <GridLayout rows="*,*" class="page" backgroundImage="~/app/images/home_bg.jpg" backgroundRepeat="no-repeat" backgroundSize="cover" backgroundPosition="center"> 
   </GridLayout>
</DockLayout>

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

Row within a table displaying link-like behavior

Here is the code I'm currently using: $('.table-striped tr').click( function() { var link = $(this).find('a').attr('href'); if(link != 'undefined') { window.location = link; } }).hover( func ...

javascripthtmlcsshyperlinkhtml-table

Interactive pop-up messages created with CSS and JavaScript that appear and fade based on the URL query string

I have a referral form on this page that I want people to use repeatedly. After submitting the form, it reloads the page with the query string ?referralsent=true so users can refer more people through the form. However, I also want to show users a confir ...

javascriptjqueryhtmlcss

Unable to pinpoint the source of the excess spacing within a form field

There appears to be some extra space in the text field of my form, extending beyond the container margin. Please refer to the image and JSFiddle http://jsfiddle.net/GRFX4/. Any thoughts on what might be causing this issue? Thank you. HTML: <div id="co ...

htmlcss

Text reveal animation in Framer Motion is not functioning as expected

I'm having trouble locating the issue in my code, and the text reveal feature isn't working. Interestingly, a simple animation works fine, indicating that there's no problem with the import or library: import { motion } from ...

cssreactjsnext.jsgsapframer-motion

Organize items within a compartment using Bootstrap3

I have decided to update my website to Bootstrap3 and encountered a common issue that many others seem to be facing as well. I am trying to evenly distribute 4 elements, each approximately 220px wide, inside a 990px container. In the old version of Bootstr ...

csstwitter-bootstrapresponsive-designtwitter-bootstrap-3

The offset values of $(element) keep increasing indefinitely when they are updated repeatedly

After researching how to utilize JavaScript drag functionality to move elements, the goal is to dynamically adjust the cursor position within a square when dragged. In an attempt to simplify the process and avoid storing x and y offsets as separate variabl ...

javascripthtmljquerycss

Installing assets automatically in Netbeans for Symfony2

Whenever I test my application, I find myself having to run the following command in Netbeans: assets:install Repeating tasks gets quite tedious... Symfony2 requires running this command to ensure that modified files are placed in the correct location. ...

phphtmlcsssymfonyassets

Implementing smooth transitions on iPad screens with responsive text

I am currently working on a personal project that involves creating images with hover transitions. The transition effect works perfectly on all browsers except for iPads. I'm facing an issue where I can't click on the image due to the presence of ...

htmlcssipadtextcss-transitions

How to Align Text and Image Inside a JavaScript-Generated Div

I am attempting to use JavaScript to generate a div with an image on the left and text that can dynamically switch on the right side. What I envision is something like this: [IMAGE] "text" Currently, my attempt has resulted in the text showing ...

javascripthtmlcss

Position the colored div on the left side of the page

Here is the CSS I am currently using... <style type="text/css"> .widediv{width:1366px;margin-left:auto;margin-right:auto} </style> This CSS code helps me create my webpage : <body><div class="widedivv"> <!-- Content go ...

javascripthtmlcss

The positioning of Material UI InputAdornment icons is located beyond the boundaries of the TextField input area

I am struggling to understand why my InputAdornment is not positioned correctly. There doesn't seem to be any style in my code that would affect the location of the icon within the TextField (such as padding or flex properties). Currently, the calen ...

cssreactjstypescriptmaterial-uitextfield

Styling in CSS for aligning a drop-down menu to the right side

I recently incorporated a CSS/JavaScript drop-down menu on my website, which I sourced from the following page: However, I am facing an issue with aligning the far-right drop-down properly. Specifically, I would like the items in the far-right drop-down t ...

cssdrop-down-menu

"Enable a smooth transition and switch the visibility of a div element when clicked

How to create a dropdown form with a transition effect that triggers on click of an element? Once triggered, the transition works smoothly but clicking again only hides the div element without triggering the transition. See the demo here: Check out the fu ...

javascriptjqueryhtmlcss

Having trouble loading a CSS file in CodeIgniter?

I've added a link to my header.php and despite trying various solutions from stackoverflow, it still isn't working for me. Can someone please help? Thank you in advance :) Here's my folder structure: Main Folder: ci_attl - application ...

csshyperlink

Feeling trapped during the process of setting up a intricate jQuery Image Slider

I've hit a roadblock while trying to make changes to the slider located at THIS URL. In the current setup, each thumbnail corresponds to one main display image. Clicking on a thumbnail displays a single image and then proceeds to slide to the next th ...

javascriptjquerycsshtml

Steps for modifying material-ui timepicker to display time in a 24-hour format

Presently, I am utilizing a Timepicker from material-ui. It is currently configured with type="time", allowing me to select times throughout the day in 12-hour increments with an AM / PM choice. However, I wish to adjust my picker to a 24-hour format, elim ...

javascriptcssreactjsmaterial-ui

I seem to be having trouble properly sizing the width of my forms in Mui React

Having trouble with the sizing of my tabs in a project I'm working on. The first tab displays ingredients, while the second tab allows for adding new ingredients with various forms. However, when selecting different forms, the width of the form contai ...

cssreactjsmaterial-uistyles

What causes the width of input fields to increase as more inputs are added in flexbox?

I'm working on a form that consists of multiple sections, each with varying numbers of input fields. I've noticed that when I apply display: flex to the parent div and set the input fields to 100% width, the widths are calculated differently depe ...

htmlcssformsflexboxwidth

Persistent footer text moving around

Check out the sticky header I created here. However, when it sticks in place, the text moves down and goes out of the container. I want the header to remain within the container. Here is my HTML & jQuery: <div id="container"> <div id="menu ...

htmlcss

How to position div elements side by side using CSS and center them, even on IE8

UPDATE: I have discovered that implementing Bart's solution is the correct one. With a 264px wide div containing the other divs and their 1px borders, I achieved the desired effect. I have updated my code to include his answer. Thank you, Bart. Once ...

htmlcssinternet-explorer-8