I'm building a Grid with background images but things go wrong in Safari.
(Safari 7, 6 and 5, tested in Browserstack )
This is the website. As you can see in Chrome, FF or IE there's a grid with background image set inline.
http://fourseasonsrally.com/1
In Safari I sometimes see the background image but then it suddenly disappears.. I could not reproduce the error in other browsers.
This is what the grid looks like on chrome
UPDATE 1: Shorthand CSS
It seems that shorthand css is ignored by Safari, I removed all the shorthand properties but the problem persists.
Any idea what might be going wrong?
Thanks!
You mean header logo (FOURSEASONS RALLY) not visible in safari - changes the below css.
present css:
.header {
background: url("../img/logo.svg") no-repeat scroll center center / contain #111;
}
remove the " / contain"
.header {
background: url("../img/logo.svg") no-repeat scroll center center #111;
}
Related
I want to load a huge jpg with 48000x990px as background-image.
HTML:
<div id="car-canvas-wrapper">
<div id="car-canvas" style="background-image: url('http://via.placeholder.com/48000x320');"></div>
</div>
CSS
html,
body {
padding: 0;
margin: 0;
}
#car-canvas-wrapper {
width:100%;
position: relative;
}
#car-canvas {
background-size: cover;
width: 100%;
padding-top: 51.5625%;
}
You will find a example in CodePen: https://codepen.io/anon/pen/ypyMpZ
In Chrome, Edge, Internet Explorer and Safari everything works great. But in Firefox there are some heavy problems. Sometimes the image loads when i clean the cache. If its loads and i resize the window, the image disappear. In the inspector i see, after resize, that the background-image got 0x0px.
Obviously the picture is too big. Question: Why can all browsers except Firefox display the image?
Edit: I removed the huge image from my webserver and insert a placeholder image (48000x320px). Keep that in mind if you have a similar problem and read this thread.
Firefox fix on images could be more than just this simple solution but i have found this as a working solution on previous project.
Just add the following css:
#car-canvas-wrapper { display: block;}
Should do the trick.
I have a parralax scrolling CSS implementation which works perfectly well for Safari and Firefox, but not Chrome.
The style to achieve parralax scrolling:
#somediv {
background: url(../assets/img/someImage.jpg) no-repeat fixed;
background-position: center top;
}
This style is being applied to a el.
Strangely, when I refresh the page at a section where the fixed background image should be, it appears, only for that particular section. When I start scrolling to see where I have set the other fixed backgrounds, they don't show until I refresh.
I've noticed users having performance issues with their parralax scrolling on Chrome but I'm not at that stage, just need it to work.
Any help is greatly appreciated.
I have made a responsive webpage which has a logo in center position. I could do it using the css such as logo {width: 615px; margin: 0 auto} which works well in firefox and opera browser. But it doesn’t work well in chrome browser. It moves slightly left in chrome browser. I want that the logo always display in center position (Desktop and Mobile) on firefox, opera and chrome. How could I fix it? For your kind information, there has some contents in right side of this webpage.
Demo: https://dl.dropboxusercontent.com/u/211935016/mobile_responsive/index.html
Remove the overflow: hidden which you don't really need for the logo. That should solve the issue.
.fix{
overflow: hidden;
}
I am testing a site on localhost with Firefox and now I am seeing that the background image and color I gave isn't showing at all in Chrome. In IE it is showing in IE9 but not in IE8 or 7... So In Chrome, IE7 and IE8 I am neither seeing an image as a color...
What might be the problem? I am using both a color as a image. This is the code I am using:
background: url("http://localhost/test/wp-content/uploads/2013/01/bg.png") no-repeat scroll left 550px center #222;
PS I am using a left 550px because I don't want to use right -80px... Using a minus isn't good I am told...
Try putting the color before the url
according to W3C:
background: [background-color] [background-image] [background-repeat] [background-attachment] [background-position];
So your code should look like this (I removed the double left property, if it's a positive number than it's automatically pushing 550px from the left):
background: #222 url("http://localhost/test/wp-content/uploads/2013/01/bg.png") no-repeat scroll 550px center;
Hey all! I'm in the process of setting up my website and I'm trying to find a way to have my background image (or any image) to re-size it self according to content.
My background consist of 4 corners, 4 edges and a fill for the middle. Is it possible to have it re-size? Example of how i want to use it:
My background image currently supports about 4 paragraphs and im at the bottom. What if i want 7-8 paragraphs? Will i have to manually remake the image to be longer or can i have it take the left edge, right edge, bottom corners and bottom edge pictures and and it down? I really hope that made sense haha.
I don't want to stretch the image because it loses its resolution and looks terrible.
Thanks for your time.
No.
Make the corners and edges separate images. Top/bottom edges should be tileable horizontally; left/right edges vertically.
Then have a "middle" image as your background that either tiles or is scaled in some other way. This answer may help you there.
You can do this using css3 properties. Not all browsers support this yet!
.foo {
background-image: url(bg-image.png);
-moz-background-size: 100% 100%; /* Gecko 1.9.2 (Firefox 3.6) */
-o-background-size: 100% 100%; /* Opera 9.5 */
-webkit-background-size: 100% 100%; /* Safari 3.0, Chrome */
background-size: 100% 100%; /* Gecko 2.0 (Firefox 4.0) and other CSS3-compliant browsers */
-moz-border-image: url(bg-image.png) 0; /* Gecko 1.9.1 (Firefox 3.5) */
}
https://developer.mozilla.org/en/CSS/-moz-background-size