CODEWITHSUNDEEP
javascriptjqueryhtmlcssbackground-image
Droïdeka
Droïdeka

Reputation: 47

Vertically center background image

I am trying to vertically center my background in a div. I made a schema for a better comprehension:

This is what i have for now :

enter image description here

The only problem as you can see, is that the image is taller than the div.

I don't want to resize the image, but just want to the image to be centered within the div.

I have made a second image to explain : enter image description here

I tried vertical-align:center but it didn't work either.

I can't post the jsfiddle because i havn't the reputation to post more than two link... I post it on the comment.

Upvotes: 1

Views: 79

Answers (2)

Shashank
Shashank

Reputation: 1135

Try doing this background-attachment : absolute;

OR

Simply remove this code background-attachment : fixed;

Upvotes: 1

joopmicroop
joopmicroop

Reputation: 921

There is a css property named background-position. background-position takes a x and y value so if you set your background position in your case to 0% 50%. This will move the background position 0% to the right and 50% down (center).

background-position:0 50%;

jsfiddle example

While you are at it also take a look at background-size, background-size has some handy properties 'cover', 'contain'.

cover

Scale the background image to be as large as possible so that the background area is completely covered by the background image. Some parts of the background image may not be in view within the background positioning area.

contain

Scale the image to the largest size such that both its width and its height can fit inside the content area

Together with background-positition you can manage your background sizing and positioning according to the div pretty well.

Upvotes: 1

Related Questions