Austin Hunter Austin Hunter - 2 months ago 9
Android Question

Background Image to take up the entire screen

I have done my research and I can't seem to get anything working. Here is my html:



<body ng-app="starter">
<ion-pane>
<head>
</head>
<ion-content>
<body>
<img src="resources/img.png">
</body>
</ion-content>
</ion-pane>
</body>





my image shows up but it is not full screen. It also cut off a little bit. So I need the image to take up the entire screen with no repeats and no loss of anything in the image. Can anyone help me out with getting this to work?

Answer

Is this the HTML after rendering, or is it from your editor?

  • We would be grateful if you could show us a print-screen of your app-page, and your HTML after being rendered by the browser!

    - Will this app just run in some sort of fixed resolution/screen? If not, I don't think that having a cropped image just to feet your screen is a good solution, since there are many other screens with different resolutions out there, and if you want a background to cover them all then it will certainly be cropped at certain resolutions/screens.

Taking this into account, you have a couple of options to create a full size background for any type of screens/resolutions.

You can create a centered background that will always feet a certain screen, no matter how bigger it is nor how small the image is, with just two CSS rules:

.app-background {
    position: fixed;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    overflow: hidden;
}

.app-background > img {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    min-width: 50%;
    min-height: 50%;
}

.app-background will be the wrapper of the background and will have:

- position: fixed; in order to maintain its position, in case of one of the parent elements having an horizontal/vertical scrollbar;

- top/left: -50%; width/height: 200%; to center it and to make it twice the size of its parent/screen; (now your image has a parent where it can be centered);

- overflow: hidden; just to crop the image inside of it.

.app-background > img will be the image serving as a background and will have:

- position: absolute; top/right/bottom/left: 0; margin: auto; to center the image horizontally and vertically inside the .app-background;

- min-width/min-height: 50% to prevent the image from being smaller than 100% of the container's resolution/screen size.

The Concept (view it in full screen)

html, body {
  width: 100%;
  min-width: 100%;
  height: 100%;
  min-height: 100%;
  margin: 0;
}

body > ion-pane,
body > ion-pane > ion-content {
  width: 100%;
  height: 100%;
}

.app-background {
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  overflow: hidden;
}

.app-background > img {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  min-width: 50%;
  min-height: 50%;
}


/* Instructions below this comment are NOT needed for the solution */
body {
  font-family: Calibri, Arial;
  text-align: center;  
}

body:before {
  content: '';
  height: 100%;
  display: inline-block;
  vertical-align: middle;
  margin-left: -0.25em;
}

*, .border-box {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.app-container {
  position: relative;
  border: 2px solid red;
  color: red;
  display: inline-block;
  vertical-align: middle;
  width: 40%;
  height: 40%;
}

.app-background {
  border: 2px solid purple;
  color: purple;
  z-index: -1;
}

.app-container:before,
.app-background:before {
  content: '.app-background';
  font-size: 25px;
  display: block;
  padding-bottom: 10px;
}

.app-background > img {
  opacity: 0.5;
  z-index: -1;
}
<div class="app-container">
  <b>This red box is what you will see in your screen.</b>
  
  <div class="app-background">
    This purple box is where your image will be centered and cropped.
    
    <img src="https://static.vecteezy.com/system/resources/previews/000/094/491/original/polygonal-texture-background-vector.jpg">
    
    <b>Feel free to zoom-in/out your browser to see the effect from different resolutions!</b>
  </div>
</div>

Please click on full page button

The Solution (view it in full screen)

html, body {
  width: 100%;
  min-width: 100%;
  height: 100%;
  min-height: 100%;
  margin: 0;
}

body > ion-pane,
body > ion-pane > ion-content {
  width: 100%;
  height: 100%;
}

.app-background {
  position: fixed;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  overflow: hidden;
}

.app-background > img {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  min-width: 50%;
  min-height: 50%;
}
<body ng-app="starter">
  <ion-pane>
    <head>
    </head>
    <ion-content>
      <body>
        <div class="app-background">
          <img src="https://static.vecteezy.com/system/resources/previews/000/094/491/original/polygonal-texture-background-vector.jpg">
        </div>
      </body>
    </ion-content>
  </ion-pane>
</body>

Please click on full page button