RobbNesp RobbNesp - 1 year ago 83
CSS Question

Background image based on mobile or desktop

I created a webpage that only display background image and text on footer that worked great for desktop user visitor but for mobile user visitor the image are not auto resize to they screen size.

Here this is my css

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;
.navbar-header {
float: left;
padding: 15px;
text-align: center;
width: 100%;
.navbar-brand {float:none;}

And this is the html file:

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

<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">

<title>TEXT HERE/title>

<!-- Bootstrap Core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">

<!-- Custom CSS -->
<link href="css/the-big-picture.css" rel="stylesheet">

<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src=""></script>
<script src=""></script>



<!-- 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>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<!-- /.navbar-collapse -->
<!-- /.container -->
<!-- /.container -->

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

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



Are there is any css trick to resize the background image based on user device screen size?

P/s : My image are size 2536x1420 resolution

Answer Source

Here is a working example of how you can achieve this.

In your media query you can specify the background position so that the image displays where you want it.

Here is a working example

Feel free to play with it in the inspector on my webpage.

Or here is the code for you (viewing in chrome)

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



    .stretch {
  background-image: url("");
  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% ;
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download