i m trying to fit this image inside the container , when i use cover it grows out and only a small part shows and when i user contain it shrinks i tried other things but it is not working .
.banner{
background-image: url('banner1.jpg');
background-repeat: no-repeat;
background-size:cover;
box-shadow: 0px 0px 10px 2px rgb(253, 235, 195);
}
If text doesn't need to appear on top of the image maybe you should try just putting a img tag. You can stretch it with no sweat.
img{
height:200px;//or whatever height you want for the banner
width:100%;
}
Related
I have code to show a background image in a card header like below:
<div class="card-heading"></div>
and in CSS:
.card-1 .card-heading {
background: url("../images/bg-head-02.jpg") center center/cover no-repeat;
padding-top: 210px;
}
In desktop its looking fine like this:
But in mobile device its getting cut off like below:
How can I fix my code so that it also fits in mobile.
The problem: You are using the cover value for the background-size property. This means that the image will be resized to fit either the height or width of the available space, and any "extra" image will be cropped. In your case, the image is being made big enough to fit into the height of your element, which makes it too wide to fit so the width is getting cropped.
Note that using a separate background-size: cover; CSS will not change this behaviour - it behaves the same way as when it is included in the background shorthand. You can see this in the working examples below.
Option 1: background-size: contain If you want the image to fit fully into the space, you can use contain- however note that this will add empty space above and/or below the image because the aspect ratio will no longer match the image itself.
Solution - Option 2: Make the element the correct aspect ratio for the image.
You can use % padding instead of fixed padding.
To calculate the correct percentage use: image_height / image_width e.g. in the example here : 210/1200 = 17.5%
Compare all of these options in the example below:
.card-heading {
background: url("https://via.placeholder.com/1200x210") center center/cover no-repeat;
padding-top: 210px;
border: 1px solid red;
}
.card-heading-cover {
background: url("https://via.placeholder.com/1200x210") center no-repeat;
background-size: cover;
padding-top: 210px;
border: 1px solid red;
}
.card-heading-contain {
background: url("https://via.placeholder.com/1200x210") center center/contain no-repeat;
padding-top: 210px;
border: 1px solid red;
}
.card-heading-responsive {
background: url("https://via.placeholder.com/1200x210") center center/cover no-repeat;
padding-top: 17.5%;
border: 1px solid red;
}
<p><strong>Background: cover</strong> (like your example) - image is cropped</p>
<div class="card-heading"></div>
<p><strong>Background-size: cover</strong> - image is <i>still</i> getting cropped:</p>
<div class="card-heading-cover"></div>
<p><strong>Background-size: contain</strong> - note the extra space</p>
<div class="card-heading-contain"></div>
<p><strong>% padding</strong> - resizes to fit the image aspect ratio</p>
<div class="card-heading-responsive"></div>
I have different size background images in width and height (800x1200 600x800). I want to resize the image to full size without distortion to fit into the div. Can anybody tell me how to implement this in css. I have tried below ways but it is not occupying the full div width. can anybody tell me how to do this?
.example1 {
border: 2px solid black;
padding: 0;
background: url(mountain.jpg);
background-repeat: no-repeat;
background-size: contain;
}
background-size: contain; will always display the whole image (without cutting off anything), thereby leaving some space either vertically or horizontally.
On the other hand, background-size: cover; will fill the whole DIV in a way that the shorter side of the image corresponds exactly to the length or height of the DIV (depending on the relation of the proportions between DIV and image) and the longer one is cut off on the sides or on top and bottom.
If you don't want a distorted image, those are the two options you have. If a distorted image doesn't disturb you, you can set background-size: 100% 100%;
Try below code and check
.example1 {
border: 2px solid black;
padding: 0;
background: url(mountain.jpg);
background-repeat: no-repeat;
background-size: 100% 100%;
}
Hi i know the best way to do this without compromising with quality of image.
just give position:relative; to that div for which you have to make backgorund.
and take the desire image into the div and give the image position:absolute; height:100%; width:100%;top:0; left:0; boject-fit:cover;and lastly give your image z-index:-1;
I hope it will work.
Is background: no-repeat; needed when you have a fixed image?
I read that, when put any background image, it's getting repeated by default.
Even when you don't see it on the screen, is it sill getting repeated then, even on a fixed image?
Do you need to specify no-repeat regardless?
The image size is 180 x 180.
<style>
#playButton4 {
border: 3px solid #0059dd;
width: 260px;
height: 194px;
cursor: pointer;
background-color: black;
}
.img2 {
background: url(https://i.imgur.com/4HJbzEq.png);
background-repeat: no-repeat;
width: 180px;
height: 180px;
margin: 7px 40px;
}
</style>
<div id="playButton4" onclick="">
<div class="img2"></div>
</div>
background-repeat property is relevant whenever the size of the element exceeds the size of background-image. If this never happens to your element, specifying background-repeat is dead code.
If, under any circumstance, your element might become larger than the background-image (on either direction) and you don't want the image repeated, you should leave it in.
As a side note, background is a shorthand property which includes background-repeat, thus:
background: url(https://i.imgur.com/4HJbzEq.png) no-repeat;
being an exact equivalent of
background-image: url(https://i.imgur.com/4HJbzEq.png);
background-repeat-x: no-repeat;
background-repeat-y: no-repeat;
, which reduces your "dead code" to only 10 characters.
I think you need it to avoid repeated image, Your image does not repeat because you set your with same with your image resolution, How if you set your width 100% and not using background-repeat: no-repeat;, You will get repeated image.
Yes, it's best to use ,no-repeat unless you want to tile your background images to make background patterns or make background responsive.
Refer: https://blogs.adobe.com/creativecloud/best-practices-for-background-images-your-getting-started-guide/
In your case, you need not use no-repeat as you have given a fixed dimension(same as the image dimension) to your container <div> . Later, If you wish to change(increase) the dimensions of the container dynamically to make it responsive, then you would definitely need no-repeat .
I'm wondering if the following is possible with CSS.
I'd like there to be 3 horizontal bars running across the entire width of a background. Here's a rough mockup of what I would like the background to be
I've been toying with the following but I can't seem to be able to position any of the backgrounds.
#blog {
width: 1200px;
height: 100%;
background-image: url("bg1.png"),
url("bg2.png"),
url("bg3.png");
background-position: 10px 10px,
170px 10px,
750px 10px;
background-repeat:repeat-x;
}
Here's a fiddle: http://jsfiddle.net/5fo054L2/1/
Any idea what I'm doing wrong?
You almost have it. The issue is that you have the x and y position confused. Also, x position doesn't have any meaning if it repeats.
.blog {
width: 100%;
height: 100%;
background-image: url("http://i.imgur.com/L3F9slr.png"), url("http://i.imgur.com/rmPDxMq.png"), url("http://i.imgur.com/9MMzDMs.png");
background-position: 0px 170px, 0px 100px, 0px 10px;
background-repeat: repeat-x;
}
Here is an updated jsfiddle: http://jsfiddle.net/5fo054L2/3/
Note that the vertical height (of text in your example) will limit the amount of the background images you see.
You can also make three image files, place them below everything else, and set them using absolute positioning.
This may be a stupid question but I am trying to set a static background image onto the body of my site but I don't want to repeat the image. I have this:
body{
background:url(../assessts/BG.png) center bottom no-repeat,#000;
background-size:100% auto;
}
Which doesn't show the image at all, however if I remove the no-repeat:
body{
background:url(../assessts/BG.png) center bottom,#000;
background-size:100% auto;
}
This shows the image fine. The image is quite large anyway and fills my 19 inch screen well without the no-repeat option. But as a fail safe for very large screens I would like the image not to repeat.
Where I am more confused is I have a div later on in the CSS that using a similar method:
.head{
position:absolute;
z-index:1;
top:0px;
background:url(../assessts/logo.png) center -60px no-repeat,#000;
background-size:300px auto;
width:100%;
height:200px;
display:block;
box-shadow:0px 4px 4px #000;
-moz-box-shadow:0px 4px 2px #000;
-webkit-box-shadow:0px 4px 2px #000;
}
But this works with no errors. If I'm not mistaking it is the same?
Have you tried rearranging the order of the properties, i.e. background: #000 url(../assessts/BG.png) no-repeat center bottom; See W3C notes on shorthand property order.