CODEWITHSUNDEEP
htmlcss
Sakshi Sharma
Sakshi Sharma

Reputation: 1472

How to center an image in an img tag using CSS background position

I am using the HTML IMG tag to source/link an image and I want to center it in a div, but I am not having much success.

My html is:

     <div class="alimgholder">
<img  title="<?php echo $album_title;?>" alt="<?php echo $album_title;?>" src="<?php echo $album_pic;?>">
     </div>

My css is:

              .alimgholder
             {
             width:160px;
             height:120px;
             overflow:hidden;
             float:left;
             }
             .alimgholder img
             {

             background-color: #EEEEEE;
             background-position: center 25%;
             background-repeat: no-repeat;
             display: block;
             }

Upvotes: 2

Views: 17907

Answers (3)

Naama Katiee
Naama Katiee

Reputation: 758

set the css for the div only -

.alimgholder
         {
         width:160px;
         height:120px;
         overflow:hidden;
         float:left;
         background-image: url(path/to/your_image);
         background-color: #EEEEEE;
         background-position: center 25%;
         background-repeat: no-repeat;
         display: block;
         }

Now for the dynamic issue - you can use the img tag to load the image, but hide it and read its src only to set the background with jQuery, like that - 

 $("#div_id").css("background-image", $("#img_id").attr("src"));

Upvotes: 4

PsychoMantis
PsychoMantis

Reputation: 1015

if you're only having the image within the div you could use:

margin-left: auto;
margin-right: auto;

within your .alimgholder CSS code but this would center the content of the whole <div> horizontally.

Upvotes: 0

SebScoFr
SebScoFr

Reputation: 901

.alimgholder
{
     ...
     text-align: center;
}

otherwise you're aligning the image's background-image.

Edit: If you want your image to be defined as the background of your div your have to load it from css and forget about your img tag:

.alimgholder
{
     background: url(path/to/image) center no-repeat;
     ...
}

Upvotes: 0

Related Questions