I would like to put an image into a circle.
My code works fine, but if the image is so big, image is not resizing and i don't see anything in the circle.
How can i automatically resize the image to put it into my circle ?
Here is the html code :
<div class="roundedImage" style="background: url(img/desktop/personne.jpg) no-repeat 0px 0px;">
</div>
And here is the CSS code :
.roundedImage {
overflow:hidden;
-webkit-border-radius:50px;
-moz-border-radius:50px;
border-radius:50px;
width:90px;
height:90px;
}
And now, here is the result :
To let the background-image fully fill the space that is available you can use background-size: cover;:
.roundedImage {
background: url(http://placehold.it/50x50);
background-repeat: no-repeat;
background-size: cover;
overflow:hidden;
-webkit-border-radius:50px;
-moz-border-radius:50px;
border-radius:50px;
width:90px;
height:90px;
}
Note that i've added the inline style in the css code.
jsFiddle
Use CSS property background-size to set the size of the image set as a background in your div:
.roundedImage {
overflow:hidden;
-webkit-border-radius:50px;
-moz-border-radius:50px;
border-radius:50px;
width:90px;
height:90px;
background-size:90px 0px;
}
Related
having a problem here. I have a got my skewed div perfect but now I want the image to fit in it without tiling so if anyone can help that would be awesome.
I'm going for this:
And so far I have this:
HTML
<div class="box"></div>
CSS
.box {
position:relative;
width:100%;
height:500px;
background: url(../images/clouds.jpeg);
background-size:contain;
padding:10px;
margin-bottom:100px;
}
.box:after {
position:absolute;
content:'';
width:100%;
height:100%;
top:0;
left:0;
right:0;
background:inherit;
background-size:contain;
transform-origin: top left;
transform:skewY(10deg);
z-index: -1;
}
You should use background-size: cover if you want the img to fill the entire container, and then use background-repeat: no-repeatto have one image.
Something like that should work:
.box {
position:relative;
width:100%;
height:500px;
background: url(../images/clouds.jpeg);
background-size:cover;
background-repeat: no-repeat;
padding:10px;
margin-bottom:100px;
}
That image is not skewed..
div{
display:inline-block;
margin:10px;
postion:relative;
width:100px;
height:100px;
background:cyan;
}
div.covered{
background:
linear-gradient(20deg,white,white,40px,transparent 40px,transparent),cyan;
}
<div>
normal
</div>
<div class="covered">
covered
</div>
Bottom-left part can be done by covering image with white color with tilted linear gradient.
I need help regarding background image size scaling.
code: http://codepen.io/AnilSimon123/pen/JRBRZa
here i have kept
.bgimage{
background:url('http://www.thedesignlove.com/wp-content/uploads/2012/08/free-blue-abstract-vector-background-6.jpg');
background-size:100% auto;
height:700px;
width:100%;
background-position:top center;
background-repeat:no-repeat;
}
As you can see the image has dimensions 588 x251 px.
I want the image to stretch along the width but keep its original height,all the while keeping the height of the container as 700px. The height of the image is dynamic.
Thanks and regards,
Anil Simon
Try using background-size: cover
.bgimage{
background:url('http://www.thedesignlove.com/wp-content/uploads/2012/08/free-blue-abstract-vector-background-6.jpg');
min-height: 251px;
width:100%;
background-position:top center;
background-repeat:no-repeat;
background-size: 100%;
}
.bgimage{
background:url('http://www.thedesignlove.com/wp-content/uploads/2012/08/free-blue-abstract-vector-background-6.jpg') no-repeat top left;
background-size:100% 251px;
width:100%;
height:700px;
}
<div class="bgimage">
this is test
</div>
Use the background-size: cover instead background-size:100% auto;
background-size: cover :
Scale the background image to be as large as possible so that the background area is completely covered by the background image. Some parts of the background image may not be in view within the background positioning area
Background cover works just fine.
background-size: cover;
But don't forget to add also the background-position to fixed and center.
For more details you can check https://css-tricks.com/perfect-full-page-background-image/
Hope it helps
.bgimage{
background:url('http://www.thedesignlove.com/wp-content/uploads/2012/08/free-blue-abstract-vector-background-6.jpg');
background-attachment: fixed;
background-position:top center;
background-size: cover;
-webkit-background-size: cover;
height:700px;
width:100%;
color: #fff;
text-align: left;
background-size:100% auto;
background-repeat:no-repeat;
}
i think this is what you want
Try adding a container around your div with a height of 700px and add the bgimage on another div that is positioned absolute(so it doesn't affect anything else), height 251px and z-index:-1 to send it to the back. Also to stretch it set the background size to 100% 100%. Hope this helps
.container{
height:700px;
width:100%;
}
.bgimage{
margin:0;
position:absolute;
z-index:-1;
background:url('http://www.thedesignlove.com/wp-content/uploads/2012/08/free-blue-abstract-vector-background-6.jpg');
background-size:100% 100%; height:251px;
width:100%; background-position:top center;
background-repeat:no-repeat;
}
<div class="container">
<div class="bgimage"></div>
this is test
</div>
.bgimage {
background: url('http://www.thedesignlove.com/wp-content/uploads/2012/08/free-blue-abstract-vector-background-6.jpg') no-repeat center top;
width: 100%;
height: 700px;
background-size: 100% 251px;}
When I use the following code the background image isn't being displayed are there any prerequisites to display a background image ?
<section class="starter"></section>
.starter
{
background-image:url("Assets/Images/Section.jpg");
background-size: cover;
background-repeat:repeat-x;
width:100%;
height: 100px;
top:0px;
left:0px;
}
Here is a fiddle to your code:
http://jsfiddle.net/xywzx4uv/
(Note: I used another image and removed the broken comment)
.starter
{
background-image:url("http://lorempixel.com/output/nature-q-c-1244-102-1.jpg");
background-size: cover;
background-repeat:repeat-x;
width:100%;
height: 100px;
top:0px;
left:0px;
}
It is working as intended, so there must be an error with the image-path.
If I have url like :http://imageurl/image.jpg?w=160&h=160
Is there a way to specify the width and height parameters to background-image:url with the height and width of other div?
.thumb{
border:1px solid red;
display:inline-block;
height:300px;
width:300px;
}
.thumbnail{
background-size:100% 100%;
background-repeat:no-repeat;
background-image:url(http://imageurl/image.jpg?w=thumb.width&h=thumb.height)
}
This is not possible with the standard css, that is static. So you would need javascript or a css preprocessor like http://lesscss.org/. So you could make the css dynamic.
You could do it by using an actual image intead of a background-image and setting the image to use object-fit: cover;
.thumb{
border:1px solid red;
display:inline-block;
height:300px;
width:300px;
}
img.thumbnail{
width: inherit; height: inherit;
object-fit: cover;
}
<div class="thumb">
<img src="https://placehold.it/400x600" class="thumbnail">
</div>
the image flow out the div, I expect it fit within the wrap because I've set width to the div wrapper. The image maybe not the same size for all, so I didn't set the img to a certain fix width to maintain it aspect ratio.
demo link
profile-pic-wrap {
width:200px;
height:200px;
border: 5px solid black;
}
img {
width:100%;
}
You left the . out of your class. But event with that (http://fiddle.jshell.net/293mW/1/) the image will pop out of the div. You could add overflow:hidden; to the div, but that will crop the image (http://fiddle.jshell.net/pzDVd/).
You probably want to use a background image instead and the background-size: cover; or background-size: contain; rule. See also https://developer.mozilla.org/en-US/docs/Web/CSS/background-size
jsFiddle example (or http://fiddle.jshell.net/Fhnk8/)
.profile-pic-wrap {
width:200px;
height:200px;
border: 5px solid black;
background-image: url(http://naijaparrot.com/wp-content/uploads/2013/10/mark-zuckerberg-le-fondateur-de-facebook.jpg);
background-size: cover;
}
Here is the correct code to solve your problem. This will resize any image into the container while maintaing the correct aspect ration.
Also, you should try to avoid background-size: cover because browser support is poor for older browsers.
http://fiddle.jshell.net/293mW/4/
.profile-pic-wrap {
width:200px;
height:200px;
border: 5px solid black;
}
img {
width:100%;
max-width: 100%
height: auto;
}