调用PHP图像作为CSS背景图像：url

Question

I have the following code in my html markup :

<div class="profile-img">
    <img src="<?php echo $user_meta['profilepicture'][0]; ?>" />
</div>

This code generates a profile image or avatar.

I'd like to use it into CSS as a background image.

So this is what I am trying to use :

<div class="profile-img">
     <style type="text/css">
        .profile-img img { background-image: url('<?php echo $user_meta['profilepicture'][0]; ?>'); }
     </style>
</div>

My CSS then looks like this :

.profile-img {
width: 90px;
height: 90px;
margin-left: auto;
margin-right: auto;
text-align: center;
padding-top: 15px;
}

.profile-img img {
width: 80px;
height: 80px;
padding: 5px !important;
background: #fff !important;
border: none !important;
border-radius:500px;
-moz-border-radius:500px;
-webkit-border-radius:500px;
background-position: center center;
}

What I am trying to achieve is a round image thumbnail - avatar with proportionally cropped image.

But it seems that the code I am trying to use to call the image into CSS doesn't do the trick.

Where am I going wrong here ?

Answer 1

You have to add this rule removing background-image property that will be parsed via php.

 .profile-img { background-image: url('https://www.gravatar.com/avatar/4ee102e4ae1b9ab69077f7c471365f69?s=128&d=identicon&r=PG&f=1'); background-repeat: no-repeat; background-position: 50%; border-radius: 50%; width: 100px; height: 100px; } 

 <div class="profile-img"></div> 

So your final html addition will be:

<div class="profile-img" style="background-image: url('<?php echo $user_meta['profilepicture'][0]; ?>');"></div>

Answer 2

If you want the image to be a background-image and not part of an IMG tag, and you need it to be dynamic, then you'll need something more like this:

<div class="profile-img" style="background:url('<?php echo $user_meta['profilepicture'][0]; ?>') no-repeat center center #ffffff"></div>

This will place the image as a background within the .profile-img DIV. Then you'd style just your DIV:

.profile-img {
     width: 90px;
     height: 90px;
     margin: 0 auto;
     text-align: center;
     padding: 5px !important;
     border: none !important;
     -moz-border-radius:50%;
     -webkit-border-radius:50%;
     border-radius:50%; }

To be honest, I haven't checked your CSS as I'm not sure what you are trying to accomplish beyond the circle shape. I changed your border-radius to 50% as that's what'll create a circle.

Answer 3

Hope this helps

<script>
 var imageSrc = "<?php echo $user_meta['profilepicture'][0]; ?>";
 $('.profile-img').css('background-image',imageSrc);
</script>

Answer 4

Im not sure, but a while back I used some css to have round corners for an webapp. Perhaps this will help you:

.myImg img{
-webkit-border-radius: 30px 30px 30px 30px;
-moz-border-radius: 30px 30px 30px 30px;
border-radius: 30px 30px 30px 30px;
}