Choose a background image optimized for either mobile or desktop devices

My webpage displays a background image and text on the footer, which works perfectly for desktop users. However, mobile users are experiencing issues with the image not resizing to fit their screen size.

Below is my CSS code:

body {
    margin-top: 50px;
    margin-bottom: 50px;
    background: none;
}

.full {
  background: url('../1_v3.png') no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size:cover;
}
.navbar-header {
    float: left;
    padding: 15px;
    text-align: center;
    width: 100%;
}
.navbar-brand {float:none;}

And here is the HTML file:

<!DOCTYPE html>
<html class="full" lang="en">

<!-- Rest of the HTML code -->

Is there a CSS trick to automatically resize the background image based on the user's device screen size?

P/s : The image has a resolution of 2536x1420 pixels.

androidjqueryhtmlcsstwitter-bootstrap

Answer №1

To control the positioning of an image in your media query, you can specify the background position accordingly.

For a live example, visit

You're welcome to experiment with it using the inspector tool on my website.

Alternatively, here's the code snippet for your reference (best viewed in Chrome):

    <html>
<head>
<link rel="stylesheet" type="text/css" href="index.css">
</head>
<body>
  <div class='stretch'>

  </div>
</body>
</html>

CSS

    .stretch {
  background-image: url("http://hubenterprises.com.mx/github/bg.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 100% 100%;
  width: 100vw;
  height: 100vh;
  outline: 1px solid;
}
body {
  margin: 0;
}

@media only screen and (max-width: 500px) {
    .stretch {
      background-position:50% 50% ;
    }
}

Answer №2

  1. Avoid using HTML elements for styling purposes.
  2. It is not advisable to apply margin to the body element in order to position your content.
  3. If you are applying a 100% width and padding to an element, don't forget to include the (box-sizing: border-box;) style rule.

body {
  margin:0;
  background: url('https://pixabay.com/static/uploads/photo/2016/01/12/19/16/painting-1136443_1280.jpg') no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
.navbar-header {
  float: left;
  padding: 15px;
  text-align: center;
  width: 100%;
  background: rgba(255,255,255,0.4);
  box-sizing: border-box;
}
.navbar-brand {
  float: none;
}
<!-- Navigation -->
<nav class="navbar navbar-inverse navbar-fixed-bottom" role="navigation">

  <div class="container">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <a class="navbar-brand"> TEXT HERE</a>
    </div>
    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
    </div>
    <!-- /.navbar-collapse -->
  </div>
  <!-- /.container -->
</nav>
<!-- /.container -->

<!-- jQuery -->
<script src="js/jquery.js"></script>

<!-- Bootstrap Core JavaScript -->
<script src="js/bootstrap.min.js"></script>

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

Maximizing the potential of website positioning properties

<head> <style> .body { margin: 0 0 0 0; .navigation { background-color: lightyellow; width:100%; height:20%; position:fixed; } .slider{ position: absolute; top:20% height:60%; width:100% ba ...

csspositioninghtml

When a user clicks a button, modify a section of the URL and navigate to

I've been searching everywhere for a solution to this issue, but I just can't seem to find it. I'm hoping someone here can help me out. In a bilingual store, I need a way to redirect users to the same product on a different domain when they ...

javascriptphpjquery.htaccess

An array of deferred objects in a jQuery `$.when()` function

Currently, I am facing an issue with passing a variable amount of deferred functions to $.when. In order to accomplish this, the functions need to be packed in an array. Although I have attempted the solutions provided in this post and this one, the done a ...

javascriptjqueryajaxjquery-deferred

Using jQuery to initiate a function with specified parameters upon clicking

Whenever I click on one of the buttons, it gives me an error saying that showElement is not defined. My goal is to establish a reusable function named showElement that can be utilized to display a div by passing in the id of that specific div. Can someone ...

jquery

Varied positioning for various elements within a singular table row

I would like my HTML table to have a specific layout and style. Here is a reference image of how I want it to look: Table The main requirement is for the content/phone number to be centered within each table row, with an edit icon positioned to the right ...

htmlcssdombootstrap-4

Reveal a concealed div upon submitting an HTML form to display the resulting output

I have created an HTML form to gather information about a person's name and location. Once the user submits the form, I want the output to be displayed at the bottom of the page using PHP echo. My specific requirement is, To initially hide the outp ...

javascriptphphtmljqueryjquery-events

Tips for verifying the input field with specific requirements in Angular 6

There is an input field that needs to validate text based on certain logic conditions: No spaces should be allowed in the formula. The operators (and,or) must be lowercase and enclosed in curly brackets {}. The number of opening '(&apos ...

javascriptjqueryangularregex

Utilizing jQuery's multiselect feature in the user registration form of a web2py website

Is there a way to incorporate jquery.multiselect.js into the db.auth_user table or default/user/register page? I have been trying to figure it out, but not sure how to modify the html page or controller to make it work. auth.settings.extra_fields['au ...

jqueryweb2py

What makes drag and drop noticeably more fluid when including "overflow: auto"?

I'm currently working on a website's CMS and I want to create an index that allows for drag-and-drop selection. Initially, dragging and dropping on a placeholder wasn't very smooth. However, when I added the overflow: auto CSS property to th ...

javascriptjquerycss

Leveraging the power of jQuery Validation in conjunction with Bootbox

I am currently facing an issue with integrating the jQuery validation plugin with bootbox.js (modals). The modal contains a form with fields that require validation. To showcase my problem, I have set up a jsFiddle here: http://jsfiddle.net/rDE2q/ Upon ...

javascriptjqueryhtmlvalidationbootbox

I am looking for a single-page website that I can access after refreshing the page at a specific point

I recently created a one-page website with a div called sitecontent that has a width of 4400 pixels, housing four distinct "pages". These pages are located at intervals of 0px, 1100px, 2200px, and 3300px within sitecontent. To ensure the correct text is d ...

javascriptjqueryhtmlcsssinglepage

Show a message notifying the user of an incorrect password input

Hey there, currently I have a script set up which logs into live.com in this manner: WebBrowser1.Document.GetElementById("login").SetAttribute("value", txtUsername.Text) WebBrowser1.Document.GetElementById("passwd").SetAttribute("value", txtPass ...

htmlvb.netauthenticationcredentialsaccount

Creating a CSS grid with images: Ensuring row height adjusts to content size (image) in Chrome and Firefox comparison for accurate rendering

I'm encountering a CSS problem. While Firefox is showing the content as I want it, Chrome seems to be collapsing the grid and not displaying the image at its expected height. My goal: The image should take up maximum space without exceeding the colum ...

htmlcssgoogle-chromefirefoxgrid

Steps for choosing the nth HTML row with jQuery

I'm facing a situation where I need to be able to select the nth row of an HTML table based solely on the id of the selected row. You can see exactly what I mean by checking out this JSFiddle Demo <table class="mytable1"> <tr><td i ...

javascriptjqueryhtml

Guide on displaying JSON information upon clicking using JavaScript

I'm having difficulty writing the logic for this code. I have extracted data from a vast API. The current code fetches all program titles (some may be repeated) and compares them with an array of late night shows, then displays them once in their own ...

javascripthtmlarraysjsonget

Understanding the Camera's View in Three.js

I am currently developing a game using html5 and THREE.js, where I have implemented a camera that rotates with the euler order of 'YXZ'. This setup allows the camera to rotate up, down, left, and right – simulating a first person view experien ...

javascripthtmlvectorthree.js

Mastering the Art of Modifying HTML with Node.js

Is it possible to manipulate HTML using Node.js? 1. First, I need to retrieve data from a database. 2. Then, I need to modify or add HTML code within Node. In essence, the goal is to fetch data and integrate it into an HTML file. The JavaScript snippet ...

javascripthtmlnode.js

Mysterious additional spacing

I am facing an issue with aligning my div elements with a 20px margin. Despite setting the margin to 20px, I notice that there are additional 4 pixels rendered when I view it on the browser. Below is the code snippet: .block{ width:50px; height:50 ...

htmlcss

Ensure that the WebRTC video stream content is centered when displaying a tall video on a wide screen

Currently, I am encountering an issue while making a webrtc video call between a mobile device in portrait mode and a laptop. The streams from the mobile and the laptop have different aspect ratios, causing challenges when trying to display the video fulls ...

javascripthtmlcsshtml5-videowebrtc

Is there a way to properly direct to an internal page while utilizing [routerLink] and setting target="_blank" without triggering a full page reload?

I'm attempting to use [routerLink] along with target="_blank" to direct to an internal page without triggering a full app reload. Currently, the page opens in a new tab, but the whole application is refreshed. Here is the HTML: <a [routerLink]=" ...

javascriptangularhtmlangular6