The following code renders well in IE9, FireFox, Chrome, but not in Safari:
.search-choice
{
position: relative;
background-clip : padding-box;
background-image: url('../Design/icon_chosen_close.gif');
background-repeat: no-repeat;
background-position: top 6px right 6px;
}
<ul class="chzn-choices">
<li class="search-choice" id="selLVB_chzn_c_0">
<span>multi1</span>
</li>
</ul>
Safari doesn't seem to take into account the background-position. I have tried a number of variants (like background-position-x: right 6px), but nothing seems to work. I just can't offset the background image in Safari starting from the top right corner.
Any ideas? Thanks a lot for your time!
Found out that Safari marks the following line as invalid and the background image won't be displayed:
background-position: top 15px right 0px;
But when I type only:
background-position: top right;
Safari generates the following by itself:
background-position-x: 100%;
background-position-y: 0%;
Found then out that Firefox completely ignores:
background-position-x: 100%;
background-position-y: 0%;
So finally I did it with:
background: url(../images/image.png) no-repeat;
background-position: top 15px right 0px;
background-position-x: 120%;
background-position-y: 0%;
Whilst Safari ignores the second line, Firefox ignores the last two lines.
This tweak seems to work in older Internet Explorers, too. Tested in IE8.
There is a bug open in Safari's implementation around the long-hand syntax of background-position: https://bugs.webkit.org/show_bug.cgi?id=37514
My fix for this was to use background-position: top right; in combination with right padding and background-origin: content-box;
It may also be useful in some scenarios to use a pseudo element instead of a background image, and just position that as you would the background.
If you can set right position from right and top only, you can still do it old school.
background:url("../images/") no-repeat Xpx Ypx;
Where X marks width from left, and Y height from top.
I had a similar issue when giving an <a>-tag a background-image. To give it display: inline-block; solved the problem for me.
Best way is to use:
background-size: auto;
Related
I'm developing a website and i'm having trouble with Safari.
I'm using a background-image: -webkit-linear-gradient that is working perfect on Chrome, Firefox, etc... but when it comes to Safari, the output is different.
It is showing only on half of the screen.
I'm using this style on the body:
body {
background-image: -webkit-linear-gradient(-40deg, #000,#333 50%, #f9f9f9 50%);
background-size: auto 1200px;
-webkit-background-size: auto 1200px;
background-repeat: no-repeat;
background-attachment: scroll;
top: 0;
left: 0;
}
I've tried searching for a solution, but so far nothing seems to work. I've tested changing the background size to cover but it doesn't give the output i intend, as well as setting top: 0; and left: 0; as shown in other question around stackoverflow, but that didn't work too.
The link to the specific page i'm talking about is this one: https://dashiofficial.com/product/test-product-01
Does anyone know the solution for this problem?
Thanks in advance.
I have checked your website and was able to fix your safari problem.
It has nothing to do with the gradient you defined for body{} but with the background-size for .single-product{}
Try to change
.single-product {
background-size: auto 1060px;
}
to
.single-product {
background-size: 100% 1060px;
}
It works for me in Chrome and Safari (not tested in Edge or Firefox).
I have a background image on the body of my page that should be centered vertical and horizontally and covering the canvas.
body {
background: #000;
overflow: hidden;
background: url(background_phone_2.jpg) no-repeat center center fixed;
background-size: cover;
}
In Chrome/Firefox and all mobile browsers, the image is centered both vertically and horizontally and covering the canvas. In Safari on desktop, the image is slightly below vertical center. Am I doing something wrong or could this possibly a browser bug?
The live url of this is: http://moonios.com
I've tried removing the overflow: none as well as removing the other contents of the page, but the issue persists.
If you have any advice or can confirm this bug, I'd appreciate it. Thank you! Charlie
Update: Did a little more work into figuring this out. Built this new page with a grid: http://whyamicrazytoday.com/safari/
The entire page contents are:
<html>
<head>
<title>Safari Background Size Bug</title>
<style>
body {
background-image: url(background.png);
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;
background-size: cover;
}
</style>
</head>
<body>
</body>
</html>
Still reproduces only in Safari.
Then I remembered the translucency effect in Safari's nav bar (although I have it turned off). I believe Safari is considering the body area to cover that top nav bar which throws off my vertical centering since the content of the page does not get considered in that way. Is there a way to disable that effect from the dom?
Try it with only these properties;
background-image: url(background_phone_2.jpg);
background-repeat:no-repeat;
background-position: center center;
background-attachment: fixed;
That should work.
If not, why not make a div with the image and use z-index to make it the background? This would be much easier to center than a background image on the body.
Other than that try:
background-position: 0 100px;/*use a pixel value that will center it*/ Or I think you can use 50% if you have set your body min-height to 100%.
body{
background-repeat:no-repeat;
background-position: center center;
background-image:url(background_phone_2.jpg);
color:#FFF;
font-family:Arial, Helvetica, sans-serif;
min-height:100%;
}
I hope it helped.
After attempting to do a browser hack and targeting Safari with special CSS to fix this, I checked in El Capitan and this behavior is corrected. So I'm going to abandon this issue.
When playing with striped gradients made with CSS, I found a strange behavior of IE, where the stripes became invisible after reducing the height value in the background-size property.
This behavior only in IE: Chrome and Firefox work as expected.
Here's the code :
The HTML
<body>
<div class="stripes all"> </div>
<div class="stripes no_ie"> </div>
</body>
The CSS
.stripes {
height: 500px;
background-image: linear-gradient(red 1px, transparent 1px);
background-attachment: scroll;
background-position: 0 -10px;
background-color: white;
}
.all {
background-size: 100% 98px; /* Will show stripes in IE */
}
.no_ie {
background-size: 100% 97px; /* Will not show anything in IE */
}
Here's the demo:
http://jsbin.com/jipehipobele/1/edit
Could someone explain to me why this happens and how to circumvent it, if possible?
My workaround to this problem now is changing the tabstops of the gradient a little bit:
background-image: linear-gradient(red 1px, transparent 1.1px);
This works in IE and does not change the background-size. Thank you anyway, Taruckus for helping me find this workaround.
Pretty weird issue. I found that it has to do with the browser scaling; if you zoom in at all using your browser / IE, the stripes will show. the zoom property is an old IE dog, so giving it a minimal value is hopefully an appropriate workaround.
.stripes {
height: 500px;
background-image: linear-gradient(red 1px, transparent 1px);
background-attachment: scroll;
background-position: 0 -10px;
background-color: white;
zoom:1.05;
}
more on zoom http://css-tricks.com/almanac/properties/z/zoom/
I have to do the following:
The top of the div is an image of a gradient, then in the bottom it continues as a solid color. Can I do this with simple CSS? I know the following is invalid.
{background: url(img/right_column_bg_top.png) no-repeat rgba(10,26,39,1) top 225px;
Note: the first 225px, which the image fills, should be without the background-color
As far as I know, you need to use a gradient for the solid color, so that you can set it correctly.
The CSS would be:
.imgbg {
width:255px;
height:355px;
background: url('http://blue2.hu/danone/nogravity/img/right_column_bg_top.png'), linear-gradient(90deg, #f7d8e8, #f7d8e8);
background-position: 0px 0px, 0px 112px;
background-repeat: no-repeat, no-repeat;
background-size: 255px 112px, 255px 233px;
}
Here is your updated fiddle
Basic suport should be fine for browsers supporting multiple backgrounds, the only problem would be with IE <= 8. Gradient background could be a problem with IE9, but I think that it should work (I can not test IE9). If it would be really a problem, see colozilla for a fix.
Check out this fiddle and tell me if this is what you want.
FIDDLE
HTML
<div class="imgbg"></div>
CSS
.imgbg {
width:255px;
height:355px;
background:#f7d8e8 url('http://placehold.it/255x255') no-repeat;
}
I would do the following:
#myDiv { background: #f7d8e8 url('/img/right_column_bg_top.png') repeat-x ; }
This will just put your background image on the top of the div; the rest of it, will be the color you selected for the entire background of the div.
I have two background images that i would like to place on the left and right side of my wrapper div. I am using CSS3 background-image property to do this but it is not working. Can anyone make sense as to why this is not working in any browsers. I would also like to know once i get this working on modern browsers will it work on older browser like IE 7?
Here is a visual of what i'm trying to accomplish i've have the navigation (green banner) already in place so i need to put the tricky red banner on and circle background.
I thought slicing the edges of the red banner along with the circle background and applying the code below would work but it does not being that I need the sides to stay flush to the sides.
body{
background-color:#e5e5e5;
background-image: url("../img/background_left.png"),url("../img/background_right.png");
background-position: right top, left top;
background-repeat: no-repeat, no-repeat;
background-attachment: fixed, fixed;
}
Add height to your <body> and it will work - DEMO
html, body {
height: 100%;
}
body{
background-attachment: fixed, fixed;
background-color: #e5e5e5;
background-image: url(http://lorempixel.com/300/200), url(http://lorempixel.com/200/300);
background-position: right top, left top;
background-repeat: no-repeat, no-repeat;
}
But it won't work in older IE-s - multiple backgrounds support