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.
PaulOB
August 19, 2017, 9:23am
7
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>
PaulOB
August 19, 2017, 9:37am
9
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
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
PaulOB
August 19, 2017, 9:45am
11
asasass:
s there any way I can use width:95px; height:95px instead of the other stuff?
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’
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.
PaulOB
August 19, 2017, 9:56am
14
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>
PaulOB
August 19, 2017, 10:01am
16
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.
asasass
August 19, 2017, 10:04am
17
I thought the square image was supposed to change to a circle.
PaulOB
August 19, 2017, 10:10am
18
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
asasass
August 19, 2017, 10:12am
19
ok, I got it now. Thanks.
system
Closed
November 18, 2017, 5:12pm
20
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.