I need help centering the image in the middle?

I’m confused on how to do this. I’m going to have an image in-front of it, but I want the image in the back to be centered.

<div style="width:95px; height:95px;border-radius: 50%;background-image: url('https://i.imgur.com/aesEGqG.png')  ">
    <img src="Image In front" style="width:150px; height:150px; " />
</div>

I don’t see how you expect to fit a 150 x 150 px image inside a div that is only 95 x 95 px…

I want the 95px image to be in the middle inside the 150.

I want it to look like this.

This is what I’m trying to do.

 <style type="text/css"> #holder {
   width: 150px;
   height: 150px;
 }
 
 .hvcentered {
   width: 95px;
   height: 95px;
   border-radius: 50%;
   background-image: url('http://i.imgur.com/GwkZGYI.png')
 }
 
 </style>

<div id="holder">
  <div class="hvcentered">
    <img src="http://i.imgur.com/4HJbzEq.png" style=" width:155px; height:155px; " />
  </div>

I’m trying to get the circle inside the window.

I can’t figure out how to do it.

Do you mean something like this?

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
.holder {
	background:url(http://i.imgur.com/GwkZGYI.png) no-repeat 50%;
	width:155px;
	height:155px;
	border-radius:50%;
	background-size:98px;
}
</style>
</head>

<body>
<div class="holder"> <img class="test" src="http://i.imgur.com/4HJbzEq.png" width="155" height="155"> </div>
</body>
</html>

Or if you want to be really clever then no wrapper is needed:


<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
.holder {
	background:url(http://i.imgur.com/GwkZGYI.png) no-repeat 50%;
	width:155px;
	height:155px;
	border-radius:50%;
	background-size:98px;
}
</style>
</head>

<body>
<img class="holder" src="http://i.imgur.com/4HJbzEq.png" width="155" height="155">
</body>
</html>
4 Likes

Can that be implemented using this code too?

<div style="width:95px; height:95px;border-radius: 50%;background-image: url('https://i.imgur.com/aesEGqG.png')  ">
    <img src="https://i.imgur.com/4HJbzEq.png" style="width:150px; height:150px; " />
</div>

You mean as inline styles then yes of course.

Remember though that the web doesn’t operate in the fifth dimension and your wrapper is not a ‘tardis’ i.e. the inside cannot be bigger than the outside :slight_smile:

Here are three versions for you to play width.

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
.holder {
	background:url(http://i.imgur.com/GwkZGYI.png) no-repeat 50%;
	width:155px;
	height:155px;
	border-radius:50%;
	background-size:98px;
}
</style>
</head>

<body>
<p>Version1</p>
<img class="holder" src="http://i.imgur.com/4HJbzEq.png" width="155" height="155">
<p>version 2</p>
<div style="width:150px; height:150px;border-radius: 50%;background: url('https://i.imgur.com/aesEGqG.png') no-repeat 50%;background-size:98px">
	<img src="https://i.imgur.com/4HJbzEq.png" width="150" height="150">
</div>
<p>Version 3</p>
<img style="width:150px; height:150px;border-radius: 50%;background: url('https://i.imgur.com/aesEGqG.png') no-repeat 50%;background-size:98px" src="https://i.imgur.com/4HJbzEq.png" width="150" height="150">

</body>
</html>

Also note that image dimensions should preferably be described using their attributes rather than an inline style or the browser won’t pre-allocate the correct amount of space until the image is loaded.

3 Likes

You will have to explain what you mean as I have no idea what you can possibly mean in this context?

What has 95px got to do with the 'price of fish’ :slight_smile:

2 Likes

How come the top image is blurry compared to the bottom image?

I removed [ background-size:98px] and they are both the same now.

if you remove the background-size then the image in the middle becomes 150x 150 instead of the smaller center section only.

Remove the border-radius instead and use the same images and will look the same.

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
.holder {
	background:url(https://i.imgur.com/aesEGqG.png) no-repeat 50%;
	width:150px;
	height:150px;
	background-size:98px;
}
</style>
</head>

<body>
<p>Version1</p>
<img class="holder" src="http://i.imgur.com/4HJbzEq.png" width="150" height="150">
<p>version 2</p>
<div style="width:150px; height:150px;background: url('https://i.imgur.com/aesEGqG.png') no-repeat 50%;background-size:98px">
	<img src="https://i.imgur.com/4HJbzEq.png" width="150" height="150">
</div>
<p>Version 3</p>
<img style="width:150px; height:150px;background: url('https://i.imgur.com/aesEGqG.png') no-repeat 50%;background-size:98px" src="https://i.imgur.com/4HJbzEq.png" width="150" height="150">

</body>
</html>

Border radius doesn’t work here.

<div style="width:150px; height:150px;border-radius: 50%;background: url('https://i.imgur.com/aesEGqG.png') no-repeat 50%;">
	<img src="" width="150" height="150">
</div>

Yes it does its working perfectly.

Your missing image is just bigger than the div and sticks out. Adds overflow:hidden to hide anything that sticks out.

<div style="overflow:hidden;width:150px; height:150px;border-radius: 50%;background: url('https://i.imgur.com/aesEGqG.png') no-repeat 50%;">
	<img src="" width="150" height="150">
</div>

As I said above you don;t need the wrapper to do this.

I thought the square image was supposed to change to a circle.

It does.

It does not crop inner content though.

e.g.
The inside red square will remain visible even though the parent is a black circle.

<div style="width:150px;height:150px;border:1px solid #000;border-radius:50%;">
  <div style="width:148px;height:148px;border:1px solid red"></div>
</div>
1 Like

ok, I got it now. Thanks.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.