2

I'm having an issue trying to use the background-size:cover; in css.

To explain:

When I have one div of width 100% and fixed height, when I control+ and control- in browser, the background image of that div is not fitted inside the div, it changes( a zoom in/out effect if I can say it like this ).

If I have a div of 100% width and another div( child of the first ) with fixed width and height and I set the background image with background-size: cover, that zoom in/out effect does not work.

I hope I explained OK, but let me show the problem in code.

<html>
<head>
<title>Test</title>
<style>
body
{
    background:red;
}


.test
{
    width: 100%;
    height: 300px;
    background-image: url( 'http://bhodbuzz.com/wp-content/uploads/2015/06/6924750-mountain-wallpaper.jpg' );
    background-size: cover;
}

.test2
{
    width: 100%;
    margin: 0px auto;
}

.inner
{
    margin: 0px auto;
    width: 900px;
    height: 300px;
    background-image: url( 'http://bhodbuzz.com/wp-content/uploads/2015/06/6924750-mountain-wallpaper.jpg' );
    background-size: cover;
}
</style>
</head>
<body>
<div class="test"></div>
<div class="test2"><div class="inner"></div></div>
</body>
</html>

How to fix the problem ?

Mahdi Zarei
  • 5,644
  • 7
  • 24
  • 54
Adi Pîslaru
  • 139
  • 2
  • 13
  • Zooming works for me on Firefox. What browser are you checking on, or what exactly do you mean by "not working". – TylerH Sep 02 '15 at 14:20
  • read the answer below my post. – Adi Pîslaru Sep 02 '15 at 14:26
  • You should still clarify what you mean in your question. – TylerH Sep 02 '15 at 14:29
  • I clarified in my example, Adam understanded. I dont know a better explaination. – Adi Pîslaru Sep 02 '15 at 14:30
  • A better explanation would be explaining what you mean by "does not work". What, *exactly*, happens that makes you come to the conclusion "this doesn't work"? Is the zoom function broken? Does the image disappear? Does it turn into a unicorn? Etc. – TylerH Sep 02 '15 at 14:32

2 Answers2

0

The thing is that your first div changes it's width depending on window size, so it zooms in/ zooms out your background image to fill the div. Your div test2 has a fixed width, so the background won't 'zoom in' unless the background image is smaller than the div. I see the image you're using is full HD size and your div is just 900px wide. Take a look at the snippet below, used smaller image 

<html>
<head>
<title>Test</title>
<style>
body
{
 background:red;
}


.test
{
 width: 100%;
 height: 300px;
 background-image: url( 'http://asset-d.soupcdn.com/asset/12360/7926_dcea_500.jpeg' );
 background-size: cover;
}

.test2
{
 width: 100%;
 margin: 0px auto;
}

.inner
{
 margin: 0px auto;
 width: 900px;
 height: 300px;
 background-image: url( 'http://asset-d.soupcdn.com/asset/12360/7926_dcea_500.jpeg' );
 background-size: cover;
}
</style>
</head>
<body>
<div class="test"></div>
<div class="test2"><div class="inner"></div></div>
</body>
</html>
Adam Kosmala
  • 925
  • 6
  • 9
0

No need to use width in your class.

<html>
<head>
<title>Test</title>
<style>
body
{
 background:red;
}


.test
{
 
 height: 300px;
 background-image: url( 'http://asset-d.soupcdn.com/asset/12360/7926_dcea_500.jpeg' );
 background-size: cover;
}

.test2
{
 
 margin: 0px auto;
}

.inner
{
 margin: 0px auto;
 width: 72.2%;
 height: 300px;
 background-image: url( 'http://asset-d.soupcdn.com/asset/12360/7926_dcea_500.jpeg' );
 background-size: cover;
}
</style>
</head>
<body>
<div class="test"></div>
<div class="test2"><div class="inner"></div></div>
</body>
</html>
Lemon Kazi
  • 3,308
  • 2
  • 37
  • 67