Is anyone else having this issue? I create websites for a living, and some employ the use of the css property background-size: cover. All of the sudden about 1 week ago, all of the sites with this property no longer display right in Google Chrome. (all other browsers are working fine.) Is anyone else experiencing this? Is it just MY google chrome or did something change? Because the backgrounds were displaying properly until about a week ago, and I did not change anything. They just stopped displaying properly, seemingly out of nowhere....
Best practice: always set background-image first and then background-size.
You only need to use !important :
background-size: cover !important;
I just ran into this problem in Chrome, too.
None of the above answers worked for me. Specifically, I was trying to set the <body> element background to background-size: cover. However, the background image would never extend vertically to fill the page.
After some trial and error, I found that setting the <html> element width and height to 100% fixed the problem in Chrome. (For what it's worth, changing the <body> element's width and height seemed to have no effect.)
In my css, I have the following rules to fix the issue:
html {
width: 100%;
height: 100%;
}
I was having the same problem all of a sudden w/ not only GC but also FF and Opera. i was using a php function to pull random images for my background and this is what i had....
CSS:
.main-slideshow .video img {
cursor:pointer;
width:550px !important;
height:340px !important;
background-repeat: no-repeat;
-moz-background-size:cover;
-webkit-background-size: cover;
-o-background-size: cover;
background-size: cover; }
and HTML/PHP:
$result .='<img alt="" style="background:url('.$thumbnail.')" src="/images/play1.png" /> ';
it was working for some days and suddenly background-repeat and background-size stopped working. so this morning i found out that the following changes are working perfectly for GC (v21), FF (v14), Opera (v12) and Safari (v5.1.7)...still no luck w/ IE though :(
CSS:
.main-slideshow .video img {
cursor:pointer;
width:550px !important;
height:340px !important;
-moz-background-size:cover;
-webkit-background-size: cover;
-o-background-size: cover;
background-size: cover; }
HTML/PHP:
$result .='<img alt="" style="background-image:url('.$thumbnail.')" style="background-repeat: no-repeat" style="background-size:cover" src="/images/play1.png" />';
may be it's a lousy solution but it's working for me (so far) hope this helps some one :)
The following is a solution to the problem, but it won't be for everybody. I estimate that this solution will help a minority of the people experiencing the author's problem.
The background-size option can stop working in chrome if your container is too small, vertically, compared to your background image.
I was in a situation where I had to position a small portion of a large background image across a div that was 7 pixels tall.
In the Chrome debugger, changing the div height to 9 pixels "snapped" the background-size into place.
My ultimate solution was to restructure my divs so that I would not run into this problem.
To see if this solution will help you, in the Chrome debugger, enlarge your div. If, at some point, the background-size snaps into place, then you know this is the issue.
Old question but has similiar issue and it turned out I needed to add and to the empty div's I was applying background-size: cover to.
You must do CSS hacks for google chrome.
Use body:nth-of-type(1) .elementOrClassName{property:value;}
only for google chrome.
for your case,
nth-of-type(1) .elementOrClassName{background-size:80px 60px;}
Try this
background-size:contain;
For me, following worked for Chrome, IE 8, IE 9:
.itemFullBg{
background:url('image/path/name.png') no-repeat;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-size:100% 100%;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader
(src='image/path/name.png',sizingMethod='scale');
}
You can fix the problem by setting the height of the tag.
For example, if you have a page that has a background image, set the height of the html and body tags in the CSS, like so:
html { height:100%; min-height:100%; } body{ min-height:100%; }
hope this helps
Instead of using:
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
Use:
-webkit-background-size: 100% 100%;
-moz-background-size: 100% 100%;
-o-background-size: 100% 100%;
background-size: 100% 100%;
Related
I have the problem that my background suddenly cuts off. It worked normally before on chrome, but now I cuts off in the middle of the page (http://prntscr.com/kwsaxn).
My CSS Code:
html, body {
background: url(../images/background.jpg) no-repeat center fixed;
background-size: cover;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
}
Executed in the header:
<link rel="stylesheet" href="css/style.css">
I don't seem to find any options online how to solve that, but maybe it's as simple as in my last questions and I'm just missing something.
Maybe it has something to do that the is called right where it ends, but I had it like that before when it still worked.
PS: I tested it on edge, chrome and my iphone safari.
Thanks :)
please give the link of website or codepen editor
I'm hoping someone might be able to help me with an issue that is beginning to drive me a little bit insane ...
I am working on a new webpage - www.romaheritage.co.uk/beta - and I'm having an issue with a background image near the bottom of the page in the "contact" section. Testing the page with two different browsers, the road image appears in Firefox, but does not appear in Google Chrome and I have no idea why!
What's more frustrating is I have a background image set at the top of the page and this works in both browsers without an issue!
the CSS I'm using is this (although feel free to inspect the website itself);
background-image: url(../img/contact.jpg);
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
Any help anyone can give me would be gratefully received, because a bit like Neo in the Matrix, I'm now just seeing lines of code but getting lost in it ...
The issue is with background-attachment: fixed; remove that to make just make the image appear. Or add backface-visibility: hidden;, to .contact-parallax-bg restore the fixed effect.
.contact-us-section{
position: relative;
}
remove position relative and you will have "parallax" effect and image will be there
I need to set this background image in my website for chrome and all other browser but in chrome it work perfect but in firefox and other browser doesn't work perfectly. Even for firefox I tried the -moz- tag but doesn't work.
{
position: relative;
background:url(backgrdnd2.jpg);
background-repeat:no-repeat;
-moz-background-size:100% 100%;
background-size:100% 100%;
}
try backgroud-size:cover;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size:cover;
background-size: cover;
for the rest of the browsers
hope it helps.
The background property is supported in all major browsers. See: http://www.w3schools.com/cssref/css3_pr_background.asp
I'm not sure what element you are applying these styles on, but perhaps that element has no height or width? Try inspecting the element in Chrome or using Firebug in Firefox to determine if your background image is loading, and whether or not the element you are applying the background to is visible.
First, in your css you should put the selector, where do you want to apply the style, for example the body
body {
position: relative;
background:url(http://2.bp.blogspot.com/-m7blv8kfKxs/UiAWmV9uJXI/AAAAAAAAJos/RsYP_YC9FbY/s1600/Background-Textures2.jpg);
background-repeat:no-repeat;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size:cover;
background-size: cover;
}
check this link for more information about selectors.
http://www.w3schools.com/cssref/css_selectors.asp
I also used #EduadoRobles suggestion, check this
http://jsfiddle.net/agusgambina/A8nmp/
I'm trying to get my background image to stretch across the entire page, but so far i have this:
This is the picture i want stretched across the browser window:
My external CSS contains the code below:
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("mybackground.jpg")}
Can anyone tell me how I can edit the CSS file to fix my problem?
You can use:
background-size: cover;
However please bear in mind which browsers this supports. For example, this won't work in IE8 and below.
Another option would also include:
body{
background-image:url("mybackground.jpg")
background-size:contain;
background-repeat:no-repeat;
}
Use background-size: cover. Note its browser support.
MDN documentation.
Background size will do the trick:
body {
background: url(images/bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
Check this out for more info:
http://css-tricks.com/perfect-full-page-background-image/
You need to make this an <img> tag, with a low z-index, with position: fixed and then for the <img> tag, use height: 100%; width: auto or the opposite.
This method is cross-compatible for all browsers.
Have you tried using
background-size: 10px 10px
Change 10 to the width and height of the body
You can also do
background-size: 100%
I'm just starting on a website and I already encounter a small problem where I can't find a specific solution to.
I wanted to make my website background fit any screen size in width, height does not matter.
This is the link to my image:
../IMAGES/background.jpg
EDIT
I have no idea what's wrong, but for some reason the body doesn't even want to get the background image. It just displays a plain white background.
body
{background-image:url(../IMAGES/background.jpg);}
you can do this with this plugin http://dev.andreaseberhard.de/jquery/superbgimage/
or
background-image:url(../IMAGES/background.jpg);
background-repeat:no-repeat;
background-size:cover;
with no need the prefixes of browsers. it's all ready suporterd in both of browers
Try this ,
background: url(../IMAGES/background.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
For more information , follow this Perfect Full Page Background Image !!
You can try with
.appBackground {
position: relative;
background-image: url(".../img/background.jpg");
background-repeat:no-repeat;
background-size:100% 100vh;
}
works for me :)
Try this, I hope it will help:
position: fixed;
top: 0;
width: 100%;
height: 100%;
background-size: cover;
background-image: url('background.jpg');
body{
background-image: url(".../img/background.jpg");
background-size: 100vw 100vh;
background-repeat: no-repeat;
}
Try this:
background: url(../IMAGES/background.jpg) no-repeat;
background-size: auto auto;
.. I found the above solutions didn't work for me (on current versions of firefox and safari at least).
In my case I'm actually trying to do it with an img tag, not background-image, though it should also work for background-image if you use z-height:
<img src='$url' style='position:absolute; top,left:0px; width,max-height:100%; border:0;' >
This scales the image to be 'fullscreen' (probably breaking the aspect ratio) which was what I wanted to do but had a hard-time finding.
It may also work for background-image though I gave up on trying that kind of solution after cover/contain didn't work for me.
I found contain behaviour didn't seem to match the documentation I could find anywhere - I understood the documentation to say contain should make the largest dimension get contained within the screen (maintained aspect). I found contain always made my image tiny (original image was large).
Contain was with some hacks closer to what I wanted than cover, which seems to be that the aspect is maintained but image is scaled to make the smallest-dimension match the screen - i.e. always make the image as big as it can until one of the dimensions would go offscreen...
I tried a bunch of different things, starting over included, but found height was essentially always ignored and would overflow. (I've been trying to scale a non-widescreen image to be fullscreen on both, broken-aspect is ok for me). Basically, the above is what worked for me, hope it helps someone.
This worked for me:
body {
background-image:url(../IMAGES/background.jpg);
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
}
Try this,
.appBg {
background-image: url(".../img/background.jpg");
background-repeat:no-repeat;
-webkit-background-size: 100% auto;
-moz-background-size: 100% auto;
-o-background-size: 100% auto;
background-size: 100% auto ;
}
This one works for me
Background image fix to screens with browser compatibility css
.full-screen {
height: 100%;
width: 100%;
background-image: url(../images/banner.jpg);
background-size: cover;
background-position: center;
//for browser compatibility
-moz-background-size: cover;
-webkit-background-size: cover;
-o-background-size: cover;
}
Although there are answers to this your questions but because I was once a victim of this problem and after few search online i was unable to solve it but my fellow hub mate helped me and i feel i should share.
Examples explained below.
Folders: web-projects/project1/imgs-journey.png
background-image:url(../imgs/journey.png);
background-repeat:no-repeat;
background-size:cover;
My major points is the dots there if you noticed my journey.png is located inside an imgs folder of another folder so you're to add the dot according to the numbers folders where your image is stored. In my case my journey.png image is saved in two folders that's why two dot is used, so i think this may be the problem of background images not showing sometimes in our codes. Thanks.
width: 100%;
background-image: url("images/bluedraw.jpg");
background-size: cover;
You can do it like what I did with my website:
background-repeat: no-repeat;
background-size: cover;
background: url("../image/b21.jpg") no-repeat center center fixed;
background-size: 100% 100%;
height: 100%;
position: absolute;
width: 100%;