CODEWITHSUNDEEP
css
user4082764
user4082764

Reputation:

background-image with css

Why the background image not working with

DEMO

HTML

<div class="container" style="background-color: red;"></div>

CSS

.container {
  width: 100%;
  height: 385px;
  background-image: url(http://fc08.deviantart.net/fs71/i/2013/082/a/c/png_grass_by_moonglowlilly-d5z1o5t.png);
  background-position: center top;
  background-size: 100% auto;
  background-size: cover;
  border-bottom: 1px solid #3f4858;
  background-repeat: repeat-x;
  left: 0px;
  top: 0px;
}

Upvotes: 0

Views: 137

Answers (4)

Arun P K
Arun P K

Reputation: 58

The image is of size 1024x819px and the grass is starting from 232px from top so you need to position your background image or change your div.container size so as to fit the image within the given size.

Demo-1 with container size changed:

Demo-1

Demo-2 with image position changed with your code snippet only.:

Demo-2

just notice background-position I have changed to 0px -232px;

Upvotes: 1

Sharique Hussain Ansari
Sharique Hussain Ansari

Reputation: 1456

Try This:

.container{
  width:300px;
  height:385px;
  background-image:url('http://fc08.deviantart.net/fs71/i/2013/082/a/c/png_grass_by_moonglowlilly-d5z1o5t.png');
	background-position: center top;
  background-size: 100% auto;
	background-size:cover;
	border-bottom:1px solid #3f4858;
	background-repeat:repeat-x;
	left:0px;
	top:0px;
}
<div class="container" style="background-color:red;">

Upvotes: 1

DaniP
DaniP

Reputation: 38252

Apart from the already mentioned spelling error

The problem here is with the size of your container and the size of your background image. Your image has a lot of space on top and you will see nothing for the size of you container. Check if you change the background-size property to:

background-size: 100% 100%;

Demo

For the porperty background-size you can also use contain:

the background image should be scaled to be as large as possible while ensuring both its dimensions are less than or equal to the corresponding dimensions of the background positioning area

AnotherDemo

Upvotes: 3

Legionar
Legionar

Reputation: 7597

Your width: 100% depends on width of parent element. And its not set. Thats why. So change your CSS to this:

.container{
  width:300px;
  height:385px;
  background-image:url(http://fc08.deviantart.net/fs71/i/2013/082/a/c/png_grass_by_moonglowlilly-d5z1o5t.png);
  background-position: center top;
  background-size: 100% auto;
  background-size:cover;
  border-bottom:1px solid #3f4858;
  background-repeat:repeat-x;
  left:0px;
  top:0px;
}

Also why you have in your HTML style="background-color:red;"? Do you want to have as background image png_grass_by_moonglowlilly-d5z1o5t.png or red color? Or you want to have in transparency of that PNG image red color?

DEMO

Upvotes: 0

Related Questions