Is there a way where you can make a picture fit automatically in a css circle? Fx if a user add a picture there is 500px * 500px, but the circle is 100px * 100px. When I upload a picture now, the picture is just filling out the screen, instead of staying inside the circle.
<html>
<head>
<style>
#circle
{
border-radius:50% 50% 50% 50%;
width:100px;
height:100px;
}
</style>
</head>
<body>
<img src="skin-tone.jpg" id="circle">
</body>
</html>
Try this CSS
#circle {
background: skin-tone.jpg;
background-size: cover;
border-radius:50% 50% 50% 50%;
width:100px;
height:100px;
}
There are multiple ways of doing it but one simple way is given below:
#circle{
background: url("imageUrl.jpg");
background-repeat: no-repeat;
background-size: 100% 100%;
background-position: center;
border-radius: 50%;
height: 100px;
width: 100px;
}
What you have to do is to set a max-width and max-height to the img element. For example, you can say to your img to be of max-width:100px and max-height:100px.
Related
I have a background-image set on my div element, but I can't see it. Why is this happening?
<html>
<head>
<title>interior</title>
<style>
.pen {
background-image: url("https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTFFyGF8AZJB_M1TRnINMlytntLg1o5vx11xA&usqp=CAU");
width: 100%;
}
</style>
</head>
<body>
<div class="pen">
</div>
</body>
</html>
The way your code is now (in the question), you need to define a height for the pen element. By default (without contents) height remains zero, therefore no background image will be shown.
.pen {
background-image: url("https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTFFyGF8AZJB_M1TRnINMlytntLg1o5vx11xA&usqp=CAU");
width: 100%;
height: 300px;
}
<div class="pen">
</div>
You need in this case a height of the element and possibly even background-size:
Like this:
height: 300px; /*for example*/
background-repeat: no-repeat;
There is no height set for the image, try this:
.pen {
background-image: url("https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTFFyGF8AZJB_M1TRnINMlytntLg1o5vx11xA&usqp=CAU");
width:100%;
height: 300px;
background-repeat: no-repeat;
}
Your div should have some height you can use this in your code and also you can adjust your height according to you . background-size:cover will cover whole background with your image.
.pen{ backgroundimage:url("https://encryptedtbn0.gstatic.com/imagesq=tbn:ANd9GcTFFyGF8AZJB_M1TRnINMlytntLg1o5vx11xA&usqp=CAU"); width: 100vw; height: 50vh; background-size : cover;
I have rotating banner images which I'd like to work (scale to fit) in any screen size.
When I use the following, it works:
.banner{
position:absolute;
width: 80%;
height: 30%;
top:5%;
left:20%;
background:#FFF;
border:hidden;
}
However, when I try to change the width to for example 40%, the images truncate rather than scale down.
When I tried to use, for example, max-width: 80%, or width: auto, the images totally disappear, even if I use a high z-index.
Setting both width and height on your images, will not care about aspect ratio. Just use width = 100%, and leave the height related to it (with the technique below).
And then set the container width to whatever you want:
#banner {
width: 100%;
height: 0;
padding-top: 30%;
background: red;
}
#banner-container {
width: 400px;
}
<div id="banner-container">
<div id="banner"></div>
</div>
If you want to show an image inside it, use CSS background-image with background-size: cover:
#banner {
width: 100%;
height: 0;
padding-top: 30%;
background: gray;
background-position: 50% 50%;
background-size: cover;
background-repeat: no-repeat;
}
#banner-container {
width: 400px;
}
<div id="banner-container">
<div id="banner" style="background-image: url('http://placekitten.com/800/500');"></div>
</div>
I am making a test webpage to learn html/css. I would like to make the image mold to the shape of the border. It should not be much of a problem but it seems as though the image in not centered in the border. As I change the image size etc it seems as though the image is more so in the middle of the page and leaves the border etc. I just want it to fit perfectly in the border, and for the photo to be clipped along the borders edges. I am having problems with this.
How can I make it so that the image is directly centers and fills the entire border without the middle of the photo or the majority of the photo being left outside of the border?
#pic {
float:right;
transform: rotate(90deg);
}
#bod {
height:300px;
width:300px;
border: 5px ridge blue;
float:right;
border-radius: 105px 105px 0px 0px;
overflow:hidden;
background-image: url("smile.jpg");
background-size: 800px 800px;
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
}
<div id="bod">
<div id="pic">
<img src="http://lorempixel.com/800/500" />
</div>
</div>
Change the CSS for your #bod selector to the following:
#bod {
border-radius: 105px 105px 0px 0px;
border: 5px ridge blue;
height: 300px;
width: 300px;
float: right;
overflow: hidden;
background-image: url("smile.jpg");
background-size: cover;
background-repeat: no-repeat;
background-position: center;
}
Just to be clear, I've removed the background-attachment attribute from the style definition and changed the value of the background-size attribute to cover, which is the important part.
Update
You've previously set the image through your CSS by setting the background-image to url("smile.jpg") in the #bod styling. I'm guessing that line isn't needed anymore since you're now setting the image in your HTML with: <img src="http://lorempixel.com/800/500" /> instead.
That image is now off-center, to fix that change your #pic styling to the following:
#pic {
float: right;
transform: rotate(90deg);
transform-origin: 50% 50%;
height: 100%;
width: 100%;
}
I've added the transform-origin, width and height attributes to the #pic styling.
The center of rotation is middle of div, so you have to make sure that the center is in the right place. You should just do this:
#pic {
width:100%;
height: 100%;
transform: rotate(90deg);
}
#pic img{
width: 100%;
height: 100%;
}
https://jsfiddle.net/ebc5yjzu/3/
Demo
.moving_background
{
background-image: url("../image/quote3.jpg");
background-position: 50% center; /*Centering property*/
background-repeat: no-repeat;
height: 100px;
margin: 20px;
width: 100px;
border:1px solid;
}
If i change the width and height to 100%, it is not showing the border to me. I don't understand the reason. Please let me know this
I am trying to center this div in the body. Any other ways are also welcome except negative top, left, margin values.
Any idea?
The issue is that background-image does not count as content in your div, so what you have is an empty div, hence it has no height. A way around this is to add the image inside the div, then hide it.
HTML
<div class="moving_background">
<image src="http://placehold.it/100x100" class="background"/>
</div>
CSS
.moving_background {
background-image: url("http://placehold.it/100x100");
background-position: 50% center;
background-repeat: no-repeat;
background-size: cover;
height: 100%;
margin: 20px;
width: 100%;
border:1px solid;
}
.background {
visibility: hidden
}
JSFiddle: http://jsfiddle.net/nhg33xek/4/
I want to use a background image to my section element with width:100% and height:40%.
So i used CSS3 and used this solution:
background-image: url(My_Local_Image);
background-repeat: no-repeat;
background-size: 100% 40%;
background-position: center top;
It worked nice!
My problem now is that i want the background-image to be cropped to fit the size i specify. Now image is streched to fit.
Is there ant way that i can achieve this?
FIDDLE
Unfortunately you cannot do something like
background-size: cover 40%;
cause you'll loose the 100%
the solution would be so make a separate image container, and after it an element for your (I suppose) text, setting simply background-size: cover; for the image container,
setting also width: 100%; and height : 40%; for the same.
But what you can do is
LIVE DEMO
<section>
<div class="sectionImage" id="first"></div>
<div class="sectionContent">1</div>
</section>
<section>
<div class="sectionImage" id="second"></div>
<div class="sectionContent">2</div>
</section>
<section>
<div class="sectionImage" id="third"></div>
<div class="sectionContent">3</div>
</section>
section{
background:#444;
position:relative;
margin:10px auto;
height:300px;
width:800px;
color:#fff;
}
.sectionImage{
width: 100%;
height:30%;
background: transparent none no-repeat center center;
background-size: cover;
}
.sectionContent{}
#first{
background-image: url('1.jpg');
}
#second{
background-image: url(2.jpg);
}
#third{
background-image: url(3.jpg);
}
If I understand what you're trying to do, simply remove the 40% from your background-size and the image will fill the div at the 800x300px size.
You must place the background container inside your main container. After that you must provide width and height of main containter and make overflow:hidden.
You can then play with main container's width and height to change crop size. (You can use width:40%; and height:100% too)
Here is JSFidde.
HTML:
<section id="first">
<div id="bg"></div>
</section>
CSS:
#first{
height:300px;
width:200px;
overflow:hidden;
}
#bg{
background-image: url('https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcQOhLJod_xPxdgo339zfIJipPzOUZg9BunbT-ftIgDMiu2HLi0o');
background-repeat: no-repeat;
background-size: 100% 100%;
background-position: center top;
width:800px;
height:300px;
}
Use an inner div to get the crop effect:
Fiddle
CSS
#first{
height:300px;
width:800px;
}
#first div{
width:100%;
height:40%;
background-image: url('https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcQOhLJod_xPxdgo339zfIJipPzOUZg9BunbT-ftIgDMiu2HLi0o');
background-repeat: no-repeat;
background-size:100%;
background-position: 50% 50%;
}
Use the :before pseudo class
#first:before {
content: '';
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 40%;
background-image: url(image.jpg);
background-repeat: no-repeat;
background-position: center center;
}
This will give you many CSS options to deal with both bigger/smaller images, stretching/cropping, etc., without messing with the html