I am trying to set an image as a background but the zoom version of image is coming.
My code
<!DOCTYPE html>
<html>
<head>
<style>
body, html {
height: 100%;
}
.bg {
/* The image used */
background-image: url("../../media/image1.jpeg");
/* Full height */
height: 100%;
/* Center and scale the image nicely */
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
</style>
</head>
<body class="bg">
</body>
</html>
How can I fix it?
You can use the propertie background-size, here is a following guide:
background-size: auto
Default value. The background image is displayed in its original size:
div{
width:100px;
height:100px;
border:5px solid blue;
background-image:url("https://googlechrome.github.io/samples/picture-element/images/kitten-small.png");
background-size:auto;
}
<div></div>
background-size: lenght
Sets the width and height of the background image. The first value sets the width, the second value sets the height. If only one value is given, the second is set to "auto". Read about length units
div{
width:100px;
height:100px;
border:5px solid blue;
background-image:url("https://googlechrome.github.io/samples/picture-element/images/kitten-small.png");
background-size:10px;
}
<div></div>
background-size: percentage
Sets the width and height of the background image in percent of the parent element. The first value sets the width, the second value sets the height. If only one value is given, the second is set to "auto"
div{
width:100px;
height:100px;
border:5px solid blue;
background-image:url("https://googlechrome.github.io/samples/picture-element/images/kitten-small.png");
background-size: 10%;
}
<div></div>
background-size: cover >good answer for this question<
Resize the background image to cover the entire container, even if it has to stretch the image or cut a little bit off one of the edges
div{
width:100px;
height:100px;
border:5px solid blue;
background-image:url("https://googlechrome.github.io/samples/picture-element/images/kitten-small.png");
background-size:cover;
}
<div></div>
background-size: contain >the best answer for this question<
Resize the background image to make sure the image is fully visible
div{
width:100px;
height:100px;
border:5px solid blue;
background-image:url("https://googlechrome.github.io/samples/picture-element/images/kitten-small.png");
background-size:contain;
}
<div></div>
background-size: initial
Sets this property to its default value.
background-size: inherit
Inherits this property from its parent element.
Source on background-size
Suggestion on following up read
Related
I have a background-image that is 800x480 pixels. When my element has a fixed size I see the background-image, but not when the element has a relative size or a max-width.
Working CSS script
.audio-container, .settings-container {
max-width:800px;
height:480px;
position:absolute;
background-image:url("../../public/images/Audio/I_Audio_BGK.png");
background-repeat: no-repeat;
background-size: 100% 100%;
}
CSS script with no background image showing
.audio-container, .settings-container {
width:100%;
/* Same result with max-width */
height:100%;
position:absolute;
background-image:url("../../public/images/Audio/I_Audio_BGK.png");
background-repeat: no-repeat;
background-size: 100% 100%;
}
What can I do to show the background-image yet have the element sizes relative to the browser window?
By request, here are the parent DIVs
<div ng-controller="MainController" class="main-guy">
<div class="screen-inside">
<div class="audio-container" ng-controller="AudioController">
</div>
</div>
</div>
Here are the parent DIV CSS styles
.main-guy {
position:absolute;
/* Same result if width and height are set to a fixed number */
width: 100%;
height: 100%;
margin: auto;
}
.screen-inside {
margin:auto;
position:relative;
height:60%;
width:66.66%;
}
You have to change the position:absolute in .settings-container to position:relative as your image in this case act as a Child for .settings-container and the image should be according to its parent. So Position:absolute will not work.
Check the snippet
.main-guy {
position:absolute;
width: 100%;
height: 100%;
margin: auto;
background:#999;
}
.screen-inside {
margin:auto;
position:relative;
height:60%;
width:66.66%;
background-color:blue;
}
.audio-container, .settings-container {
width:100%;
/* Same result with max-width */
height:100%;
background-image:url(http://reservations.life/css/images/bg-01.jpg);
background-repeat: no-repeat;
background-size: cover;
position:absolute;
}
<div ng-controller="MainController" class="main-guy">
<div class="screen-inside">
<div class="audio-container" ng-controller="AudioController">
</div>
</div>
</div>
Using the following HTML:
<div class="settings-container"></div>
With the following CSS:
html, body { height: 100%; margin: 0; padding: 0; }
.settings-container {
width: 100%;
height: 100%;
text-align: center;
background-image: URL("your-image-here");
background-repeat: no-repeat;
background-size: cover;
}
Results in a background taking up 100% of the width and height of the viewport. It's difficult to solve your question properly without seeing the whole picture, but my guess is that you will need to apply height somewhere else in your document.
You may also run into issues with using position: absolute, but again that largely depends on the broader picture of how you're applying this to your site/application/whatever.
How could I use img-responsive of bootstrap to a div as follows:
<div class="fill" style="background-image:url
('./images/abc.jpg');">
</div>
While I am trying to add img-responsive class inside the div along fill it doesn't work. How could I make the background image for the above div responsive?
div {
background-image:url('./images/abc.jpg');
background-repeat:no-repeat;
background-size:contain;
}
If the background-size property is set to "contain", the background image will scale, and try to fit the content area. However, the image will keep its aspect ratio (the proportional relationship between the image's width and height):
div {
width: 100%;
height: 400px;
background-image: url('img_flowers.jpg');
background-repeat: no-repeat;
background-size: contain;
border: 1px solid red;
}
If the background-size property is set to "100% 100%", the background image will stretch to cover the entire content area:
div {
width: 100%;
height: 400px;
background-image: url('img_flowers.jpg');
background-size: 100% 100%;
border: 1px solid red;
}
If the background-size property is set to "cover", the background image will scale to cover the entire content area. Notice that the "cover" value keeps the aspect ratio, and some part of the background image may be clipped:
div {
width: 100%;
height: 400px;
background-image: url('img_flowers.jpg');
background-size: cover;
border: 1px solid red;
}
Look, there is a nice technique using background-size property
.fill {
background: url(path/to/img.jpg) center center no-repeat;
-webkit-background-size: cover;
background-size: cover;
}
This rule will make your background image cover all container space and adjust when scaling the window.
Use background-size property to the value of 100% auto to achieve what you are looking for.
For instance,
.fill{
background-size:100% auto;
}
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.
I have the following HTML:
<div class="jumbotron">
<div class="container">
<h1>Souplesse</h1>
<p>Be a Good Sport</p>
</div>
</div>
And the following CSS:
.jumbotron {
background-image:url('piscine.jpg');
height:300px;
background-repeat: no-repeat;
background-size: cover;
border-bottom:1px solid #ff6a00
}
.jumbotron .container {
position:relative;
top:50px;
}
My image is far too large to fit my height of 300px but I would like it to auto-resize and fit the height, so I can see all of my image. This must be simple but I can't see what changes need to be made.
Thanks
If you would like the background image to fit the height of your jumbotron, but don't care about if it stretches to the entire width:
.jumbotron { background-size: auto 100%; }
If you want the background image to cover the entire height AND width of the jumbotron and you do not care about the image's aspect ratio:
.jumbotron {background-size: 100% 100%; }
If you want the background image to be cover the entire height AND width the jumbotron but you DO care about the image's aspect ratio:
.jumbotron { background-size: cover; }
That last option will have some of the image cut off if the jumbotron has a different aspect ratio than the image, but you can specify how the image is positioned with the background position property:
.jumbotron {
/* Image in the center of container */
background-position: center center;
/* OR Image in the center top of the container */
background-position: center top;
/* OR Image in the center bottom of the container */
background-position: center bottom;
}
Try:
.jumbotron {
background-image:url('piscine.jpg');
height:300px;
background-repeat: no-repeat;
background-size: auto 100%;
border-bottom:1px solid #ff6a00
}
Note the:
background-size: auto 100%;
The first value is the width, the second value is the height. It is compliant to use px or % for those values.
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;
}