I am building a small website project for a class of mine and I seem to notice whenever I clink on a link on my site, the page flickers. I assume it's due to it being a fairly-sized file.
My code is as follows:
body {
background: url("../img/veggiesOnWood.jpg") no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
The only other thing in my stylesheet is:
.main {
background-color: #FFFFFF;
height: 500px;
width: 500px;
}
When I upload the image online and link the background-image to that url, the flickering issue is solved. But when I link it back to the directory on my computer, the flickering is back. I tried reading into it online but no success.
Do you guys have any thoughts or solutions?
In my opinion, when you upload your site online it's the server that solves the flickering issue because I believe that server's has an impact on web performance. However this is just my opinion.
Related
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
Hello I have a problem in my website. In the pc version is working perfectly but when you go into a mobile or tablet.
The code I have actually for the Background is this:
background: url('http://i.imgur.com/aUiwgHW.jpg') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-size: cover;
I don't see any problems in mac! It is a nice website :)
Yeah, this looks fine for me as well. However, if imgur is throwing that error when you load it, you can just move the image to local storage instead. Rather than having your current URL(), just download the image and link to it within your project folder that you have hosted -
i.e background-image: url(example/*.jpg).
This makes it so your background won't be reliant on imgur to load, and instead will just use the file internally.
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 on Ubuntu 14.10 developing a website.
Chrome does not render the background correctly. The bottom renders fine, which is the footer that covers the entire width. However the background of the content div is just white.
See the image for reference (I'm new to Stackoverflow and need more rep to post images):
https://www.dropbox.com/s/rqnlg9eh4k7cbv5/white-background-os.png?dl=0
The problem does not occur on OS X or Windows, and the choice of browser does not affect the problem.
I'm using a Alienware M14X R2, so I thought that maybe the Nvidia drivers could be the problem but they are up to date.
Code for the background:
It only happens on this particular site, so I'm guessing something's wrong with my CSS. What's so weird is that it's just with Ubuntu (and I'm guessing several other Linux distributions as well)
Basically I have this:
HTML (homepage.ejs)
<div ui-view ng-app="myApp" id="wrap-content">
<!--Content swapped with Angular and ui-router-->
</div>
CSS:
#media screen and (min-width: 1024px) {
html {
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;
}
div#wrap-content {
width: 900px;
height: 84vmin;
overflow: hidden;
margin: 0px auto;
position: relative;
top: 45px;
}
... a bunch of other stuff
}
Any help is much appreciated.
Okay so I just solved this by accident. Applying the background to HTML caused this weird problem. Changing it to:
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;
}
Solved the issue. Hope this can be useful to anyone ever having the same problem!
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