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 want to take a large source image of any dimensions, scale the height down to 400px, crop it to the middle now-scaled-down 300px of width, and display it on a webpage.
For this landscape source image:
https://www.sitebuilderreport.com/assets/facebook-stock-up-446fff24fb11820517c520c4a5a4c032.jpg
This code works perfectly:
HTML
<div class="myscaled" style="background-image: url('https://www.sitebuilderreport.com/assets/facebook-stock-up-446fff24fb11820517c520c4a5a4c032.jpg');</div>
CSS
.myscaled {
display: inline-block;
width: 300px;
height: 400px;
background-position: center center;
background-size: cover;
border-radius: 10px;
}
However for this portrait source image:
https://media.licdn.com/mpr/mpr/shrinknp_800_800/AAEAAQAAAAAAAAFrAAAAJGE4YTQ0ZThjLWRkM2MtNGM1OS1iNGMwLTZiZjliYmRkZTY2Nw.jpg
The same jsfiddle crops the top and bottom:
I guess it's because the height to width ratio is more than 4:3, so it's cropping the height to give a width of 300. What I want in that case is preserve all the height and just display whatever width there is. So basically I want the height to be 400 and the max-width to be 300.
Any ideas how I can do this? Maybe trap the image inside a fixed size div and let the extra image spill out?
EDIT
I've also tried this solution, which works fine for the portait, but I can't get the oversized width of the landscape to center in the container div.
HTML
<div class="mydiv">
<img class="myimg" src="https://www.sitebuilderreport.com/assets/facebook-stock-up-446fff24fb11820517c520c4a5a4c032.jpg"></div>
CSS
.myimg {
height:400px;
}
.mydiv {
overflow:hidden;
text-align:center;
margin: auto;
width: 300px;
height: 400px;
border: 3px solid #73AD21;
}
You can use background-size: contain; , maybe it should help.
I have a question about rounded elements on page. For example I have a small logo which isn't rounded and I want to put it on rounded background (120x120). Is it better to make div like this:
border-radius: 100%;
background-color: red;
background-image: url('logo.png');
background-position: center;
or just create an image in for eg. Gimp?
If you are going to be using the logo on a rounded background in future (e.g. Leaflets, email etc.) it may be easier to create a version of the logo in gimp or alternative, so it can be used anywhere very quickly.
If not it is really just personal preference, each has advantages and disadvantages.
border-radius solution
you can remove the background on some screens if you want to with media queries
quicker to achieve.
background size, color and radius can easily be changed at a later stage.
radius stays high quality/ resolution on any display.
image solution
better browser support.
Useable in future publications.
Two solutions:
Make the div containing the image(background div) have the border radius and make the image width an height of 100% in the div.
.background{
border-radius: 5px;
background-color: red;
background-image: url('logo.png');
background-position: center;
width: 100px;
height: 100px;
}
.img{
width: 100%;
height: 100%;
}
Give the image a border-radius as standalone
.background{
width: 200px;
height: 200px;
}
.img{
border-radius: 5px;
}
I have
body {
background: url(images/background.svg);
}
The desired effect is that this background image will have width equal to that of the page, height changing to maintain the proportion. e.g. if the original image happens to be 100*200 (any units) and the body is 600px wide, the background image should end up being 1200px high. The height should change automatically if the window is resized. Is this possible?
At the moment, Firefox looks like it's making the height fit and then adjusting the width. Is this perhaps because the height is the longest dimension and it's trying to avoid cropping? I want to crop vertically, then scroll: no horizontal repeat.
Also, Chrome is placing the image in the centre, no repeat, even when background-repeat:repeat is given explicitly, which is the default anyway.
There is a CSS3 property for this, namely background-size (compatibility check). While one can set length values, it's usually used with the special values contain and cover. In your specific case, you should use cover:
body {
background-image: url(images/background.svg);
background-size: cover; /* <------ */
background-repeat: no-repeat;
background-position: center center; /* optional, center the image */
}
Eggsplanation for contain and cover
Sorry for the bad pun, but I'm going to use the picture of the day by Biswarup Ganguly for demonstration. Lets say that this is your screen, and the gray area is outside of your visible screen. For demonstration, I'm going to assume a 16x9 ratio.
We want to use the aforementioned picture of the day as a background. However, we cropped the image to 4x3 for some reason. We could set the background-size property to some fixed length, but we will focus on contain and cover. Note that I also assume that we didn't mangle the width and/or height of body.
contain
contain
Scale the image, while preserving its intrinsic aspect ratio (if any), to the largest size such that both its width and its height can fit inside the background positioning area.
This makes sure that the background image is always completely contained in the background positioning area, however, there could be some empty space filled with your background-color in this case:
cover
cover
Scale the image, while preserving its intrinsic aspect ratio (if any), to the smallest size such that both its width and its height can completely cover the background positioning area.
This makes sure that the background image is covering everything. There will be no visible background-color, however depending on the screen's ratio a great part of your image could be cut off:
Demonstration with actual code
div > div {
background-image: url(http://i.stack.imgur.com/r5CAq.jpg);
background-repeat: no-repeat;
background-position: center center;
background-color: #ccc;
border: 1px solid;
width: 20em;
height: 10em;
}
div.contain {
background-size: contain;
}
div.cover {
background-size: cover;
}
/********************************************
Additional styles for the explanation boxes
*********************************************/
div > div {
margin: 0 1ex 1ex 0;
float: left;
}
div + div {
clear: both;
border-top: 1px dashed silver;
padding-top:1ex;
}
div > div::after {
background-color: #000;
color: #fefefe;
margin: 1ex;
padding: 1ex;
opacity: 0.8;
display: block;
width: 10ex;
font-size: 0.7em;
content: attr(class);
}
<div>
<div class="contain"></div>
<p>Note the grey background. The image does not cover the whole region, but it's fully <em>contained</em>.
</p>
</div>
<div>
<div class="cover"></div>
<p>Note the ducks/geese at the bottom of the image. Most of the water is cut, as well as a part of the sky. You don't see the complete image anymore, but neither do you see any background color; the image <em>covers</em> all of the <code><div></code>.</p>
</div>
Based on tips from https://developer.mozilla.org/en-US/docs/CSS/background-size I end up with the following recipe that worked for me
body {
overflow-y: hidden ! important;
overflow-x: hidden ! important;
background-color: #f8f8f8;
background-image: url('index.png');
/*background-size: cover;*/
background-size: contain;
background-repeat: no-repeat;
background-position: right;
}
Background image is not Set Perfect then his css is problem create so his css file change to below code
html {
background-image: url("example.png");
background-repeat: no-repeat;
background-position: 0% 0%;
background-size: 100% 100%;
}
%; background-size: 100% 100%;"
I'm not sure what you're looking for exactly, but you really should check out these excellent blog posts written by Chris Coyier from CSS-Tricks:
http://css-tricks.com/how-to-resizeable-background-image/
http://css-tricks.com/perfect-full-page-background-image/
Read the descriptions for each of the articles and see if they're what you're looking for.
The first answers the following question:
Is there a way to make a background image resizeable? As in, fill the background of a web page edge-to-edge with an image, no matter the size of the browser window. Also, have it resize larger or smaller as the browser window changes. Also, make sure it retains its ratio (doesn't stretch weird). Also, doesn't cause scrollbars, just cuts off vertically if it needs to. Also, comes in on the page as an inline tag.
The second post's goal is to get the following, a "background image on a website that covers the entire browser window at all times. "
Hope this helps.
Just add this one line:
.your-class {
height: 100vh;
}
vh is viewport height.
This will automatically scale to fit the device' browser window.
Check more here: Make div 100% height of browser window
body{
background-image: url(../url/imageName.jpg);
background-attachment: fixed;
background-size: auto 100%;
background-position: center;
}
Try this,
element.style {
background: rgba(0, 0, 0, 0) url("img/shopping_bgImg.jpg") no-repeat scroll center center / cover;
}
I had the same issue, unable to resize the image when adjusting browser dimensions.
Bad Code:
html {
background-color: white;
background-image: url("example.png");
background-repeat: no-repeat;
background-attachment: scroll;
background-position: 0% 0%;
}
Good Code:
html {
background-color: white;
background-image: url("example.png");
background-repeat: no-repeat;
background-attachment: scroll;
background-position: 0% 0%;
background-size: contain;
}
The key here is the addition of this element -> background-size: contain;
Here's what worked for me:
background-size: auto 100%;
width: 100%;
height: 100vh;
background: url("../img/hero-bg.jpg") top center;
background-size: cover;
background-repeat: no-repeat;
background-position: 0% 0%;
background-size: 100% 100%;
if you set min-height, for example:
min-height: 100vh;
You can use the below code to fit your background easily
body {
background: url(images/background.svg);
min-height: 100vh;
background-repeat: no-repeat;
background-size: cover;
}
Setting background size does not help, the following solution worked for me:
.class {
background-image: url(blablabla.jpg);
/* Add this */
height: auto;
}
It basically crops the image and makes it fit in, background-size: contain/cover still didn't make it fit.