Every now and then, the background image on my website appears randomly on the sides of the page as seen here: http://i.imgur.com/0HFJF9w.png
It may happen to you too, but if it does, a refresh clears it: http://centralsirescoop.com/proven-sires/harrison/
The couple of lines of code regarding the background (found in body) is as follows:
background-color: #c8dbfb;
background-image: url(images/clouds.jpg), url(images/grass.jpg);
background-repeat: repeat-x, repeat-x;
background-position: 0% 0%, 0% 100%;
Thank you.
EDIT:
Browsing on Window 7, Chrome browser v28
EDIT2:
Error does not seem to occur in Internet Explorer 10
There are some rendering issues with Chrome that I know of, and have experienced multiple times myself. Surprisingly, my searches have not revealed much info on this... But it is definitely there. Even on my Linux system, as well as Windows system.
Try in Firefox and Opera too if you can. I suspect it is Chrome.
Related
I am currently working on a website and everything works and functions fine except the background image on mobile. I have quite literally tried everything and it will not show on mobile even though it shows just fine on my laptop. The phone I have is an iPhone 6s and it just doesn't want to show. I have used the same CSS code in other projects and it works just fine but it won't currently.
I have done some testing and the issue seems to be the background-position: cover. But what is a way around this without making the image look bad. Also when I click the mobile nav button to open the menu... you can see the image show in the back which is extremely strange...
Does anybody have any possible solutions to this? It's extremely frustrating.
Here is the link to the site: http://mujomusic.net/WDV351/Konstrukt/index.php
and the code:
height: 100vh;
background-image: url('images/main.jpg');
background-attachment: fixed;
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
Would u give a screenshot ,because it is working perfectly fine on mine.
Could be cache Issue.
I have a background image with background-attachment: fixed, which works fine in all browsers in localhost but does not show in chrome on the server.
.bg-contact{
background-image: url(../images/bg-contact.jpg);
background-repeat: no-repeat;
background-position: center;
background-attachment: scroll;
background-size: cover;
}
Please help
Try clearing the cache on that Chrome.
There's also an extraneous { which maybe Chrome is sensitive to.
Couple more things: try adding ' ' as in ('../images/bg-contact.jpg'), and check AdBlock in Chrome.
Check the file extensions for the background, remember that capital letters make difference for example on your PC JPG and jpg is the same thing but on the server those are completely 2 different pictures.
Also include link to the website or add the code of it if you have problems with it.
-----New Idea For Answer------
You have:
background-image:url(../images/bg-contact.jpg);
Make it with a full path to the file
Use Chrome Developer Tools from your Chrome Browser to get to inspect the element where picture should be displayed, then check if the value of background-image is:
-Not crossed: then is should be working and it is not a problem with a code but with the browser.
-It is crossed: Then your background property is not working, you can add !important to it to get a quick fix but you should find the reason behind it and fix it asap.
Turned to be path issue, especially for Wordpress. When one is setting
background-image: url('bg_1.jpg');
in his themes/myTheme Folder, the browser is loading from http://127.0.0.1:80/wordpress/bg_1.jpg
, while the file is actualy in C:\xampp\htdocs\wordpress\wp-content\themes\myTheme
That is why one should say:
background-image: url('res/bg_1.jpg');
and make new folder wordpress/res in which bg_1.jpg will reside.
Safari 8 on OS X Yosemite seems to have a really annoying bug when rendering web pages with background-position: bottom; in CSS.
Somehow the background is positioned about 60 px below the bottom of the page and it's really messing up the look of some sites I've made earlier.
Is there a workaround to address this bug, for example by targeting Safari 8 specifically?
Thanks in advance!
I've been developing a large single page application and in the process have run across a series of rendering artifacts, all of which are specific to chrome. My version of chrome is the most up to date as of this post: Version 39.0.2171.95 (64-bit). Both of these only happen on my macbook pro retina monitor, if I move the window either partially or fully to another monitor, the part that is on that monitor no longer shows the artifact (after chrome repaints) Such a first world problem I know...
My gut is telling me that if I tweak a certain CSS property or go about something slightly different, I can avoid these issues, but everything I've tried has failed. So I look to you wise members of the stack community, gather 'round and hearken to my tales:
First Artifact: Simple hide show fails hard in a seemingly random but highly reproducible way.
Check these three images, one is not like the other!
Each little icon at the top hides or shows a different div. They're all equivalent, just show a different number of those traffic related icons. The middle one will not show up only when i first click the left one (one with all the cars). I think it has to do with the fact that the one with all the cars has a scroll bar. If I then go into chrome inspector and like check or uncheck pretty much any property about it, chrome repaints it just fine. Again this all works on a different monitor/literally any other browser (including ie8) so it's not some dumb coding bug.
Second Artifact: When I scroll, a fixed div at the bottom of my page gets cut and moves with the page.
Notice that the blue bar gets cut! The blue bar has CSS as follows:
position: fixed;
bottom: 0px;
left: 0px;
right: 0px;
border: 1px solid #777777;
background-color: #e5f1f8;
z-index: 15;
It doesn't even get cut right where there is some sort of divider in the html. There is no element at at the line of the cut, the only nearby element is the white box (and there's no like padding or margin from that white box.. it's literally getting cut randomly in space)
Any help would be appreciated. This is a huge pain when all we have to demo is our retina screens.
Just had someone else on SO with issues getting elements to render correctly on Chrome with a Retina display too: How can I remove the single pixel space between these elements on retina displays?
It looks like Chrome on a Retina display may have some rendering engine issues when it comes to rendering page elements. You can confirm whether its an Engine issue by seeing if the same issue occurs in the latest version of Opera, as it uses the same Blink rendering engine as Chrome (separate fork from Webkit that Safari uses).
If its an engine issue, you may be limited in your options to fix the issue until Google releases a fix. Otherwise there may be a mad genius on here who can work around the problem.
Best of luck :)
As for the position fixed bar try editing the css to this
position: fixed;
bottom: 0px;
width:100%; /* or whatever your width is */
height:50px; /* or whatever your height is */
border: 1px solid #777777;
background-color: #e5f1f8;
z-index: 15;
As for the display problem, if it works fine on other webkit browsers that usually indicate that there is an issue with the browser itself and you can't do anything about it except maybe make a rule for the screen size that is having the display issue, to show the website or app in a different style or maybe zoom in or out?
Anyways best of luck with your problem
I am trying to convert a PSD to HTML and I am facing a problem. My site works in all major browsers except IE8 and IE7. The background is not showing at IE8 and IE7.
The background is a PNG image and it is repeated. I know the way for non-repeated images but for repeated images what do I need to do? Here is the CSS that I have used:
#footer-top {
padding: 20px 0;
background: url('img/footer-bg.png')repeat;
width:100%;
overflow:hidden;
margin-top: 38px;
}
See the blog post PNG background-repeat bug in Internet Explorer 7 and 8
It says:
Apparently Internet Explorer 7 and 8 still haven’t gotten PNG quite right. While working on one of my current projects, I stumbled onto a bug with repeating PNG background images.
For this project, I have a page template with several container elements that all have a 1 pixel by 1 pixel PNG background set to repeat, and it looks great when testing it in IE 7 and IE 8. So, I created my next page template with the same styling. This time, IE 7 and 8 both choked when handling the background-repeat. Instead of repeating, both of these browsers inexplicably tried to stretch the 1×1 image across the entire container. The PNG happened to have 60 percent alpha transparency, but I’m not sure that matters. A coworker suggested making it a 10×10 pixel image instead, just to see what happens. Surprise, surprise. That fixed it.
I did a little more searching to see if anyone else had come across this and found this recent blog post. The author also found that this bug appears to occur at random, and that a 4×4 pixel image solved his problem. Since there’s no very little file size difference between 10×10 and 1×1, I’ll stick with the 10×10. But I agree with him that this bug created a cool effect, and it would be great if it could be replicated at will.
Maybe you need a space before repeat?
background: url('img/footer-bg.png') repeat;
(I don't have IE7 or 8 handy to check this.)
I dear , I have find the easiest way . Just try it
background-image:url(images/back-bg.jpg) !important;
background-repeat:repeat !important;
background-color:#fff !important;
background-position:left !important;