How to set background image of body compatible with all devices and browser

Question

0.00/5 (No votes)

See more:

i have web page.In that i have added background image to body.The image is displaying properly in desktop but its not displaying in laptop and mobile.in small screen bottom of image is displaying half.

What I have tried:

body {

background: url("Blog-4-1400x699.jpg") no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

UPDATE:
Code from comments:

XML

<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Main.master.cs" Inherits="KarnatakaParcelViewer.Main" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head  runat="server">
     <title>Agriculture</title>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <%--  Bootstrap Css Files--%>
    <link href="jslogin/bootstrap/css/bootstrap.css" rel="stylesheet" />
    <link href="jslogin/bootstrap/css/bootstrap-theme.css" rel="stylesheet" />

      <%--  jqueryui Css Files--%>
    <link href="jslogin/jquery-ui/jquery-ui.css" rel="stylesheet" />
    <link href="jslogin/jquery-ui/jquery-ui.theme.css" rel="stylesheet" />
    <%-- Font-Awesome Css--%>
    <link href="jslogin/font-awesome/css/font-awesome.min.css" rel="stylesheet" />

    <%--  metisMenu css--%>
    <link href="jslogin/metisMenu/metisMenu.css" rel="stylesheet" />

    <%--Sb-Admin Css File--%>
    <link href="jslogin/sb-admin/css/sb-admin-2.css" rel="stylesheet" />

    <!-- HTML5 shim and Respond.js for 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="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->

    <%--Jquery.js file--%>
    <script src="jslogin/jquery/jquery-1.11.3.min.js"></script>
    <%-- Bootstrap.js file--%>
    <script src="jslogin/bootstrap/js/bootstrap.min.js"></script>
    <%--  Metismenu js file--%>
    <script src="jslogin/metisMenu/metisMenu.js"></script>
      <script src="jslogin/jquery-ui/jquery-ui.js"></script>
    <%-- SB-Admin.js file--%>
    <script src="jslogin/sb-admin/js/sb-admin-2.js"></script>

    <style>
        .gradient {
  background-image:
    linear-gradient(
      #4f7a93,#0f96e5
    );
}
        body {
          
            /*background-size:120% auto;        
            background-image:url("Blog-4-1400x699.jpg");
            background-repeat: repeat-x;*/
           /*background: url(Blog-4-1400x699.jpg) no-repeat center center fixed;*/
            -webkit-background-size: cover;
            -moz-background-size: cover;
            -o-background-size: cover;
            background-size: cover;
        }
        @media (min-width: 750px) {
            body {
                background: url("Blog-4-750x200.jpg") no-repeat center center fixed;
            }
        }

        @media (min-width: 1200px) {
            body {
                background: url("Blog-4-1200x550.jpg") no-repeat center center fixed;
            }
        }

        @media (min-width: 1400px) {
            body {
                background: url("Blog-4-1400x699.jpg") no-repeat center center fixed;
            }
        }
    </style>


    <asp:ContentPlaceHolder ID="head" runat="server">
    
</head>
<body>
    <form id="form1"  runat="server">
        <div class="container-fluid">
        <div class="row">
            <div class="col-lg-12">
                <div class="jumbotron gradient" style="padding:5px;margin:0px;border-radius:0;"/>
               <h4 style="color:#ffffff;font-family:  Verdana Arial;font-size:x-large;font-weight:600;">WELCOME TO AGRICULTURE WEB GIS PORTAL</h4>                </div>
                </div>

                <div>
                    <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
                    
                </div>
            </div>

    </form>
     <footer>
       <div class="col-md-2"></div>
        <div class="col-md-6">
      <%--  <h3 style="f</div>	<div id=" editdialogplaceholder"=""></h3></footer>

Posted 16-Mar-16 0:52am

Veena Hosur

Updated 16-Mar-16 23:16pm

Andy Lanng

v2

Add a Solution

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Andy Lanng · Answer 1 · 2016-03-16T01:11:00

Solution 1

You will have to specify media size in your css:

CSS

body{
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
@media (min-width: 750px){
 body {
   background: url("Blog-4-750x200.jpg") no-repeat center center fixed;
 }
}
@media (min-width: 1200px){
 body {
   background: url("Blog-4-1200x550.jpg") no-repeat center center fixed;
 }
}
@media (min-width: 1400px){
 body {
   background: url("Blog-4-1400x699.jpg") no-repeat center center fixed;
 }
}

That's the best way I have found to do it

Hope that helps ^_^
Andy

Posted 16-Mar-16 1:11am

Andy Lanng

Comments

Veena Hosur 17-Mar-16 1:42am

the above css is not working for me

Andy Lanng 17-Mar-16 4:59am

That doesn't really give me enough to go on

How doesn't it work?

Veena Hosur 17-Mar-16 5:14am

EDIT: Code from comment added to question

Andy Lanng 17-Mar-16 5:19am

Thanks for the code but you still haven't answered 'how'.

In the example I gave you you still needed to have create two new images of different sizes.

Veena Hosur 17-Mar-16 5:25am

i am not getting you

Andy Lanng 17-Mar-16 6:02am

Ok. I don't want to sound condescending so please bear with me:
You had a css the set the background image to be the file "Blog-4-1400x699.jpg". This was too big for small screens.
Shrinking the image is not the best idea because it will eventually become distorted.

In the code I gave you, it says that "If the page is wider then 1400px use the image Blog-4-1400x699.jpg". That is the image you have
it ALSO says
"If the page is wider then 1200px use the image Blog-4-1200x550.jpg"

I picked the image name out of the air. You need to create an image called Blog-4-1200x550.jpg that is 1200x550 (or whatever is best)

This is a CSS or Cascading Style Sheet. That means that the latest style is applied over the previous one, hence Cascading.

If the page is 1250px wide then "@media (min-width: 750px)" is true
but this is overridden by "@media (min-width: 1200px)", which is also true but is later in the CSS. In this case "@media (min-width: 1400px)" is not true so it is ignored.

So, here's what you need:
* You need a default style before the smallest media. I suggest no image as it will be too small to see anyway
* You need to set your own limits on the min-width. Maybe 750, 1200 & 1400 are good enough for you but I picked those numbers out of the air
* You need to create different sized images of the original (maybe you already have some?) and use those images in your css.

Please let me know if that has clarified the situation ^_^

Veena Hosur 17-Mar-16 6:32am

yeah i understood it but if i apply media its not displaying image

Andy Lanng 17-Mar-16 7:26am

do you have the other images?

Veena Hosur 17-Mar-16 7:40am

only one image i have

Andy Lanng 17-Mar-16 7:44am

Then you do not understand. Please read my long response. Especially the 3 points at the end