1

So hopefully someone can help.

I'm trying to create a page within a site that will be have a background image that fills its <div>. I added this code: 

<style type="text/css">


.myclassdiv {
    background-image:url('IMAGEURL');
    background-repeat:no-repeat;
    background-size:100% 100%;
}
</style>


<div class="myclass">
  TEXT OVER IMAGE
</div>

However when viewing it, it only shows a slither of the image along the height of the text. How do I get it to show the whole image size? and then how do it make it responsive?

Mr Lister
  • 45,515
  • 15
  • 108
  • 150
Sam Allen
  • 589
  • 4
  • 6
  • 16

2 Answers2

0

Two things may be going on. First, you may be looking for:

background-size:cover;

Check http://www.w3schools.com/cssref/css3_pr_background-size.asp for more information on background sizes. The 100% 100% you are using will do 100% of the image width.

Second, your div is only going to be the height of what is in it, so as of right now, it will only be the height of the line, "Text over image". Look at This SO article for information on adjusting height of div's when their content is not that large.

Community
  • 1
  • 1
Jeff.Clark
  • 599
  • 1
  • 5
  • 27
0

Use 100vwfor your width and height with meaning sizing your image as 100% of the view port, so your image will scale as your view-port size.

Live example, please re-size your browser window to see the effect: https://jsbin.com/haxokemire/edit?html,output

You can also achieving a similar effect using background-size:cover; (But please note it is not the same).

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8" />
    <style type="text/css">
        body {
            padding: 0;
            margin: 0;
        }

        .myclass {
            background-image: url('https://upload.wikimedia.org/wikipedia/commons/5/5d/White-headed_Buffalo-weaver_Dinemellia_dinemelli_Perched_2000px.jpg');
            background-repeat: no-repeat;
            width: 100vw;
            height: 100vw;
            background-size: 100% 100%;
        }
    </style>
</head>
<body>
    <div class="myclass">
        TEXT OVER IMAGE
    </div>
</body>
</html>
GibboK
  • 71,848
  • 143
  • 435
  • 658