The background image is not displaying

I am having trouble getting my background image to show up on my webpage. I have included a link to a screenshot of my image directory below for reference: image directorydirectory

 /*Moto G4, Galaxy S5*/
@media only screen and (min-width: 360px) {
  * {
    box-sizing: border-box;
  }
  .game {
    width: 360px;
    height: 640px;
    background-image: url(img/mario.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
  }
}

Answer №1

Simply include single quotation marks inside

background-image: url('img/mario.jpg');

 /*Optimized for Moto G4 and Galaxy S5*/
@media only screen and (min-width: 360px) {
  * {
    box-sizing: border-box;
  }
  .game {
    width: 360px;
    height: 640px;
    background-image: url('img/mario.jpg');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
  }
}

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

Tips for including an additional class in an element

I have an image tag with the "kiwi" class, and another class that makes it spin. I want to toggle this second class (called 'elem') when clicking on the play button of my music player. Here is the image tag with the class: <img src="./im ...

Updating contact list to a database table structure

Currently, my code displays the data in address books, but I would like it to be shown in a table instead. I attempted to use document.write to create the table, but I'm unsure how to populate the table with the data rather than the address book forma ...

What is the best way to align the middle element of a flex row in the center?

Desired Outcome: I have three elements within a container styled with display: flex. My goal is to align the left item to the left, the right item to the right, and have the middle item centered. space-between does not achieve this look due to the varyin ...

Adding space between the cells on the far left and far right of the table and the border

I need some advice on creating a table in HTML where the borders of the leftmost and right most cells do not extend all the way to the edges of the table. Here's an example: | ____ | In this example, the top border of the cells is continuous within ...

Creating a carousel with three thumbnails arranged in two rows

Currently, I am using a slider for my thumbnails. If you want to check out the code for this thumbnail slider, click on this link: thumbnails slider code My goal is to display 6 thumbnails in total, with 3 thumbnails shown in each row (2 rows total). Add ...

How can I select elements in CSS that are "between x and y"?

If I have an HTML table with 20 rows and 3 columns (20x3), I am looking to highlight the rows from 7 to 12 in red. What CSS selector should I use for this specific task? How can I define the range of rows to be styled as "between"? ...

Creating an Unordered List in GWT that Includes List Items

I've hit a roadblock while trying to create a css-driven menu in GWT. The menu should be rendered exactly like this: <div class="topbar"> <div class="container fixed"> <h3> <a href="" class="logo">test& ...

Tips on adjusting the size of an HTML canvas specifically for the display

Currently, I am working on an innovative project utilizing HTML5 and canvas: The challenge at hand is to draw on a canvas with dimensions of 2200px/1600px (width/height), display it on my website in a smaller window sized at 600px/400px. However, post cli ...

modifying button depending on the state of bootstrap collapse

I'm currently utilizing Bootstrap in my project. Here is the snippet of HTML code I have: <div class="row"> <button id="dog-btn" data-toggle="collapse" data-target="#dog-section" onclick=" ...

Tips for adjusting the duration of a background in jQuery

jQuery(document).ready(function(){ jQuery('div').css('background-color','#ffffff').delay(12000).css('background-color','#000000'); }); Hello everyone! I'm having some trouble with this code. I am ...

Issue with custom Javascript not executing in Internet Explorer versions 9 and 10

Initially, this script is found in the document's head section. <script> document.addEventListener("DOMContentLoaded", function () { var e, t = document.querySelectorAll("div.bounceInDown"); for (var n = 0, r = t.length; n & ...

Addressing three visual problems with an html form input, dropdown menu, and clickable button

Currently, the output of my code looks like this: https://i.stack.imgur.com/pl5CJ.jpg The first box (squared) represents an <input>, while the second box (rectangled) is a <select>. There are several issues that I am facing: The text entered ...

Guide to emphasizing a specific term within a string by utilizing coordinates in javascript

I am facing a challenge when trying to highlight multiple words within a sentence. Specifically, I have text data that looks like this: "The furnishing of Ci Suo 's home astonished the visitors: a home of 5 earthen and wooden structures, it has a sit ...

Creating an inline list with icons aligned using Bootstrap4

I have a list where some words span two lines, but the second line jumps under the icons at the bottom. How can I keep both lines next to the icon? I'm using Bootstrap and chose to use the list-inline class. Maybe using columns for this list would wor ...

Is there a way to implement a scrollbar that only scrolls through one specific column in an HTML table?

I need help adding a scrollbar to a specific column in an HTML table. Take a look at this scenario https://jsfiddle.net/6wpdc4tL/: https://i.stack.imgur.com/svzIg.png This table should have two scrollbars, one for the light blue SCROLL column and another ...

What is the best way to ensure that the button's left margin matches the left margin of the table at all times?

https://i.sstatic.net/qJwvE.png Hello there, I am currently working with HTML/CSS and I have managed to center a table on my page using the CSS class .tablecenter { margin-left:auto; margin-right:auto; } Following the table, I have placed a button: ...

Centered buttons placed right next to each other

Having trouble getting my buttons centered and aligned side by side on the screen. I've managed to achieve one or the other but not both simultaneously. Currently, the buttons are next to each other but positioned at the top left corner of the screen. ...

Tips for creating a fixed navigation menu that remains visible while scrolling without any items disappearing

I have been working on my web design lately and have been trying to utilize as much CSS as possible without relying on JavaScript. I encountered an issue when designing my navigation menu, which is supposed to remain fixed at the top of the page. Here is a ...

Is it achievable to generate multiple `div` elements that are positioned in a circular arrangement?

Is it possible to create a button that, when clicked, displays a circular zone div using CSS only? It should look like this: https://i.sstatic.net/BFFs1.png I would like the red div to look like the image above. Can this be accomplished with CSS alone? ...

Tips on adjusting the default width of the React player interface

I'm currently utilizing react-player to display a video in my app. The default width it comes with is not responsive, and applying CSS didn't prove to be effective. import ReactPlayer from 'react-player'; <ReactPlayer url="https:// ...