Background images will not display in a repeating manner on a mobile browser

I am currently facing an issue where I have two backgrounds, one as an image without repeating and the second with repeating in both x and y axis. Everything displays correctly on PC, but on mobile browsers the second image only repeats on the x axis. Here is my CSS code:

    #bdy
   {   
    direction: rtl;
    width: 1200px;
    margin: 0 auto;
    background: url(img/bg1.png),url(img/bg.png);
    background-repeat: no-repeat,repeat;
    background-position: center -70px,top;
   }

I need to make the second image repeat on both x and y axes, what changes should I make?

htmlcssmobilebrowserbackground

Answer №1

To ensure that your background repeats on both the X and Y axes, simply use background-repeat: repeat;. This is because by default, the background will repeat on both axes.

UPDATE After researching, I discovered that not all browsers support the use of multiple backgrounds with the code 

background: url(img/bg1.png),url(img/bg.png);
. For example, IE8 does not support multiple backgrounds. Therefore, my recommendation is to utilize multiple divs or tags and create a separate mobile version for your website. Below is the code snippet I use for redirecting users to the mobile version:

<script>if( /Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent) ) {window.location ="MOBILE-DOMAIN-NAME-HERE";}</script>

You can create multiple divs like this:

HTML

<div id="bg1"> content </div>
<div id="bg2"> content </div>

CSS

#bg1{
background: url(img/bg1.png);
background-repeat: no-repeat;
background-position:  center  -70px;
}

#bg2{
background: url(img/bg.png);
background-repeat: repeat;
background-position: top;
}

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

Unable to hide table borders in ipython notebook in the usual manner

In the IPython notebook cell below, you will see a table with a gray background and borders: from IPython.display import HTML s=""" <style type="text/css"> table, td { border-collapse: collapse; border-style: hidden; background-color: ...

htmlcssjupyter-notebook

Does the Sass default compiler have built-in autoprefixing capabilities?

Suppose I have the following sample code: :fullscreen a { display: flex; } Is it possible for the default sass compiler to transform it into this: :-webkit-full-screen a { display: -webkit-box; display: flex; } :-moz-full-screen a { display: fle ...

csssassautoprefixer

Troubleshooting: Jquery Toggle Issue When Used with Adjacent Div Element

I've been puzzling over this issue for hours now. The intention of this code is to display a div, but it's just not cooperating. <div id="butbr"> <div id="sup_nav"> <div id="stup" class="bxt1"></div> <div id= ...

javascriptjqueryhtmlcssshow-hide

Is there an issue with the onClick event in React Buttons when they are generated using the .map()

Is the button created in the .map() function expired after the function ends? It does not seem to work. The code reads from a JSON file that stores an array, loops through it to display items including the button. When clicked, the button should set the d ...

javascripthtmlnode.jsreactjs

Flask web page - requires showcasing a roster of users and allowing an administrator to choose multiple records

As I venture into the world of Python flask coding, one challenge I'm facing is displaying a user list on an html webpage and allowing the admin to select multiple entries. Once selected, these users will receive a broadcast message. I'm seeking ...

pythonhtmlflaskbootstrap-4flask-wtforms

Display or Conceal Sub-Header according to Scrolling Position

Question: My goal is to create a specific animation on my website. When loading the page on mobile, I want to display the div with ID "sub-header", but once the user scrolls more than 50px down, I want to hide it. Additionally, if the user scrolls up by 60 ...

javascriptjqueryhtmlcss

A guide on changing a plus sign into a minus sign with CSS transition

Is there a way to create a toggle button that changes from a plus sign to a minus sign using only CSS, without the need for pseudo-elements? The desired effect is to have the vertical line in the "+" sign shrink into the horizontal line. While I know it& ...

javascripthtmljquerycsscss-transitions

Tips for creating a div element with a header and scrollable section

Greetings! I am currently developing a code to manage a sprinkler system interface with a modern and visually appealing design. At the moment, I have two columns on the page, each containing boxes. Unfortunately, the alignment of these boxes is not as desi ...

htmlcss

Tips for getting around the router in Angular 2

We have multiple template files containing their components, each with defined routes that can be called using the following syntax: <a routerLink="/Path-with-component"> Open page with component </a> In addition to these dynamic components, ...

javascripthtmlangularangular2-routingangular2-template

Using Wordpress? Customize your sidebar with three widgets and don't forget to add the "last" class to the third one for a polished look

Successfully set up a custom sidebar on my WordPress website and configured it to display three widgets. The CSS for the sidebar includes a specific styling for each widget, with an additional class to remove margin-right from the last (third) widget. reg ...

phpcsswidgetwordpress

Combining ng-filter and ng-repeat to iterate over key-value pairs in objects

Currently, I am utilizing the built-in Angular 1 filters in an attempt to filter out a property of an object. While Angular Filters typically only accept Arrays and not Objects, the structure of the web application prevents me from refactoring to pass an a ...

javascripthtmlangularjs

My navbar is not expanding properly when toggled

I've been struggling to understand bootstrap 4 and the navbar feature is giving me a hard time. I initially managed to get the icon to display correctly, but then I must have made a mistake because now it's not showing up at all. Additionally, I ...

htmlcssbootstrap-4

collection of random header images for a ruby on rails website

Can anyone help me with an issue I'm having? I am trying to randomize images in a header on a category page using the following code, but it doesn't seem to be working. I keep getting this error: Invalid CSS after "...ackground: url(": expected " ...

cssruby-on-railsruby

Is there any way to extract the source files from a compiled Electron application?

Is there a way to extract the contents of a .app Application developed using Electron for Mac OS? I'm eager to explore the underlying source files, but I'm not familiar with the procedure to access them. Any assistance would be greatly appreciate ...

javascripthtmlnode.jsmacoselectron

Transformation and swapping between two distinct visuals

In this scenario, there are two images: a boat and a plane. The specific effect desired is as follows: The boat should animate from left to right, while the plane remains hidden. Once the boat reaches the middle of the screen, it should disappear and the p ...

htmlcsscss-animations

The function replaceState() is unable to create a history state with a URL in a document that has a different origin

In my main.js file located in required/javascripts on my server, I have the code window.history.replaceState(null, null, 'about');. On the about page (located at the root of my server), there is a link that uses window.history.replaceState(null, ...

htmlhtml5-history

React Native compilation unsuccessful due to failure in executing the task ':app:checkDebugDuplicateClasses'

While working with installreferrer and payu SDK, I am new to React Native and attempted to integrate PayUMobile for payment integration but encountered an error: "Execution failed for task ':app:checkDebugDuplicateClasses'." FAILURE: Build faile ...

javaandroidreactjsreact-nativemobile

Header 1 is not receiving any special styling, while Headers 2 through 6 are being styled accordingly

I am currently utilizing Skeleton V2.0.4 to design a landing page, but I seem to be having trouble with my styles not displaying correctly. Below are the specific lines of code related to it: /* Typography –––––––––––––– ...

htmlcsstags

What could be causing the Grid Child, which has a fixed width and a max-width of 90%, to overflow the

Question: Could you please explain why the .header element overflows its grid track when the viewport width reaches 1500px? Code:: * { box-sizing: border-box; padding: 0; margin: 0; } body { background: #6e28d9; color: white; } .container { ...

htmlcsscss-grid

Tips on configuring the path to incorporate Bootstrap CSS, JavaScript, and font files/classes into HTML when the HTML file and Bootstrap files are located in different directories

<!DOCTYPE html> <html> <head> <title>Unique Demo</title> <link href="css/bootstrap.min.css" rel="stylesheet" type="text/css" media="screen"> </head> <body> <div class="container"> <form ...

htmlbootstrap-4