I am developing a site where the users' profile image needs to display in a circle. There are many circles on this site and the circle size can vary.
I can display square images properly but with vertical and horizontal images I face a problem.
I have to display the image in a circle with the below criteria:
Suppose image size is 500x300. The image should crop 100px off of the right and left sides, so that the center of the image is shown. Now the image should be 300x300, centered. Then I need to make a circle from that image. OR hide 100px of the right and left of the image using CSS.
If image size is 300x500, then the top and bottom area should be hidden using CSS
What do I have to do to fix this? CSS-only answers are best for me, if possible.
background-size
MDN -
CSS Tricks - Can I Use
As the image sizes are variable, you want to make sure they cover the div as well as being centered within it.
Adding the border-radius: 50%; will give you the circle effect.
.user {
display: inline-block;
width: 150px;
height: 150px;
border-radius: 50%;
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
}
.one {
background-image: url('https://via.placeholder.com/400x200');
}
.two {
background-image: url('https://via.placeholder.com/200x200');
}
.three {
background-image: url('https://via.placeholder.com/200x400');
}
<div class="user one">
</div>
<div class="user two">
</div>
<div class="user three">
</div>
In practice, you wouldn't want to have a class for each image, so you'd specify it with an inline style in the markup:
<div class="user" style="background-image:url('path/to/user/img.png')"></div>
object-fit
MDN - CSS Tricks - Can I Use
A newer alternative is to use the object-fit property on a regular <img> tag. This does not work in IE or older versions of Edge.
.user {
display: inline-block;
width: 150px;
height: 150px;
border-radius: 50%;
object-fit: cover;
}
<img src="https://via.placeholder.com/400x200" class="user">
<img src="https://via.placeholder.com/200x200" class="user">
<img src="https://via.placeholder.com/200x400" class="user">
set the image as background, centered.
<div class="image"></div>
css:
.image{
width: 300px;
height: 300px;
border-radius: 50%; /*don't forget prefixes*/
background-image: url("path/to/image");
background-position: center center;
/* as mentioned by Vad: */
background-size: cover;
}
fiddle
If you are using bootstrap you have class img-circle to do this.
<html>
<head>
<style>
#circle
{
border-radius:50% 50% 50% 50%;
width:300px;
height:300px;
}
</style>
</head>
<body>
<img src="skin-tone.jpg"
id="circle">
</body>
</html>
Related
<div class="container">
<div class="fullscreen">
<div class="textbox">Testing</div>
</div>
</div>
I'm trying to have an image fully show up based on the size of a screen, and to have text ("Testing" in the textbox class) show up in a precise designated area in the image, as shown above.
Trying to get the above to work with this codepen, but I am defeated to admit that after an hour of fiddling with css, I am nowhere close.
It is pretty frustrating that css doesn't seem to work as expected, where the image doesn't seem to want to nest to full height etc.
I would like to suggest if you add image using img HTML tag you have better control on image in relation with "Testing" text. Please check below my snippet. You can adjust position of "Testing" by "top" position on ".textbox" class :
.container{
min-height: 100%;
margin: 0;
padding: 0;
}
.fullscreen{
width: auto;
height: 100%;
margin: 0;
padding: 0;
position:relative;
}
.textbox{
position:absolute;
top:55%;
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
z-index:3;
text-align:center;
}
<div class="container">
<div class="fullscreen">
<img src="http://print.drawmaticar.com/preview.jpg" style="width:100%;"/>
<div class="textbox">Testing</div>
</div>
</div>
Try this:
background: url('path/to/img.jpg') no-repeat center center / cover;
Normally, if you call the image in background means need to add the padding-bottom in percentage.. It means the image height/width*100
css
.fullscreen {
padding-bottom: 129.411%;
}
Backgorund Image
you have to make background-size:cover instead of 100% and make height:100vh to make it visible.
I need my background image to be responsive. I have used background-size: contain and that seems to work fine but I need the height of my div to be responsive as well.
.container {
width: 100%;
}
.bg {
background: red url('https://cdn.pixabay.com/photo/2018/06/30/09/31/background-image-3507320_960_720.jpg') no-repeat center top;
background-size: contain;
height: 600px;
}
<div class="container">
<div class="bg"></div>
</div>
For now the height is 600px and based on the width of the screen, you will see a red background, which should not be the case.
I have tried background: cover, but it will scale the image. It should be 100% of the div but it should not be cut.
How can I fix this?
https://jsfiddle.net/mt386Ln0/
There is an easy solution without using JavaScript. Just add <svg> with specific ratio inside a container.
You must use image dimensions as viewBox <svg viewBox="0 0 960 628"></svg>
Example:
div{
background-image:url('https://cdn.pixabay.com/photo/2018/06/30/09/31/background-image-3507320_960_720.jpg');
background-size:cover;
background-position:50%;
background-repeat:no-repeat;
}
svg{
width:100%;
display:block;
visibility:hidden;
}
.demo-1{width:100%}
.demo-2{width:40%}
<div class="demo-1">
<svg viewBox="0 0 960 628"></svg>
</div>
<hr>
<div class="demo-2">
<svg viewBox="0 0 960 628"></svg>
</div>
If you know the ratio of the image you can consider the padding trick:
.container {
width: 100%;
}
.bg {
background: red url('https://cdn.pixabay.com/photo/2018/06/30/09/31/background-image-3507320_960_720.jpg') center/100%;
}
.bg:before {
content: "";
display: inline-block;
padding-top: calc((628/960) * 100%); /* OR 65.42% */
vertical-align: top;
}
<div class="container">
<div class="bg"></div>
</div>
Instead of using background-size: contain, I used background-size: auto, which seems to work the way you want it to. Furthermore, I added some javascript to help with the resizing.
window.resize = function() {
var a = document.getElementById("a");
var b = document.getElementById("b");
a.style.width = "100%";
b.backgroundSize = "auto";
}
.container {
width: 100%;
}
.bg {
background: red url('https://cdn.pixabay.com/photo/2018/06/30/09/31/background-image-3507320_960_720.jpg') no-repeat center;
background-size: auto;
height: 600px;
}
<div class="container" id = "a">
<div class="bg" id = "b"></div>
</div>
Have you tried:
background-size: cover
this will allow the background to always cover the DIV - you might need to tweek the -
background-position: xxxxx
as sometimes the screen size your viewing the image on will mean setting a #meda query to get it right for each different deceive (i.e. mobile or desktop)
https://developer.mozilla.org/en-US/docs/Web/CSS/background-position
I have an image tag (containing a .png) that spans the width of my viewport. When I resize it I want it to be cropped with the png's center fixed on the center of the page, however it crops relative to its top-left point. The image is inside a as well
The image is part of a bootstrap carousel and it's supossed to be the promotional banner of a website. I've tried using the image as a background-image and it worked exactly as I wanted, but I'd prefer to use an image tag for this (acessibility and other control preferences). I've also tried the object-position property on CSS and it didn't work (I applied it to the image)
<div class="image-container">
<img src="img/..." class="banner-image" alt="Banner image">
</div>
CSS
.image-container {
height: 460px;
overflow: hidden;
}
.banner-image {
min-width: 100%;
}
This is a small image showing what I'm experiencing and the desired result: (I can't post it as an image, but I uploaded to imgur)
https://imgur.com/a/TrgAo0w
Flexbox can do that.
In this case, I've allowed overflow and made the image slightly transparent so you can see the behaviour of the image.
.image-container {
height: 460px;
//overflow: hidden;
display: flex;
width: 60vw;
margin: 1em auto;
border: 1px solid red;
justify-content: center;
}
.banner-image {
opacity: .5
}
<div class="image-container">
<img src="http://www.fillmurray.com/620/460" class="banner-image" alt="Banner image">
</div>
To have an image fit into a div you can make use of css like following:
HTML
<div class="image-container">
</div>
CSS
.image-container {
background: url("../banner.jpg") no-repeat center;
background-size: cover;
height: 460px;
width: 100%;
}
Fiddle: https://jsfiddle.net/01x82wz3/
Reference: https://developer.mozilla.org/de/docs/Web/CSS/background-size
Here is the html:
<section class="bg">
<h3>this is heading</h3>
<div>other content</div>
</section>
I have the following for my background image:
.bg {
background: url("img/watercolor-bkgrd.png") center top / 100% 75% no-repeat
}
Now I would like to position the background image slightly lower from the top (for example: 100px) so that h3 heading will not stay on top the background image. How can I make it happen without modifying the html structure? Please note that I have to keep what is already in the above css such as centering the image horizontally, etc.
Use the background position offset value.
This does require that you know the height of the element above though.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
h3 {
height: 60px;
background: lightblue;
opacity: .5;
}
.bg {
height: 100vh;
background-image: url(http://www.placebacon.net/400/200?image=0);
background-repeat: no-repeat;
background-position: center top 60px;
}
<section class="bg">
<h3>this is heading</h3>
<div>other content</div>
</section>
Just change "top" to "100px" or whatever value you want to move it by.
See this working snippet (where I use 80px):
.bg {
height:400px; /* for testing */
background: url("http://oi67.tinypic.com/28a11js.jpg") center 80px / 100% 75% no-repeat
}
<section class="bg">
<h3>this is heading</h3>
<div>other content</div>
</section>
This is setting the background-position properties inline in the same way that you are in your own code.
The problem is making sure the image is always under the <h3> element: You could make the <h3> element a fixed height and use the same value for your background position.
Unknown height of h3 element
If you don't know the height of the <h3> element, how about adding the image as background to the <div> underneath the <h3> like this:
.bg div{
height:400px; /* for testing */
background: url("http://oi67.tinypic.com/28a11js.jpg") center top / 100% 75% no-repeat
}
<section class="bg">
<h3>this is heading</h3>
<div>other content</div>
</section>
Youre looking for the css property "background-position" (Mozilla Docs)
This allows you to set the initial top and left positions of your background image in the div.
background-position: left top;
Just add the following to your .bg class:
background-position: 0 100px;
How do I get an image as banner across the page? Below shown is my code, please suggest me a solution.
.image {
background: url(banner.jpg) center no-repeat;
width:100%;
height: 300px; <-- Image height
}
the best method?
then apply that css to a classed div?
<div class="image" alt="" title="">
</div>
put the image inside
html
<div class="image">
<img src="banner.jpg"/>
</div>
css
.image {
display:block;
position:relative;
overflow:hidden;/*keeps the image in the container*/
height: 300px
}
.image img{position:absolute;bottom:0;width:100%}/*this is aligned to the bottom, may need to be top or center depending on the circumstances*/
made a fiddle: http://jsfiddle.net/filever10/srdcY/
It depends on the situation, there are many ways to approach the same problem. The way you described is correct way of doing it as we insert image in to code.
<img src="image/source/etc/etc/" alt="" title="" />
If you have to use a background image then try using CSS background-size property, like so:
.image {
background-image: url(banner.jpg);
background-position: center center;
background-repeat: none;
background-size: cover; /* or use 'contain' */
width: 100%;
height: 300px;
}
As htmltroll says, there are many ways to approach this.