When seen on a mobile device, the background image is set to repeat along the

Having trouble getting my background image to repeat on the y-axis when viewed on a mobile device. On desktop, the page doesn't scroll and the background image fills the screen perfectly. However, when switching to tablet or mobile, scrolling is necessary and the image does not repeat. Here is my current code snippet:

  body {
    background-image: url("../assets/BG.png");
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    background-repeat: repeat-y;
    background-position: center center;
    margin-top: 0;
    position: absolute;
    height: 100%;
    width:100%;
    margin: 0;
  }

Any assistance would be greatly appreciated.

Check out this GIF of the issue: https://i.stack.imgur.com/PaWQI.jpg

htmlcssresponsive-design

Answer №1

remove background-size: cover; from the CSS rule - this will always fill the entire body element, even the part that is visible when scrolling. Replace it with background-size: 100% auto; instead and adjust the position to background-position: left top to ensure the image covers the complete width, starting from the upper left corner.

(By the way, using position: absolute; for the body element is quite unusual.)

Below is a code snippet showcasing this with a placeholder image:

 body {
    background-image: url("http://lorempixel.com/600/100/food");
    background-size: 100% auto;
    background-repeat: repeat-y;
    background-position: left top;
    margin-top: 0;
    position: absolute;
    height: 100%;
    width: 100%;
    margin: 0;
  }

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

What causes the discrepancy in pixel size between these two web pages on the same device?

I am currently putting together a portfolio showcasing the projects I have worked on while learning to code. Each project page has a banner at the top, but I'm encountering an issue with one site (Jubilee Austen page) that is unresponsive. After usin ...

htmlcssresponsive-designpixel

What is the best way to assign group headings to my Codeigniter view results?

One of the challenges I'm facing in my view is organizing a list like this: <? foreach($services as $service): ?> <tr> <td><?= $service->name; ?></td> <td><?= $service->format; ?></td> < ...

phphtmlcodeigniter

Issue with VueJS where the datalist input does not reset the value

I am currently working on a Vue component that scans QR codes and adds information to a database upon successful scanning. The scanning process works perfectly fine. However, after successfully sending the data, I need to clear the input field in my datali ...

javascripthtmlvue.jsvue-componenthtml-datalist

What is the best way to gather Data URI content through dropzone.js?

I am currently utilizing Dropzone for its thumbnail generation feature and user interface. However, I am only interested in using the thumbnail generation ability and UI and would prefer to collect all the data URIs myself and send them to the server via a ...

javascriptangularjshtmldropzone.js

Problem with stacking order in Internet Explorer 7

Our current issue involves a z-index problem with a div that should be positioned above another specific div. The div in question, named (house-over-banner), is set to absolute positioning, while the one below it is relative. Interestingly, everything dis ...

cssinternet-explorerz-index

Please display the "django.db.models.query_utils.DeferredAttribute object at" message in Django

Having trouble retrieving data from a database object to populate and edit a form in HTML. When I try to access the current value from the attribute, I encounter this issue: Form HTML <form enctype="multipart/form-data" method="pos ...

pythonhtmldjango

Discover the process of creating a dynamic mailto link using AJAX and HTML

One of my tasks involves extracting email addresses from an XML document using AJAX, and then displaying them on a webpage as clickable links for sending emails. Here is a snippet of JavaScript code I am working with: emailobj = listings[i].getElementsBy ...

javascripthtmlajax

Monitoring user logins based on user identification

How can I effectively monitor the activity of users who have logged into a web application that is managed by an external company? Despite my extensive research efforts, as a non-technical individual, I am struggling to understand how to utilize Google Ana ...

javascripthtmlweb-servicesgoogle-analyticsgoogle-analytics-api

Issue with JQuery: Logo only becomes visible after scrolling

Recently, I added a jQuery script to modify the header as we scroll on our website. Everything is functioning smoothly except for one issue - the large logo on the left side doesn't appear when visitors first land on the page; it only shows up after t ...

jqueryhtmlcssheaderscroll

Ways to adjust the border color when error helper text is displayed on a TextField

I am currently working with React Material UI's TextField element. What I aim to achieve is when the submit button is pressed, the helpertext displayed should be "Please enter the password." It should look like this: However, once the helpertext is ...

javascripthtmlcssreactjssass

Transforming the initial character of a label element into uppercase

When I receive an external HTML page, all the data comes in lowercase. I attempted to capitalize the first letter of each label tag using CSS, but it ended up making the entire text uppercase instead. Here is what I tried: .fontmodal { text-transform ...

javascriptjqueryhtmlcss

When the JavaFX ComboBox drop-down opens in an upwards direction, the border appears incorrectly

While working with Java 8, I encountered an issue with the "javafx.scene.control.ComboBox" where if it doesn't have enough room below, it pops up instead. Strangely, the border styling of the elements still behaves as if it should pop down. Is there ...

cssjavafxcomboboxstyling

What is the best way to make an image clickable in Next.Js?

Is there a way to turn an image into a link in Next.Js? I have the Instagram logo that I want to use as a link to my Instagram page. I want it to open a new tab and redirect the user to my Instagram account when clicked. I would really appreciate any guid ...

htmlreactjsnext.js

Create a unique margin using CSS only that will appear at the bottom of a flex-row container that scrolls

I'm trying to create a horizontal scroller with margins between each item and consistent margins at both ends. However, I'm noticing that the margin at the end of the container seems to be disappearing somehow. Is there a way to maintain the mar ...

htmlcssscrollflexbox

Troubleshoot: Dropdown menu in Materialize not functioning (menu fails to drop down

I am currently incorporating Materialize to create a dropdown button in my navigation bar. However, I am facing an issue where nothing happens when the button is clicked. Here is a snippet of my code: <head> <meta charset="UTF-8"> <!-- ...

javascripthtmlcssfrontendmaterialize

Adding a background color to the body of your PHP and HTML email template is a simple way to enhance

I am currently using a confirmation email template with a white background, but I want to change it to gray. However, I'm unsure how to update the PHP file containing the email function below: $headers = "From: " . stripslashes_deep( html_entity_deco ...

phphtmlcsshtml-email

Is it possible to apply a tailwind class that fades or transitions into something else after a specific duration?

How can I achieve a transition effect from the bg-red-300 class to bg-transparent, or a different background class, over a 2-second duration? Do I need to use javascript for this effect? I would like an element to be highlighted and then return to its no ...

csstailwind-csstailwind-in-js

It's perfectly fine to use CSS href online, but when attempting to download the CSS file and use it locally, it doesn't seem to

I am currently working on a personal website project and I decided to use an HTML template from W3Schools. The template includes CSS files sourced from the internet: <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css"> <link re ...

htmlcss

Refreshing GIF images in React using forceReload

In order to restart the gif animation every 12 seconds or whenever the activeIndex changes, I need to reload a GIF image with CHECKMARK_ANIMATION_ICON as the source. Below is the code: const reloadImgSource = (imgSource) => { setTimeout(() =& ...

javascripthtmlreactjs

Is there a proper method for populating an HTML text with values from a form?

As a newcomer, I could really use some guidance here :) I'm trying to populate text with various words, numbers, and calculation results from a form. This is my initial attempt for just one field/word, and it appears to be functioning correctly. Do y ...

javascripthtml