Setting a background image for your Ionic page

I am relatively new to using Ionic and I'm currently working on setting up a gradient image as the background for the welcome page of my app. While I've been successful in loading images from the assets/imgs folder on other pages, I'm facing difficulty with the welcome page. When I try setting the background to a solid color, it works perfectly fine. Any suggestions on how to solve this issue?

Error Message: Failed to load resource: the server responded with a status of 404 (Not Found)

page-welcome {
    #welcome{
        // background: color($colors, dark);
        background-image: url("assets/imgs/gradient.jpg");

        h1{
            font-size: 52px;
            margin-top:50px
        }
        .marginTop{
            margin-top:150px;
        }
        .logo{
            height: 100px;
        }
    }
}

Answer №1

Experiment using a relative path:

background-image: url("../../resources/pictures/gradient.jpg");

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

Enhancing option lists with group options through JQuery

Here is an example of HTML code generated by Lotus Domino without closing tags on <\option>. <select name="Fault" class="textbox"> <option>Single Light Out <option>Light Dim <option>Light On In Daytime <option>Erra ...

Constructor for 'dojox.mobile.RoundRectCategory' could not be located

Using Worklight 5.06 and Dojo 1.8, I encountered the following errors on the browser's console after an Eclipse crash: Error: Unable to resolve constructor for 'dojox.mobile.RoundRectCategory' Error: Left list not found Error: this.leftLis ...

Entry is automatically added to the form as soon as the page is loaded

I am trying to create a form using PHP, but I want the script to only run after the submit button is pressed. Currently, it runs every time the page loads and overloads the box on the same page. Unfortunately, my knowledge of PHP is limited! Any help wou ...

Adding an additional border when combining two divs with rounded borders

I attempted to create a design similar to the Instagram "ask me a question" box, but I am encountering an issue where there is some extra border around the title when the two divs merge. What am I doing incorrectly? .info { overflow: hidden; ...

Creating a virtual roulette wheel with JavaScript

I'm currently working on creating a roulette wheel using JavaScript. While researching, I came across this example: , but I wasn't satisfied with the aesthetics. Considering that my roulette will only have a few options, I was thinking of using ...

jQuery not loading SCRIPT src after appending to HTML

I'm in the process of developing an application that requires me to load new HTML content and append it into the current page's HTML. So far, I've been able to load the new HTML using jQuery ajax. However, within this newly loaded HTML, the ...

How can the Jquery UI Datepicker value be automatically set upon redirecting to this page?

When I submit a form and an error occurs, the value selected in the datepicker is not retained. The datepicker field remains empty. How is this possible? <html> <head> <script type="text/javascript" >. $(function() { ...

Easy ways to align sprite images and text in the center

I am trying to utilize css sprites for my website. I have a basic image and some text that I would like to display together. My goal is to center the image on the page, and then vertically center the text next to it. As a newcomer to css, I am struggling t ...

Achieving the desired display position in CSS3 with bootstrap: Steps to follow

I am attempting to create a unique icon by combining two different bootstrap icons together: https://i.stack.imgur.com/RWiQn.png Despite trying various margin adjustments like top and right, I have not been able to achieve the desired effect. Here is wha ...

Adjusting the appearance of Google charts

Is there a way to eliminate the label for the area chart located at the top right corner? ...

The overflow:hidden property prevents me from being able to scroll down the rest of my webpage

@import url('https://fonts.googleapis.com/css?family=Indie+Flower|Lobster|Open+Sans+Condensed:300|Roboto+Condensed&display=swap'); * { margin: 0; padding: 0; } html,body { height: 100%; width: 100%; margin: 0px; padding: 0px; ...

Creating an interactive Bootstrap 4 accordion with Vue.js: Step-by-step guide

I am currently utilizing Bootstrap 4 (jQuery is also installed) to develop an accordion feature in combination with Vue.js The challenge I am facing is related to using the v-for directive on the card I intend to replicate for each item in a JSON file. Th ...

PHP file unable to access Bootstrap file

I have my bootstrap css file stored in the following directory: C:\Users\SCEA\Downloads\bootstrap-3.3.7\css When linking this css file to my php file, I used the absolute path: <link href="C:\Users\SCEA\Downl ...

Adjust the color of the IconButton

I am trying to customize the color of an IconButton by setting it to red <IconButton variant='contained'> <StarBorderRoundedIcon color='red' /> </IconButton> However, when I try this, the red color ...

How can I apply a CSS class to a group of radio buttons within a radio button list?

I'm attempting to validate a radio button group and apply a specific CSS class to it. Since this is a server control, I can only apply the class one way. However, upon checking with jQuery, I discovered that the class is actually being attached to the ...

Unable to receive any response with AJAX requests

Welcome to my HTML page <html> <head> <title>Using AJAX</title> </head> <script type="text/javascript" src="ajax.js"></script> <body> <form action="searchItems.php" name="searchItem" method="p ...

Is it possible to deactivate an element based on a specific string present in the URL?

<div class="custom-class1"> <div class="custom-class2" id="custom-id1">hello 1</div> <div class="custom-class3" id="custom-id2">hello 2</div> <div class="custom-class4" id="custom-id3">hello 3&l ...

Changing Angular 2 web app code to Ionic 2 mobile app code?

I currently have a web application code that was written using Angular 2. My goal is to create a hybrid mobile application by utilizing Ionic 2 for the same web application. Since Ionic 2 incorporates core concepts of Angular 2, I have a few questions: Is ...

What is the proper way to manage the (ion select) OK Button?

Hey there, I'm working with an Ionic select directive and I need to customize the functionality of the 'OK' button. When I click on it, I want it to call a specific function. I'm aware of the (ionChange) event, but that only triggers w ...

I'm curious as to why styled components weren't working before

I'm attempting to utilize the before on styled components in React, but it doesn't seem to be functioning correctly. Prior to adding before, the background image was displayed, but after its inclusion, the image is no longer showing up; import st ...