What is the best way to adjust the background image to perfectly fit the size of a phone screen

My background image on my desktop is responsive and fits perfectly, but when I open it on my mobile device, the image is zoomed in. How can I fix this? Here is my current CSS code:

.welcome-area{
    background-image: url(../images/13/Dr-Teals-Banner.jpg);
  background-repeat: no-repeat;
  background-position: center center;
  background-attachment: fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  min-height: 100vh;
  }

This is my HTML Code:

 <section class="welcome-area text-center" data-scroll-index="1">
          <div class="overlay-bg-65 flex-center med-padding">
              <div class="container">
                  <div class="welcome-text">
                      <img src="images/logo-animation/logo.gif"><br><br><h5 class="color-ddd fw-400">DR TEAL'S</h5>
                      <h1 class="mb-20px color-fff fw-100 cd-headline clip">

                          <span class="cd-words-wrapper">
                              <b class="is-visible color-gold">Graphic Designer</b>
                              <b class="color-gold">Branding</b>
                              <b class="color-godl">Print</b>
                              <b class="color-gold">Photography</b>
                              <b class="color-gold">Digital</b>
                          </span>
                      </h1>
                      <h6 class="color-ddd fw-400 mb-30px">2019-Present</h6>
                      <a href="https://instagram.com/edisson.alberto/" class="color-fff color-blue-hvr mr-15px"><i class="fa fa-instagram"></i></a>
                      <a href="https://www.linkedin.com/in/edissonhidalgo" class="color-fff color-blue-hvr"><i class="fa fa-linkedin"></i></a>
                  </div>
                  <a href="#" class="color-fff fs-35 p-absolute scroll-bottom-btn" data-scroll-nav="2"gt;<i class="fa fa-angle-down"></i> </a>
              </div>
          </div>
      </sectio
htmlcssbootstrap-4

Answer №1

By setting the min-height:100vh, you ensure that it always fills the full height, causing the picture to zoom in.

To maintain proportional scaling of the image, set the width: 100%.

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

The DIV container refuses to line up properly

Despite my best efforts, I have not been able to align these 4 boxes properly after going through documentation, tutorials, and examples. div#frontpage{width:100%; } div#1{width:25%; float:left; position:relative;} div#2{width:25%; float:left; position:re ...

csshtmlcss-float

Step-by-step guide to automatically submitting a form after obtaining geolocation without the need for manual button-clicking

I am looking for a way to automatically call a page to get geolocation data, and then submit the form to my PHP page with the values of getlat and getlon without the need to click a submit button. I have tried implementing the code below, however, despit ...

javascriptphphtmlgeolocation

The button fails to trigger the opening of the modal when clicked

When I click a button, I am attempting to trigger a modal from another component. Below is the code for the modal component: import { Component, OnInit } from '@angular/core'; import {NgbModal, ModalDismissReasons} from '@ng-bootstrap/ng-b ...

angularbootstrap-4

What is the best way to implement multiple store filters in VueJS?

Just dipping my toes into the world of VueJS with my very first major project. I've incorporated 2 filters in this project for my elements - one is a search bar and the other involves checkboxes. Taking a look at my code, you'll notice a computed ...

javascripthtmlvue.js

Having trouble with SCSS styles not being applied after refactoring to SCSS modules?

Currently, I am in the process of restructuring an application to ensure that component styles are separated from global styles using CSS modules. However, I have come across an issue where the styles are not being applied correctly. The original code sni ...

javascriptcssreactjssassnext.js

Modify the alignment and orientation of the data within RadHtmlChart

I have a chart: <telerik:RadHtmlChart ID="chrtInvestmentAmount" runat="server" Transitions="true" DataSourceID="SqlDataSource1" Height="256px" Skin="Glow" Width="1024px" RenderMode="Auto"> <PlotArea> <Series> ...

htmlasp.nettelerik

I have attempted to utilize Bootstrap by downloading it locally, but unfortunately, it is not functioning as

I'm facing an issue with Bootstrap while running it locally - it's not working. However, when I use the CDN link, it works perfectly fine. Can someone assist me in resolving this problem? <!DOCTYPE html> <html lang="en"> < ...

htmlcssbootstrap-4

Getting rid of the <br> tag as well as the linked <span> element

I've been experimenting with creating dynamic forms. My latest project involves a text box, an 'Add' button, and a div. The idea is that whenever a user types something into the text box and clicks the Add button, that value should appear in ...

javascriptjqueryhtmlcss

What is the proper usage of main.js and main.css within the skeleton portlet project that is created by the Liferay 6.0.6 plugin SDK?

Is it a good practice to include portlet-specific JS or CSS in them only if <portlet:namespace /> works within them? Should I rely on unique function/variable names or class names instead? ...

javascriptcssliferayliferay-6

Navigate to a specific moment in an HTML5 audio track by clicking on the progress bar

<html> <head> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script> <script> $(document).ready(function(){ var counter = 0; ...

javascriptjqueryhtmlaudio

The CSS styles for a:link, a:active, and a:visited do not seem to work with

My page contains the following CSS rule: a:link,a:active,a:visited{text-decoration:none;} I have encountered an issue where this rule is not working as expected. To apply the rule within a div with the id="test", I had to modify the rule like this: #tes ...

csscss-selectorsanchor

Populate HTML dropdown menu with data from an external JSON file

I'm attempting to populate a HTML Dropdown menu with information from an external JSON file, which consists of the following { "Destinations": [ { "destinationName": "London", "destinationID": "lon" }, { "dest ...

jqueryhtmljsonhtml-select

Angular's nested arrays can be transformed into a grid interface with ease

I am looking to generate a grid template from a nested array. The current method works well if the elements naturally have the same height, but issues arise when values are too long and some elements end up with different heights. <div id="containe ...

cssangularlayoutcss-gridngfor

Displaying HTML content using Typescript

As a newcomer to typescript, I have a question regarding displaying HTML using typescript. Below is the HTML code snippet: <div itemprop="copy-paste-block"> <ul> <li><span style="font-size:11pt;"><span style="font-family ...

javascripthtmltypescript

Is there a way for me to use jQuery to load an external HTML file containing <img> tags and display it only after everything has finished loading?

I am encountering an issue with loading external HTML and images. My goal is to load an external html file (examplework.html) into an overlay-div, and only display it once the loading process is complete. The current scenario is as follows: On a Click-Ev ...

jqueryhtml

Changing the Size of a Youtube Video Based on the Width of a DIV Element

When embedding a Youtube video iframe, it is important to ensure that it scales according to the width of the containing div. The width of the div can vary depending on the layout of the page snippet. The aspect ratio of the Youtube video is 560/315, widt ...

htmlcssyoutube

Efficiently populating a dataTable with data using ajax

Here is the code I am using to load a data table: $(".dataTable").dataTable({"bProcessing": true, "sAjaxSource": "datatable"}); This file contains the data for the datatable: return '{ "aaData": [ [ "row 1 col 1 data", "row 1 col 2 data", "row 1 ...

jqueryhtmlajaxdatatables

Unable to assign the value of 'innerHTML' to a null property during an AJAX request

I have searched through numerous articles on this site, but I haven't been able to find the solution I'm looking for. Every time I click a cell in my custom div table, I receive the frustrating message "Cannot set property 'innerHTML' ...

javascriptphphtmlajax

Displaying Laravel CSS on the title tag

Why won't Laravel detect my code properly? It seems that Laravel is treating it as regular text instead of a function when it is within the title tag. <link href="{{asset('public/css/style.css')}}" rel="stylesheet"/> Take a look at ...

csslaravel

Can Socket.IO link to a source tag that doesn't actually exist?

As I was following the 'Get started thing' tutorial on Socket.IO, I encountered a step that required me to add the socket.io.js script to my HTML page. The instruction provided was: /socket.io/socket.io.js However, when I checked my folders, I ...

javascripthtmlnode.jsexpresssocket.io