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
On my html file I'm using:
<body style="background-image:url(images/back.png); ">
....
</body>
and on my css file:
body {
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
color:#fff;
background-color:#333;
font-family: 'Open Sans',Arial,Helvetica,Sans-Serif;
}
when I open the webpage on google chrome, it works fine, but on firefox the image wont appear. The same thing happen if I call the image from the Css file and not from the html file.
I got more info, when I use the we console in firefox, I get this error:
Image corrupt or truncated.
Try adding the following to your body CSS tag.
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;
I found this: https://bugzilla.mozilla.org/show_bug.cgi?id=941823
Basically large images may cause "Image corrupt or truncated" error on firefox, so I reduce the image to a size of 7494x3891 and it work just fine.
May be your image is currept file.
i try your code to replace one online image and it's work in chrome and firefox too.
check example [https://jsfiddle.net/wdhzujqn/]1
I'm building a website, and I just have to make a welcoming page.
It's a simple page: just a background with a button, which directs to our homepage. I just have one problem with the background: my background is too big.
How can I edit with CSS and HTML so that my wallpaper fits all the screens?
(I want to make the page unscrollable.) All I have so far in the CSS:
body{
background-image:url("voorpagina.jpg")
}
Thanks a lot!
P.S. I've already tried background-size:cover; but it didn't seem to work?
body{
background: url("voorpagina.jpg") no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
this should work if not you could use media-quires,
similar to your question 1
similar to your question 2
Has anyone found a solution for making a background image cover the entire div section on iOS? Code words perfectly on android. I am looking for a CSS solution
background: url('../img/slide/contact_background.jpg') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
-ms-background-size:cover;
background-size: cover;
Try removing "fixed" since it's probably causing the problem with iOS:
background: url('../img/slide/contact_background.jpg') no-repeat center center;
This should work on both Android and iOS browsers.
There is some more info here (and brief testing shows that it's not better in the iOS8): How to replicate background-attachment fixed on iOS
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%;