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

Customizing the size of dateBox icons in JQuery Mobile

Is there a way to increase the button size within the input box of a dateBox? Currently, it appears small and difficult to click accurately. Additionally, it would be beneficial if clicking anywhere in the input field could open the calendar, instead of ju ...

jqueryhtmljquery-mobile

Modify the HTML indentation style in Visual Studio 2008

When working with Visual Studio 2008, I have noticed that it insists on indenting HTML in a specific way: <h1> title</h1> <h2> subtitle</h2> However, I personally prefer the following indentation style: <h1>title< ...

htmlvisual-studiovisual-studio-2008indentation

Switch the cursor to display the magnifying glass icon for zooming in and out

I am curious about how to modify the cursor shape to display a zoom in and zoom out symbol. Changing the cursor to indicate busy or wait status is something I am familiar with, document.manual_production.style.cursor='wait'; However, I am unsu ...

javascripthtmlcss

Ways to adjust image placement and size post-rotation with CSS/JS to ensure it stays within the containing div and avoids being cut off

Check out this jsfiddle I've been experimenting with. The jsfiddle is designed to rotate an image by 90 degrees in either clockwise or anti-clockwise direction upon button click. However, the rotated image currently appears outside of its parent div. ...

htmlcssangularjsrotation

The variability of jQuery values

I have created a website control with jQuery that features a long bar consisting of four colored divs. Users have the ability to drag the join between two divs in order to resize it, all within the confines of the bar itself (keeping the overall width of t ...

jqueryhtml

Achieve the effect of "background-attachment: fixed" using a div element

I am attempting to replicate a similar effect as seen here, which is accomplished using the CSS property background-attachment:fixed. However, I want to achieve this effect using div elements instead. For instance, could I apply this effect to an h1 tag? ...

javascriptjqueryhtmlcssbackground

Removing all HTML elements within the div container

My HTML code includes the following: <div class="row" id="conditional-one"> <div class="large-12 columns"> <h3><?php echo $arrayStage_rule_one_title?></h3> <p> <?php echo $arrayS ...

javascripthtml

Easiest method to globally disable form autocompletion in an application without manually setting autocomplete off for every individual form

Is there a quick way to disable autocomplete in all forms within the application without individually adding "autocomplete=off" to each form? ...

javascripthtmljquerycsssass

Create an HTML table with a static header, adjustable columns, and the ability to resize to a width smaller than the content

Looking to create a unique web application with a table that has a fixed, styled header, resizable columns, and the ability to resize the columns without truncating content. Additionally, I want the body of the table to scroll if it cannot all fit on the p ...

jquerycsshtmlwebkithtml-table

The css property of *ngContainerOutlet is ineffective when applied to an ng-component with encapsulation

When I utilize *ngContainerOutlet to dynamically insert components, it wraps the component's template within an ng-component tag which causes my CSS styles to become ineffective. For example: <div class="my-class"> <ng-container *ngComp ...

cssangularcomponents

Introducing the new and improved SweetAlert 2.0, the ultimate solution for

I am currently utilizing SweetAlert2.0, known as "This One" <script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script> It is functioning properly; however, I would like to display a table, div, or HTML element within this swe ...

javascriptjqueryhtmlcss

Nav Dropdown Beyond Container Bounds

I'm working on implementing a flexbox navigation menu with dropdowns for certain items. However, I've encountered an issue where the dropdown lists are appearing to the right of the container on hover, rather than below it as expected for a typic ...

htmlcssflexbox

Styling an input text using CSS and Jquery without relying on a parent

Styling CSS input text without a parent div Hello everyone, I am looking to remove the <div id="input_container"> from the code below. Is it possible to achieve the same result without that surrounding div? Check out the jsfiddle: http://jsfiddle.n ...

jqueryhtmlcss

Unusual issue with horizontal menu display in Firefox on Mac

I recently completed a website project using Contao for a client (visit www.medivas.de). Everything is working perfectly except for one issue: the last menu item in the main navigation (located at the top, above the slideshow) is causing a line break. This ...

htmlcssmacosfirefox

Create two div elements containing responsive images using HTML and CSS

Can someone assist me in creating responsive DIVs with images inside? Currently, the second div is appearing below the first one, and I'm struggling to make them scale based on mobile and tablet screen sizes. Here is the code snippet: .new_ba ...

htmlcssresponsive-design

What is the best way to save JavaScript array information in a database?

Currently working on developing an ecommerce website. My goal is to have two select tags, where the options in the second tag are dynamically populated based on the selection made in the first tag. For example, if "Electronics" is chosen in the first tag f ...

javascriptphphtmlsqlarrays

manipulating dropdown visibility with javascript

I'm feeling a bit lost on how to structure this code. Here's what I need: I have 5 dropdown boxes, with the first one being constant and the rest hidden initially. Depending on the option chosen in the first dropdown, I want to display the corres ...

javascripthtmlcss

Utilize Node JS to assign variables to HTML form inputs

Can anyone help me with storing HTML form inputs in variables using Node JS? I'm having trouble getting it to work properly. Below is the HTML form snippet: <form action="localhost:8080/api/aa" method="post"> <input id="host" type="text ...

javascripthtmlnode.jsexpress

Tips for implementing ::before and ::after pseudo-elements within an anchor tag

Can you provide guidance on adding ::before pseudo-element inside an anchor tag? https://i.sstatic.net/tojNE.jpg ...

htmlcss

What is special about this element, textarea?

Hey there, I've got this JavaScript code that currently works on all textarea elements on the site. However, I'd like it to only work on one specific element. function limits(obj, limit) { var text = $(obj).val(); var str_length = $(obj) ...

javascriptjqueryhtmlthis