3

The background-size: cover property makes the image take the entire screen but it maintains the aspect ratio so only a portion of the image is seen on bigger screens. How can I make it ignore aspect ratio so that the image takes up the entire screen AND the entire image is visible?

HTML:

<html>
<head>


<link href="styles.css" rel=stylesheet>

 <title>
 Enjoy ;)
 </title>
</head> <script type="text/javascript" src="getBG.js"></script></head>
 <body>

    <div class="intro">
        <div class="textbg">
    <div class="introText">
     Welcome to PicShare
     </div>

     <div class="introDesc">
        Today's theme is 
     </div>
     </div>
    </div>



<div class="back"> </div>

<div class="bg1" onclick="genBg()"><script>genBg()</script></div>




 </body>

</html>

CSS:

html{
margin: 0px;
height: 100%;
}

body{
height: 100%;
margin: 0px;
background-color: #424242;

}

.intro{           //want this background to take up entire screen 
    height:100%;
    background-color: #424242;
    background-image: url("assets/themes/theme1.jpg"); 
    background-repeat: no-repeat;
    background-size:  cover;
    }
MinorityDev
  • 75
  • 2
  • 9

2 Answers2

4

You do that with background-size: 100% 100%, which means 100% of the width and height of the background area respectively.

BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
1

You have the option to set the background-size property to the following:

  • cover
  • percentages or pixels (#% #% / #px #px)
  • contain
  • etc

cover will allow you to scale the image to cover the entire body, while contain will only scale the image enough so that the full image is still visible.

HTML

<div id="a"></div>
<div id="b"></div>
<div id="c"></div>
<div id="d"></div>

CSS

div {
  margin-top: 12px;
  width: 400px;
  height: 50px;
  outline: 1px solid #000;
  background-image: url(http://i.magaimg.net/img/1h5k.png);
  background-position: center center;
  background-repeat: no-repeat;
}

#a {
  background-size: cover;
}
#b {
  background-size: 100% 100%;
}
#c {
  background-size: contain;
}
#d {
  /* Nothing */
}

https://jsfiddle.net/ef8cszhw/

cola
  • 36
  • 4