Can someone please explain to me what is going on with this property. Its a css background img the scales down to half size for retina pixel display density.
background: url('../img/kellin-retina.png') no-repeat scroll 0px 0px /200px 70px;
What is up with the 0px 0px part before the /200px 70px. If i take it out the background doesn't scale down. what are these two pixel sizes binding to?
Thanks
The first set 0px 0px defines the position of the background image (top left), the second set 200px 70px defines the dimensions, in this short-hand notation it represents background-size.
If you only have one value in the second set, it will be the width of the image. To just set the height, you can do something like:
background: url('../img/kellin-retina.png') no-repeat scroll 0px 0px /auto 70px;
The background will then be 70px high and the width will be scaled accordingly. See a demo, where the background image will always be half as high as the viewport.
To be sure of what you're stating, consider including all the properties like this:
background-image: url('../img/kellin-retina.png');
background-repeat: no-repeat;
background-attachment: scroll;
background-position: 0px 0px;
background-size: 200px 70px;
This is your code broken down to what it means. I don't exactly what your problem is, but try opening your browser's Dev Tools to uncheck and check the properties to see what effect it has on your page, and modify the numbers to better understand what you're doing. If you need help in making something specific work, I can help if you make a Fiddle of your code or show me the live site.
Related
I can't seem to eliminate the white space of the background photo. Below is all of the .css styling i've tried:
.prflBg {
ion-card-content{
background-image: url('../assets/img/headerBg.png');
background-size: 320px 158px;
background-repeat: no-repeat;
width: 100% !important;
overflow: visible !important;
margin-left: -10px !important;
padding-top: 5px !important;
padding-left: 0 !important;
padding-right: 0 !important;
}[![enter image description here][1]][1]
The "background-size" property is what determines how large your image will be. It's hard to know where things are going wrong without knowing the size of your background image, or the container you are trying to put it in.
However the background-size property is pretty standard to work with. The first number determines the width of the image, the second determines the height. There are also "word" choices you can use that do various things.
In your case I would recommend using "background-size:cover" as this is what the cover value does according to w3Schools:
Cover will 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
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 .
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%;
}
.icon {
background: #F0F0F0 url('../images/assets/user.png') no-repeat center left 10px;
background-size: 24px 24px;
-webkit-background-size: 24px 24px;
}
The above CSS works fine in all of the major browsers, but when I view it on any mobile device (HTC, Sony Ericson, Samsung, iPhone etc) the background CSS does not display, not even the color of the background. However, when I remove the 10px in the background-position style - it all works.
I have tried replacing 10px with em and % but it doesn't help the case. Any thoughts or suggestions?
The background property can only take a horizontal and vertical position—in your case center andd 10px—but you have specified three position values. This is why it works when you remove the third value.
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