CODEWITHSUNDEEP
htmlcss
troyster
troyster

Reputation: 1

Background_position not working

I can't get background-position to work. I've tried putting the code everywhere I can think of!!! Any ideas??? Thanks

http://codepen.io/anon/pen/ogPrxV

My html is

<div class="container">
      <div class="inner"></div>
</div>

My css is 

.container {
    width: 80%;
    background-color: red;
    background-position: center;
    text-align: center;
}

.inner {
    border: 1px solid;
    height: 160px;
    width: 320px;
    background-position: 50% 50%;
    background: green url("welcome-small.png") no-repeat;
}

Upvotes: 0

Views: 46

Answers (6)

troyster
troyster

Reputation: 1

Sorry- I didn't see your answers - the site didn't email me when I got a response so I didn't realise (I got an answer elsewhere)!!!

Basically - what I needed was margin: auto (because I have a div nested within a div). It is easy when you know how!!! ;-)

Thanks for your help guys. Dayan was right on the money!!!

Upvotes: 0

Abhisek Dutta
Abhisek Dutta

Reputation: 1

.inner {
    border: 1px solid;
    height: 160px;
    width: 320px;
    background: green url("welcome-small.png") no-repeat;
    background-position: 50% 50%;

}

Upvotes: 0

Paulie_D
Paulie_D

Reputation: 114991

The background property is shorthand for all background properties. It overides any previously stated individual properties already set.

Perhaps the simplest solution here is just to move the background position setting to after the shorthand

.inner {
    border: 1px solid;
    height: 160px;
    width: 320px;
    background: green url("welcome-small.png") no-repeat;
    background-position: 50% 50%;
}

Upvotes: 1

Naeem Shaikh
Naeem Shaikh

Reputation: 15715

your background property rewrites the background-position, see this Fiddle This is because background will also set the background-position to 0 0 by default.

.inner {
    border: 1px solid;
    height: 160px;
    width: 320px;

    background: green url("http://images.visitcanberra.com.au/images/canberra_hero_image.jpg") no-repeat;
    background-position: 20% 50%;
}

just take the background-position property below background property

Also if you want the inner to be horizontally in the center use margin-auto: fiddle

.container {
  width: 80%;
  background-color: red;
  background-position: center;
  text-align: center;
}
.inner {
  border: 1px solid;
  height: 160px;
  width: 320px;
  margin: auto;
  background: green url("http://images.visitcanberra.com.au/images/canberra_hero_image.jpg") no-repeat;
  background-position: 20% 50%;
}
<div class="container">
  <div class="inner"></div>
</div>

Upvotes: 1

Dayan
Dayan

Reputation: 8031

Make use of margin to center your container and remove the extra background property you have.

.container {
    width: 80%;
    background-color: red;
    text-align: center;
    margin: 0 auto;
}

Here is your updated codepen that shows it centered. http://codepen.io/anon/pen/QwVXGv

Upvotes: 1

Aaron
Aaron

Reputation: 10430

You're using shorthand for the background image so you should include the position within the background: style.

.inner {
    border: 1px solid;
    height: 160px;
    width: 320px;
    background: url("welcome-small.png") no-repeat 50% 50% green;
}

Upvotes: 1

Related Questions