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/
Related
My background image is not showing on iOS devices, it becomes grey.
I can't test it on windows and also can't afford to upload every 10 sec a new fix.
I found many different answers on internet, I already tried some but none of them worked for me.
Here is my CSS code:
.img-bg-index {
background-image: url("../img/Monteurzimmer-BG.jpg");
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center right;
background-size: cover;
min-height: 95vh;
position: relative;
}
The background attachement caused the problem, it seems that it is disabled in safari browsers:
How to replicate background-attachment fixed on iOS
I used a media query and changed the background-attachment to initial on a certain max-width:
#media ( max-width :856px) {
.img-bg-index {
background-attachment: initial;
}
}
This is a bit of an odd one and may either be a browser glitch or something wrong with the image when saved out in Photoshop but I thought I’d ask anyway. When re-sizing a background image that is set to background-size: cover; an odd 1px line seems to appear at the base of the image. It become quite noticeable on the website as the background colour is black. It’s not one colour which makes me wonder if it is browser glitch, see below:
I have tried multiple images and I think it can be seen in Chrome and Safari. The glitch can definitely be replicated on this jsfiddle in Chrome (you’ll need to rescale the browser window and it needs to be quite large to see it).
I believe this an issue between background-position: bottom and background-size: cover. I have noticed that if we remove background-position: bottom there is no glitch. Probably an issue with Webkit browsers even though I haven't found a bug report for this.
You can solve this issue by using background-position: 50% 99% until the bug is fixed. If someone has a better answer I'll be interested to know :).
body{
background: #000;
}
.hero{
background-image: url('http://i.imgur.com/R7WAday.jpg');
height: 250px;
width: 100%;
background-size: cover;
background-position: 50% 99%;
}
<div class="hero">
</div>
I've just had this problem, found little about it online, and found this post.
I found this post from 2009(!) where the author suggests using:
.hero {
background-position: 49.999% 0;
}
or
.hero {
background-position: 50.001% 0;
}
They had varied success for me in my situation. I ended up mostly using:
.hero {
background-position:bottom -1px left 0;
}
As my designs allowed me to reduce the size by -1px, and this got rid of the issue.
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.
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