CODEWITHSUNDEEP
htmlcss
Steven
Steven

Reputation: 401

CSS fixed position while centering horizontally

I have the following css on an element in my html. It centers the image horizontally but its not at the bottom of the page where i need it to be. How do i change this css to keep it centered horizontally but make it position: fixed to the bottom?

background: url(loginv1.png)50% 50% no-repeat;
background-size: 75px 25px;
height: 40px;
width: 120px;
display: block;
margin: 0 auto;

Upvotes: 1

Views: 78

Answers (3)

JohanVdR
JohanVdR

Reputation: 2878

http://jsfiddle.net/Le7yP/15/

div {
  background: url(http://snag.gy/z01qo.jpg) 50% 50%/75px 25px no-repeat;
  height:40px;
  width:120px;
  position:fixed;
  bottom:0;
  left:50%;
  margin-left:-60px;
}

Upvotes: 1

John Bupit
John Bupit

Reputation: 10618

Try this:

background: url("loginv1.png") center bottom no-repeat;

This will place the background image at the center horizontally, and at the bottom vertically.

Fiddle

Upvotes: 1

Soturi
Soturi

Reputation: 1496

The background positioning format is:

background: url("...") horizontal vertical;

Therefore, specify your background as follows:

background: url("loginv1.png") center bottom no-repeat;
background-size: 75px 25px;

Here is a JSFiddle example.

Upvotes: 1

Related Questions