How do I center a background image to its parent element?


Tags: html,css

Problem :

How do I use the CSS background-position property to center a background image to its parent element? I can only get the background image to center to the entire page.



Solution :

background-position: center;
background-repeat: no-repeat;

works for me. centers horiz and vertically


    CSS Howto..

    How to use CSS selectors [closed]

    How to make an image follows scrolling until a certain point

    How to have fluid height in css?

    CSS HTML how to ignore some css for non ie7 or ie8

    How to animate top % after a delay?

    How to - dynamically - change link text color in jQuery Mobile?

    How do prevent a div from resizing? [closed]

    How to create zebra-stripe CSS with TAL?

    How to use CSS with Django forms?

    How do I tile background images in this specific way?

    Change Color Themes - How To Prevent the Site Goes Back to Default

    How to know that a time consuming CSS operation (rendering) has completed

    How to set opacity for background images using css?

    I have an text input inside a div, how do I get the background of the div to change when the input has focus?

    How to make css background-blend-mode work with gradients?

    How to isolate specific platforms using CSS selectors in the Ionic framework

    How to create dropdown navigationbar without float?

    how to tell org-mode to embed my css file on HTML export?

    How to convert a HTML/CSS template to haml/sass template? [closed]

    How can I apply a CSS modification with a button [closed]

    How to have css hover effect affect child elements differently?

    How can I center a table relative to one column in HTML/CSS?

    How to load CSS into CodeIgniter

    CSS Lining up images. Always 1px difference. Why/How?

    How to avoid third party CSS to affect current CSS? [closed]

    How to customize qTip2 css?

    How to distribute p:menuitems in p:menubar accordingly?

    Ribbon and stars - How to get this done without an image file?

    How to exclude an HTML element form Ionic CSS

    How to change elements display order in CSS?