The background image fails to show up on the mobile device display

Currently, I am working on an app with Ionic, but unfortunately, the background image is not showing despite all my efforts. I have gone through various solutions provided in previous questions, but none of them seem to work for me. Here is the CSS I am using:

body {
    background-image: url("img/national day.png");
    display:block;
    position:absolute;
    min-height: 100%;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-position: center;
    width: 100%;
    height: 100%;
    margin: auto;
    /*position: relative;*/
}

I am certain that the path is correct because it appears in the frames when I debug using Chrome. There is an img file in the css directory. But for some reason, the picture is still not appearing. Check out the fiddle here: https://jsfiddle.net/y04jpe0h/

htmlcssangularjsionic-framework

Answer №1

You can enhance your code with the addition of this CSS snippet:

body{
  background-color: #f9f9f9;
}

Hopefully, this will improve the appearance!

Answer №2

Here is a solution to try: I have eliminated the background size property set to 100% 100%. 

{
    background: url("img/national day.png") no-repeat center center fixed;
    display: block;
    position: absolute;
    min-height: 100%;
    background-repeat: no-repeat;
    width: 100%;
    height: 100%;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    margin: auto;
}

I hope this solves your issue.

Answer №3

Initially, in order to access the img folder, you need to include the following code:
background-image: url("../img/logo.png"); as the img folder is not located within the css folder. Also, double check that the image is present in the img folder since I couldn't locate it in the fiddle. You can try using logo.png and see if it works.

Answer №4

After some troubleshooting, I decided to include a background image on the panel as a workaround, and it worked perfectly. The reason for the initial issue remains unknown...

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

Use jQuery to retrieve the response from a JSON request and showcase it on the existing HTML page

Currently, I am working on a project that involves integrating a JSON-based web service from a remote server. The method of this service can be accessed by using specially formatted URLs such as: http://root-url/ws/service-name?request={json-string} The ...

javascriptjqueryhtmlajax

The parameter always comes up empty when using $state.go in AngularJS

When trying to pass one parameter using `$stete.go`, I encountered an issue. ROUTER $stateProvider.state('login.signin', { url: '/signin', params: { login_event: '' }, templateUrl: "assets/views/login ...

javascriptangularjsroutesangular-ui-routerangularjs-routing

Overflow - conceal the scrollbar and prevent scrolling without cutting off the element

Whenever I implement the code snippet below: body { overflow: hidden; } The overflowing element gets clipped. However, when I try this code instead: body { overflow: auto; } The element is no longer clipped, but now a scrollbar appears where it ...

htmlcssoverflow

AngularJS Time Range Selector: A Slider Solution

I have successfully implemented a time range slider using Jquery and JqueryUI. $("#slider-range").slider({ range: true, min: 0, max: 1440, step: 15, values: [600, 720], slide: function (e, ui) { var hours1 = Math.floor(ui.values[0] / 60); var minu ...

javascriptjqueryangularjsangular-uifrontend

Aligning an image alongside two separate blocks of text

I'm having trouble creating a header bar on my HTML page with a h1 and h2 element, along with an image positioned to the right of both. No matter what I try, the image keeps appearing below the other elements. I attempted using display:inline-block; b ...

htmlcss

What is the best way to loop through an array and apply classes to each element separately?

I'm currently working on a unique jQuery plugin that is designed to create dynamic lists based on any data provided. The first 6 items in the list will always remain constant, regardless of the input data. When I say constant, I mean that although th ...

jquerycss

What is the best way to arrange images in a 3 by 3 grid, beginning at position 0, using JavaScript to control navigation through button clicks?

When I click on button 1, it starts at image 1 because the counter is set to 0. Clicking on button 2 takes me to image 4 with a counter value of 3, while clicking on button 3 leads to image 7 with a counter value of 6. The process should also work in reve ...

javascripthtmlcssimage

Creating a larger spinning div using CSS3 animation

I am looking to add a fun hover effect to my div where it spins and zooms in at the same time. Here is what I have so far: [html] div class="myMsg">> <p id="welly" style="color: #009">Welcome to Y3!<br><br><br>T ...

htmlcss

Is there a way to customize the background color of the active list item class in Bootstrap 4?

Customizing Boostrap Code : <!-- Custom Sidebar --> <div class="bg-light border-right" id="sidebar-wrapper"> <div class="sidebar-heading"><strong><?= __('Admin Panel') ?></strong></div> <div class="li ...

css

Combining HTML with multiple .ts files in Angular

I've been dedicating time to enhancing an Angular application, particularly a sophisticated table with intricate styling and functionality. Within my component file, there is a whopping 2k lines of code that includes functions for text formatting, ta ...

htmlangulartypescriptfiledivide

I am facing an issue where the controller cannot be located within the required attribute of my directive

Here is the HTML code snippet I am working with: <nav> <ul rf-hover-wrapper> <li rf-hover-child rf-on-hover-class="hover">Home</li> <li rf-hover-child rf-on-hover-class="hover">About us</li> <li rf-hove ...

angularjsangularjs-directive

Show input field depending on chosen option

I'm looking to create a dynamic form where specific input fields are displayed based on the selection made in another field. For example, if "gender: male" is selected, the input field for "blue" should appear, and if "gender: female" is selected, the ...

javascriptjqueryhtmlajax

Guide to making a Material Design Radial effect animation

I am looking to create a unique toolbar effect by following the material design radial reaction choreography guideline. https://i.stack.imgur.com/6oB8r.gif I want to achieve this using an angular 2 transition, but I need some guidance on how to implement ...

cssanimationangulartypescript

Ways to adjust the dimensions of a division element using Bootstrap

I have a CSS class called "brands" and I am looking to change the size of the thumbnail div within this brand class. How can I go about doing this? <div class="brands"> <div class="row"> <?php foreach ($item['brands'] ...

htmlcsstwitter-bootstrap

Issues with CSS rendering in the Chrome browser are causing display problems

After successfully creating an iFrames page tab on Facebook that looks great in Firefox and Internet Explorer, I encountered an issue with the div positioning in Chrome. You can view the page here: Oddly enough, this is the only page experiencing problems ...

cssgoogle-chrome

Resolving the Material-UI NextJS Button Styling Dilemma

I've encountered an issue with the styling of a few buttons in JS. When I apply a styling class using className, the formatting works fine on the initial render but loses its styling on subsequent refreshes. This problem is specific to two individual ...

htmlcssreactjsmaterial-uinext.js

Sorting outcomes based on HTML file

Attempting to narrow down results based on certain criteria within a large HTML file. Unsure if my query is attainable, but it never hurts to inquire. Currently immersed in a browser game featuring a vast map measuring 100x100, with each pixel representing ...

htmlvb.nethtml-agility-pack

Exploring the reasons for utilizing class and ID selectors within a <div> element to enclose a map in OpenLayers

The 'quickstart' guide provides a comprehensive overview of using id and class css selectors within the html code. In order to link the map object to a specific div element, a target is required as an argument for the map object. This target val ...

cssopenlayersopenlayers-3

What's preventing the buttons from shifting positions?

Having some trouble with my Minesweeper Web Game setup. My buttons are stuck in place and won't budge. Can someone help me figure out what's wrong? Here's the code snippet I've been working on (FYI, using NetBeans 8.1 IDE) HTML: <! ...

htmlcssnetbeansnetbeans-8.1

What is the best way to increase the top padding of an anchor link?

I need to create a padding-top effect for my div when the link to the anchor is clicked: <a href="#myAnchor">Proceed to my anchor</a> ... <div id="myAnchor"> ... </div> The challenge lies in wanting to add the padding only when ...

htmlcss