The background image is not displaying correctly on mobile devices

I'm struggling to make the image fit the entire screen on a mobile device using the code below. Interestingly, it displays correctly on my personal computer.

#topContainer {

  height:1048px;
  width: 100%;

  padding: 0;
  margin: 0;

}

#div1 {

  background-image: url("images/Healthy-Eating.png");
  height:1048px;

  margin: 0;
  background-size:cover;
  position: relative;
  padding-top: 40px;
}



#freeEbook {

  background-color: rgba(0, 0, 0, 0.6);
  height: 750px;
  width: 535px;
  border-bottom: 0px;
  transition: background-color .5s ease 0s;
  position: absolute;
  color: #fff;
  font-size: 1em;
  padding: 10px;

}

Could you please help me understand why this is happening and suggest how I can rectify it?

htmlcsstwitter-bootstrap-3

Answer №1

A fixed height of 1048px is being applied to your image, #div1. This means the image will always be 1048px high regardless of screen size. While this might work for your computer, it could cause issues on smaller devices like phones! Consider using the following CSS for #div1: 

#div1 {
  background-image: url("images/Healthy-Eating.png");
  height: 100vh;
  width: 100%;
  margin: 0;
  background-size: cover;
  position: relative;
  padding-top: 40px;
}

With height: 100vh, the image's height will now adjust to be 100% of the viewport height.

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

Creating Table Rows on-the-fly

Seeking assistance and guidance from the community, I have modified code from an online tutorial to allow users to dynamically add rows to a table when data is entered in the row above. However, I am facing an issue where I can only insert one additional ...

javascripthtml

The issue of jQuery pop-up not functioning properly on a web page that has infinite scrolling

Currently, I am working on a website that showcases various products with images. When you hover over these images, a pop-up appears displaying details about the product along with a "buy now" button. Everything was functioning perfectly until the infinit ...

javascriptjqueryhtmlshopifyinfinite-scroll

What is the best way for me to automatically square a number by simply clicking a button?

How do I create a functionality that multiplies a number by itself when a specific button is clicked? I want this operation to only occur when the equals button is pressed. I have been attempting to set this up for over an hour without success. My current ...

javascripthtmlcalculatorcalc

Ways to modify the cursor of a disabled ImageButton on an ASP.Net webpage

Within a ListView, I have dynamically generated ImageButtons. If an image does not have a link, I want to make it disabled. In the ItemDataBound event, I attempted the following approach: img.Enabled = False img.DescriptionUrl = "javascript:void(0);" img. ...

htmlasp.netcsscursorimagebutton

How can I use CSS to ensure that both cards and images are equal in size?

I am currently utilizing react, with Material-ui being used for the Cards. For the layout, I have implemented CSS Grid Layout for the Grid system. Presently, the structure looks like this: https://i.stack.imgur.com/0FDyY.png However, my desired outcome i ...

javascriptreactjscssmaterial-ui

Creating a Facebook link widget similar to Grooveshark: A Step-by-Step Guide

Recently, I shared a Grooveshark link on Facebook (like http://grooveshark.com/s/Toothpaste+Kisses/3gGocy?src=5) and to my surprise, the link appeared to be normal at first. However, once clicked, it magically transformed into a Flash widget like this. The ...

htmlfacebookflashfacebook-opengraphgrooveshark

Is it necessary to create a separate animation class to trigger CSS keyframe animations based on scroll position?

My website has a background animation that controls various shapes, each with their own unique animation styles: animation: animShape 50s linear infinite; The speed of the animations varies depending on the shape being displayed. The animShape keyframes ...

htmljquerycss

Searching for the class _XWk using BeautifulSoup: A beginner's guide

I have discovered a way to locate Google's "quick answer box" by searching for the "_XWk HTML Element using the code below: from bs4 import BeautifulSoup # Beautiful Soup is part of the bs4 package import requests URL = 'https://www.google.com/ ...

pythonhtmlbeautifulsoupelementfindall

Is it possible to display partial html templates by accessing the local url and blending them with the main index.html file?

Is there a way to view partial HTML templates locally without copying them into the main index.html file? I'm looking for a solution that allows me to access my partial templates through a local URL without having to manually paste them into the main ...

javascripthtmlcssurl

Design buttons that are generated dynamically to match the style

I have a challenge in styling dynamically generated buttons. I've developed a component responsible for generating these dynamic buttons. const TIMER_PRESETS: Record<string, number> = { FIFTHTEENSEC: 15, THIRTYSEC: 30, FORTYFIVESEC: 45, ...

cssreactjstypescriptmaterial-uiclient-side

Ways to have the right sidebar seamlessly blend in with the page content by hovering over it rather than occupying a separate area

While working on the design of my website, I encountered a challenge with the sidebar. I aim to have a sidebar that hovers from the right side to the left, displaying the full content when the cursor is placed over it, much like the one featured on . Altho ...

htmlcsslaraveltwitter-bootstrap

What is the method for setting up vertical tabs?

Is it possible for someone to provide guidance on how to create vertical tabs for the HTML content below? When a tab, such as tab1 in the left column, is clicked, only the content of tab1 should be displayed in the middle column. The same applies for tab2 ...

jqueryhtmlcssjquery-ui

Using CSS sprites to style text links

I've been attempting to incorporate an image with various icons for text links in an unordered list, but I can't seem to display just one icon with some space next to it for the text. The code I have so far is: http://jsfiddle.net/XyVtq/2/ This ...

htmlcss

Does MySQL Workbench automatically convert camel case attributes?

I'm curious to understand something. I defined an attribute called userId, but in MySQL Workbench it shows up as user_id. Is this usual? @Id @GeneratedValue(strategy = GenerationType.IDENTITY) @Column(name= "userId") private ...

htmlmysqlspring-boothibernatemysql-workbench

Verifying internet connectivity and updating content using jQuery and JavaScript

Upon loading the page, the following functionality occurs without triggering a click event: The updated code attempts to determine if the internet connection is active. If the connection is off, the 'link' on the page will be disabled (non-click ...

javascriptjqueryhtmljquery-mobile

Dropping challenging shapes in a block-matching game similar to Tetris

I'm currently working on a game similar to Tetris, but with a twist. Instead of removing just one line when it's full, I want to remove all connected pieces at once. However, I've run into a roadblock when trying to implement the hard-drop f ...

javascripthtmlgame-physicstetris

Unlocking the power of dynamic text using a single form

My comment reply system is experiencing an issue where the first reply works fine, but subsequent replies are unable to get the reply text value. How can I ensure that all replies work properly based on the Razor code provided below? <h4>Comments< ...

javascriptjqueryhtmlajaxasp.net-mvc

Modify information on the user interface without the need to refresh the page

Is there a way to update data on the UI without having to refresh the screen in a web application built with Node.js? I'm looking to make only specific changes on the screen. Additionally, how can I ensure that the data displayed on the screen is upda ...

javascripthtmlnode.js

The Chartjs bar graph fails to display data upon initial page load

My HTML page includes a bar chart created using the ChartJS library. However, upon loading the page, the chart appears empty without displaying the data I provided and without rendering the bars. It only responds after clicking on the legend - first displa ...

javascripthtmljquerychart.js

How can I show the HTML text "<ahref>" in a UITextView on iOS?

Is there a way to show HTML tags like <a> in a textview? As an example, here is some code: Hello good morning <a href=\"1\">USER1</a> and <a href=\"13\">USER2</a> ...

htmliosattributestextview