While I was working on the project I faced with the problem of scaling in firefox under an operating system windows. If you change the scale of the browser page with a 100% up to 90% (for example), cut off the background-image, the problem appears only in firefox and only in windows or ubuntu, on mac os is working correctly. Possibly someone faced and will suggest how you can fix this bug.
example: http://jsfiddle.net/uL53nd7z/1/
div {
background-image: url(http://oi60.tinypic.com/jal5wh.jpg);
background-repeat: no-repeat;
height: 23px;
width: 23px;
}
You can add relative units to your height and width with background-size: cover so your image take all the content of your div. Depending on your target audience you can use em or rem so they gonna "follow" the modification of a page.
My code :
html {
font-size: 12px;
}
div {
background-image: url(http://oi60.tinypic.com/jal5wh.jpg);
background-repeat: no-repeat;
height: 1.916666666666667rem; /*23/12*/
width: 1.916666666666667rem;
-webkit-background-size: cover;
background-size: cover;
}
Result jsFiddle
Related
I have a background image in one of my element (code is on a separate file, style.css), it loads fine in most of the devices (iphone5, iphone5c, samsung galaxy), BUT NOT in iphone6 and iphone6plus (and some of ipad). Do you guys have any idea why?
.content-block {
background-image: url('image/img.jpg');
background-size: cover;
background-repeat: no-repeat !important;
background-position: center center;
min-height: 500px;
margin-bottom: 50px;
}
For a start, try using the shorthand version which allows for a more consistent background setting.
background: url('../image/img.jpg') no-repeat center center / cover;
As you can see I added ../ before your image directory, just in case the browser can't find its way to it.
You can find more thorough explanation about CSS shorthand usage which I am referring to, at the Mozilla Developer Network (MDN)
When background-size: 100%; is used I get the behaviour I want, but I don't understand why when I try background-size: contain; my Chrome browser shows the image tucked up in the corner, only about 20% of the browser window width. Firefox does the same.
www.moonwards.com
body {
background: url(http://www.moonwards.com/img/tycho.png);
background-size: contain;
background-color: #000;
background-repeat: no-repeat;
}
Why is that happening? CanIuse says these browsers shouldn't have trouble with this.
Instead of using background: url(http://link); Simply, try this,
body {
margin: 0 auto;
background-image: url(http:link);
}
This works for me. However, I also download the image and place it in the same folder as my Website. I also find myself using Photoshop quite a bit to size images and to control quality.
My site has to be responsive and I'm supposed to build it "mobile-first".
It's a one page site and each section is divided by an svg image.
So far I've gotten it the width resize perfectly by using background-size:cover; but a small part at the bottom of the image gets cut off. I've tried adjusting the height (auto, 100%, random pixel value) but that doesn't seem to do anything :/
Any ideas?
#breakpink{
background-image: url(../images/break_pink.svg);
background-repeat: no-repeat;
background-size: cover;
height: 100%;
text-indent: -9999px;
}
Full code:
http://jsfiddle.net/duyBE/
Same problem happened for me. There is a solution for this problem that is posted in the accepted answer on this page: CSS: Full Size background image
The solution was to use: background-size: 100% 100%
But there was a drawback, that is when you zoom out the background along with the content, the "body" background appears at the bottom!
Use "background-size: contain" instead of "background-size: cover",
1 background-size : cover
Property value "cover" will make the image to cover available space, if the image is small then it will be scaled up to cover available space, If the image is big then it will be scaled down to cover the available space, in either case, there is a chance that image may get cropped in order to fill the available space.
Pros: It will cover the entire available space.
Cons: Image may get cropped.
2 background-size : contain
"contain" will make the image scale up or down to fit inside the available space.
Pros: Full image is displayed.
Cons: Image may be look stretched. And sometimes you will see empty space around the image.
html {
background: url(../images/break_pink.svg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
This will probably fix your problem
I was having a similar problem. I've added a padding-bottom: 10px; and it worked for me.
add a margin at the bottom of the element:
#breakpink{
background-image: url(../images/break_pink.svg);
background-repeat: no-repeat;
background-size: cover;
height: 100%;
text-indent: -9999px;
margin-bottom:10px;
}
Had similar issue where the bottom of my header image was getting cut off. Resolved it by using
background-size: contain;
I had a similar issue. It turned out that the image file was damaged in some strange way. Opening the image in the file system worked, the image was OK, but it produced this error in the browser. I deleted the image file and downloaded it again and the image was displayed appropiately with the css rules.
add a min-height property
#breakpink{
// other codes are here
min-height: 150vh;
// to see area of the image
border: 2px solid red;
}
body{
margin: 0;
padding: 0;
background: url(image.jpg);
background-size: auto;
background-size: cover;
height: 100%;
text-indent: -9999px;
margin-bottom:10px;
background-position: center;
font-family: sans-serif;
}
I need to cover background in my site and I always see lags/slugs on mouse over or any other action. Do you have any idea how to fix this issue?
I have a working example here (If I didnt update the code yet) : http://natgeo.geryit.com
ul#posters li {
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
float: left;
height: 170px;
position: relative;
width: 25%;
}
It appears webkit doesn't cache the resized image and renders it every time, causing the lag.
You're out of luck when it comes to background-size in chrome.
I've seen people do it with Javascript / jQuery. See http://srobbin.com/jquery-plugins/jquery-backstretch/
I'm using the new CSS3 spec "background-size" to have a background image that slightly overflows the size of the page. It's working fine in webkit (Chrome & Safari) but the "-moz-background-size" property is not working at all in Firefox. The unusual thing is, if you view the site live, the "-moz-background-size" property IS showing when viewing the site with Firebug! The FF docs say that it is supported as of 3.6 and I'm running 3.6.
Here's my code:
#media screen and (max-width: 1150px) {
/* special sytles for browser windows less than 1150px */
body{
-o-background-size: 130%; -webkit-background-size: 130%; -khtml-background-size: 130%; -moz-background-size: 130%;
background-size: 130%;
}
#trans_fake{
-o-background-size: 130%; -webkit-background-size: 130%; -khtml-background-size: 130%; -moz-background-size: 130%;
background-size: 130%;
}
}
Any debug suggestions?
EDIT
I'm more confused now... QuirksMode.org is reporting a "white" box rather than red or green to indicate css3 background-size percentage-based compatibility in Firefox 3.6 :(
http://www.quirksmode.org/css/background.html
I was running into the same issue this morning and what solved it for me was making sure the image was listed ahead of the background-size property. It was working in one instance and not in another. Why? The order of the CSS properties. Try this.
.front #logo {
height: 58px;
width:323px;
margin-left: 10px;
background:url(../imgs/logo-x2-retina.png) no-repeat;
-o-background-size: 100%;
-moz-background-size: 100% auto;
-webkit-background-size:100%;
background-size: 100%;
margin: 0 auto;
This turned out to be a CSS mistake on my part, I had a
body{
background:url() top center no-repeat;
}
later down the page which was somehow overridding the Firefox "-moz-background-size: 130%". So, if you're having trouble, give
body{
background-size: 130% !important;
}
to your CSS in Firefox and it might solve the problem.
Your page looks the same to me in Firefox 3.6, Firefox 4.0 and Chrome, but I can't see any background-size in any of it? Do you have a link to a page that actually demonstrates the problem?
My initial suggestion would be to specify both width and height and see if that works:
-moz-background-size: 130% 130%;
Change your CSS background from
background:url(../imgs/logo-x2-retina.png) no-repeat;
to
background-image:url(../imgs/logo-x2-retina.png);
I am wrote:
background-size: 100% 100%, auto;
And all work