This question already has answers here:
CSS Image size, how to fill, but not stretch?
(18 answers)
Closed 3 years ago.
I want to set some background image size using CSS.
I am able to set the size using the below css codes. I have been reading up on css formatting at w3schools, and also referred to the below stackoverflow post:
background: url([[pix:theme|cat/default]]) no-repeat center bottom;
background-size: 180px 200px;
I have tried all the methods, including contain and cover. However i keep getting the image stretched and blurred. How can I do this without blurring the image? FYI original image size is 128Kb 1210x1643px
Sooo,
You cannot stretch the image without bluring or loosing quality.
I recommend you to have a high quality image and put the image in a kinda matching background-colored div.
Then you can use either media-quires or some JavaScript to keep the image as big as possible.
Also it would be helpful to see some of your code, or have a better description what you are trying to do. :)
Related
This question already has answers here:
Flip vertically a background-image every time it repeat-y
(5 answers)
Closed 6 years ago.
I have an image
If I set this image as a background with window being larger than the image,
I get "broken" background, where each picture stands out. Basically that:
Is there a away to created a continuous background below programmatically, so that the pattern would continue, as the window gets bigger in CSS (just flipping and adding the same image over and over again):
Thank you.
The answer is: You can't. You can not flip a background image using just CSS.
Possible Solutions for you :
Looking at your problem, if you do not want to repeat your image, then set
background-repeat: no-repeat
And you can also set
background-size: cover;
so that the image covers 100% of your container.
And if you want the flipped image at the bottom of your container then edit the existing image in photoshop and use that as the background image.
I'm having a little problem with one of my background images in a div element. I'm using the following CSS:
.myBox
{
background-image:url('....');
background-repeat:no-repeat;
background-size:cover;
}
My background image is a picture with some people on it. Now, if I increase the width of my browser window, at a specific point, some of the people are cutted off (due to the automatic resize of the image with 'background-size:cover').
My question is: Is there any option (or jQuery plugin), to set a specific part on the background image that will be always visible on all window sizes and also fill the whole element?
There are a variety of solutions you could try; however, you might want to start with something simple like applying a background-position.
https://developer.mozilla.org/en-US/docs/Web/CSS/background-position
Using the background image of the group of people as an example, you might set background-position: top so that their heads never get cut off. You can also set the vertical and horizontal position in pixel or percent units.
try boostrap3 img-responsive class
.img-responsive Makes an image responsive (will scale nicely to the
parent element)
http://www.w3schools.com/bootstrap/bootstrap_ref_css_images.asp
This question already has answers here:
When to use IMG vs. CSS background-image?
(31 answers)
Closed 8 years ago.
Should I use the <img> tag or should I use a div with css background-image?
If you want the image displayed normally on the page, then i would suggest using
img because it can moved positioned to your prefered area alot more accurately, but the background-image should only be used if you want the image to be the background of your page or of an object.
If you need create a kind of tumbs you must use <img> .And for background use background-image.
All browsers not interpreted the css rules in the same way.
Sorry for my english =/
Well, is your image a background image? If so, then use background-image. That is what it is made for, so you should use it.
If not, then use <img>
Background images usually have elements on top of them, such as text, for example.
Images are generally elements of their own, like blocks on the page, such as a <div> for example.
Having said that, there are some "advantages" with using <img> vs. background-image. For example, background-image will disable the users ability to drag and drop the image onto their desktop. This is not to say that they cannot save the image, they can, very easily, this is just one difference between the two.
I have an image that I like. I would like to use this SMALL image to fill my page but the image has a gradient effect so I cannot use repeat. Is there any way I can make it so the image is stretched to fill the page with CSS?
No, you cannot set the size of a background image. You'd either have to use repeat or strech the image itself with a a graphics editing program.
You could also use an workaround with an IMG tag and CSS: Stretch and scale CSS background
I realize this is a rather old question, but seeing as I stumbled upon it, I might as well put an answer here.
It is possible to change the size of a background-image by using the background-size CSS property, like so:
.class {
background-image: url(....);
background-size: 100% 100%;
}
Take a look here for more: CSS3 background-size property.
i have a div that is 90x110 how do i restrict the background image i need to use to this size? background image is 120x100?
While the background image will be cropped to the size of your div automatically, in case there's any other content that doesn't stay in, you can always set overflow to hidden in your CSS:
overflow:hidden;
You can also resize your background images, if there's a need. Please have a look at this and this to see how it can be achieved (there are multiple ways).
Oh, you may also want to have a look at a similar SO question posted a few hours ago.
The div will not grow larger, the only portion of the background image that will be visible will be a 90x110 rectangle.