I have an input field which has an icon inside of it, I did this by using css background
background: white url("user.png") right no-repeat;
the image is a bit big so I was wondering how do I resize the image to fit inside the <input> field.
background-size: cover or background-size: 100% 100%
It is a property of CSS.
Wouldn't it be easier just to resize the image in PS or another image editor, so that it's the right size?
Assuming this is something u want to achieve, you can size the background-image.
Use percentages to size it relative to height and width of the textfield
.input-fields {
background: white url(images/invalid.png) no-repeat;
background-position: 97%;
background-size: 8% 85%;
border-color: var(--red);
}
This will make it small enough to fit inside the textfield.
background-position: 97% (to leave some space at the end)
Related
I am trying to have a background image cover the vertical length of the page. When I add background-repeat: repeat-y; the image stretches. When I have background-repeat:no-repeat; it doesn't stretch. What is happening here? I don't want it to stretch, I just want it to repeat until the bottom of the page.
Here is the CSS:
.backgroundTest{
background-color:white;
background-image:url(../images/sideBanner.jpg);
position:absolute;
background-size:175px 100%; /* I need this, otherwise the background image is too big */
background-repeat: repeat-y;
}
The main issue is I want an image along the left side of the page (width 175 px) with all the content to the right of this image. I'll take any solution!
Use table where you can add contents in one column and image in another column.You can set width of image accordingly
try this,
background-size: 100% auto;
I'd wrap the image in a <div> and use the background-size CSS property with one of these two values:
contain
Scales the image as large as possible without cropping or stretching the image.
cover
Scales the image as large as possible without stretching the image. If the proportions of the image differ from the element, it is cropped either vertically or horizontally so that no empty space remains.
e.g.
.wrapper-container {
position: relative;
height: 100%;
width: 175px;
}
.backgroundTest {
background-image: url("../images/sideBanner.jpg");
background-repeat: repeat-y;
background-size: contain;
background-color: white;
position: absolute;
}
Kind of weird title, but couldn't think of better way to word it.
Basically I'm working on a website, and I want to use an asset I made in photoshop for a navbar that looks like a leather suitcase/belt background. Issue is, if I stretch it too far, it won't fit the screen. Basically if I use the CSS background-size: cover; background-repeat: no-repeat; property, it looks something like this
It fits nicely on the 100% width of the element, but as you can see, the image is clipped because it's not 100px as I want it to be.
If I used background-size: contain; background-repeat: repeat-x; properties my image would obviously fit nicely when it comes to height, but since it's not a seamless texture it doesn't clip properly horizontally. As seen on the image below:
Which looks pretty weird as you can see. Last but not least I tried using the 50% 50% trick - background-position: 50% 50%; background-size: cover; background-repeat: no-repeat;, which kind of worked but i still have a problem with it not fitting vertically (the edges are being cut off), as you can see here:
So I'm asking if there's a way to fit the image properly with CSS that I'm missing. Alternatively the second image i posted with repeat-x, however if there would be a way to check (probably with javascript/jquery) that once the image doesn't fit (ala second image), it needs to be flipped horizontally with scaleX so the edges fit, or should I simply downscale the image in photoshop? Thanks for your advice.
Have you tried :
background-size: (100% 100%);
Try using viewport to give the element width in accordance with the screen width (100vw = 100% browser width).
.nav-belt {
width: 100vw;
height: 100%;
}
I'm trying to set the background image using CSS but the original image is stretched.
How do I keep the original image size and set the background for the entire page at the same time?
body {
margin: 0;
background-image: url(background.png);
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
}
The original image is: Original Image
And the result is: Resultent Image
The difference is the background in my web is larger than the original.
Any help would be appreciated !!!
All you have to do is to remove background-size: cover,
then all should be fine.
You have a lot of options regarding the background image and size.
For your needs you can check this W3c and try the different options you can apply.
Remember that since you apply CSS to your Body, all your pages will "follow" those rules. But some of your pages might have different height from the others.
The result also, depends on the screen resolution of the client.
You have to deside what is your desired result in all screen resolutions.
Try to remove background-size:cover; & set width of image to your requirement.
background-size:cover;stretches the image to full background.
or
Please change your image extension from .png to .jpeg or .jpg because .png always stretches your image and after that the css property u have defined earlier will work properly.
What you can do is just remove, background-size:cover;
Now let's see what does that mean,
background-size
Because background-size CSS property specifies the size of the
background images. The size of the image can be fully constrained or
only partially in order to preserve its intrinsic ratio.
cover
A keyword that is the inverse of contain(contain value specifies that regardless of the size of the containing box, the background image should be scaled so that each side is as large as possible while not exceeding the length of the corresponding side of the container). cover scales the image as large
as possible and maintains image aspect ratio (image doesn't get
squished). The image "covers" the entire width or height of the
container. When the image and container have different dimensions,
the image is clipped either left/right or top/bottom.
To get much identification just try JSFiddle
For the more reference on background-size:
remove background-size: cover;
Thanks.
I found the problem.
the source image is open with a zoom of 35% therefore when I set the backgroud it stretch to 100%.
body {
margin: 0;
background-image: url(background.png);
background-size: 60% 60%;
background-position: center center;
}
Try like this:
.your-class {
background-image: url(background.png);
/* Required Height */
height: 800px;
/* Center and scale the image nicely */
background-position: center !important;
background-repeat: no-repeat !important;
background-size: cover !important;
}
I have a fixed, full screen background. I have another image a few hundred pixels from the top that I want the background to appear to emanate from. Looks good here: http://imgur.com/Rlki1Bk.jpg but when the browser is resized the centre of the background image moves vertically but the foreground image remains fixed so they are no longer aligned. Any help would be greatly appreciated.
EDIT: Some more info. The foreground image is position:relative, and here is the CSS for the background image:
.background {
background-attachment: fixed;
background-image: url('/background.jpg');
background-repeat: no-repeat;
background-position: 50% 50%;
background-size: cover;
}
Hard to tell what's going on without some code, but...
background{
background-image: url("my-image.jpg");
background-position: center top;
background-size: 100% auto;
}
This will ensure that the distance from the top of the window to the other image never changes because the height of the image remains the same, and the position of the image is always flushed to the top. The problem that you'll encounter is that depending on the width of the device your background may stretch.
On this page I have 2 background images:
(1) A blue sunburst that is set as a background image of <html>
html {
background: url("BEhmxDlyFwihBhnuPwHL8VU1fr59VGeXflJlinXMr5q.svg") no-repeat fixed center center / 100% auto transparent;
outline: 0 none !important;
}
(2) An image showing a crowd of arms in the air that appears at the bottom of every page. I use the sticky footer solution to make this stick to the bottom of each page
Everything works fine at normal browser widths, but once the browser width is below about 500px a white space starts appearing at the top:
and at the bottom
of every page. Previously I used
background-size: cover;
for the sunburst image, but this caused the website to crash the browser on iOS 6 (seriously), so I need to find a way to fix this without using this rule.
The white space is due to the browser positioning the image center center as defined in the CSS.
html {
background: url(BEhmxDlyFwihBhnuPwHL8VU1fr59VGeXflJlinXMr5q.svg) no-repeat center center fixed;
background-size: 100%;
outline: 0!important;
}
I thought the solution would be just setting background-size: 100% 100% as the current setting of just background-size: 100%; is 100% width and auto height. But it's bugged in Chrome - background-size:100% 100%; doesn't work properly in Chrome. There is a workaround answer on that question that might help.
However, if the background-size: 100%; is dropped for width < 500px, perhaps in one of your #media rules, then the background fills the page as expected. The rule is still required when the window is greater than the width of the image to stretch the image.
If you're not opposed to a JS solution, you could try using Backstretch.
Set the background-size to something larger than 100%. I think 200-250% will cover that area.
background-size:220%;
One side effect this has is the fact that it causes slight lag due to the size.
Here, Have this solution...
In this file...
http://festivals.ie/static/C5z61WeZeCfyTRbmu6lNPsxXxwhibmxExq6ADwtSPjh.css
On line no 793,
this code is there in the last part of that line...
html{background:url(BEhmxDlyFwihBhnuPwHL8VU1fr59VGeXflJlinXMr5q.svg) no-repeat center center fixed;
background-size:100%;
outline:0!important;}
Add this property : background-position: 0px 0px;
Making the code:
html{background:url(BEhmxDlyFwihBhnuPwHL8VU1fr59VGeXflJlinXMr5q.svg) no-repeat center center fixed;
background-size:100%;
outline:0!important;
background-position: 0px 0px;}
And fyi, as andyb pointed out the white space is the image leaving its top position to be centered, thereby making it look like a white space starting to appear..
Hope you get the point.
Regards