I have the very simple task of applying a background image to a DIV. I can view the image with every other browser except Safari. Can someone take a look at my CSS and site and tell me what I'm doing wrong.
CSS:
#intro2services {
background:linear-gradient(rgba(0,0,0,1),rgba(0,0,0,0)), url(../img/colorpencils.jpg) fixed;
background-position: 100% 100%;
background-size: cover;
background-repeat: no-repeat;
}
Site:
www.designedbysheldon.com
I played around with your site for a few minutes, and I suggest breaking up your styles for the background rather than condensing some while having others declared on their own. Change your CSS to:
#intro2services {
background-position: 100% 100%;
background-size: cover;
background-repeat: no-repeat;
background-image: -moz-linear-gradient(rgba(0,0,0,1),rgba(0,0,0,0)),url('../img/colorpencils.jpg'); /* Firefox-specific background styles */
background-image: linear-gradient(rgba(0,0,0,1),rgba(0,0,0,0)), url('../img/colorpencils.jpg');
background-attachment: fixed;
}
That removed the repeat, applied the gradient, and applied the cover sizing correctly. This is tested and working in Chrome and Safari. Firefox only works when the -moz vendor prefix is added. You can add the other vendor prefixes to be safe, but gradients are implemented in the other major browsers at this point.
This is a know issue with Safari. Most of the time, adding a negative z-index to your style, will solve the issue.
z-index:-1:
Apparently Safari--or at least some versions of it--refuses to apply CSS to form fields, so if you have a clever little search box like I do, Safari won't render any CSS applied to it. I thought it was specific to my use of SVGs and then I thought it had something to do with the short code. I was stuck until I found an obscure post on GitHub from a MarcHaunschild from 2011 discussing this behavior. Anyway in the case that you're trying to style a field such as a search box, here's the fix.
Add the following to your CSS:
input[type="search"] {
-webkit-appearance: textfield;
}
I tried google for help on this and it seems to be a bug in chrome but I still can't find a solution. I have taken a look at many stackoverflow questions similar to this but those solutions still didn't help.
When I try to scroll down on the page the background-image flickers and messes up.
I am using Google Chrome Version 35.0.1916.153 on Ubuntu Desktop
CSS code:
#left-container {
background-image: url('http://easource.com/wp-content/uploads/2014/07/traphouse4.jpg');
background-attachment: fixed;
background-position: -1% 0%;
background-repeat: repeat-y;
cursor: pointer;
}
You can see how it looks on http://easource.com
Also, I tried removing the background-position but still doesn't work.
As seen here: Fixed attachment background image flicker/disappear in chrome when coupled with a css transform
Try to change to position:static only.
You can keep your position as is and add the transform property to your background image element.
transform: translate3d(0,0,0);
-webkit-transform: translate3d(0,0,0);
Removing overflow-y: scroll;
from body solved the issue for me.
Try adding backface-visibility: hidden;. Worked for me.
It's working fine with using position:static;
if it doesn't work, remove the position property.
You must have to use these properties to make the image fixed:
background-image: URL("your image path");
and I'm 100% sure that it will work for you in every browser.
I want to position a background of an label element to the left but it is never on the left in ie9+.
My code is similar to this
label {
background-image: url('some-image.svg');
background-position: left center;
background-repeat: no-repeat;
padding-left: 20px;
}
This is working in all the browsers but (of course) in the ie9+, strangely it is working in ie8.
I hope someone can help because I can't simple position it fixed with a negative background offset.
I got the solution. It was related to the SVG Images I was using in newer versions of IE and Safari that caused the error. It seems that SVGs always have a with of 100% even as backgrounds.
So If you need to positon an image for eg a checkbox or radiobutton like me, you should have a fallback to PNGs for such Browsers.
I am using a div tag and I am applying css to it.
Please find below the div tag
<div class="testcss">
</div>
My css class is as follows
.testcss
{
background-image: url('images/imag2.gif');
background-repeat: repeat-y;
background-position: bottom-left;
padding-left: 10px;
padding-right: 10px;
}
The div is showing background image and displaying properly in Mozilla other browsers but it is not working in IE8 and IE9.
Even it is working fine in IE10.
There is some issue with background-repeat: repeat-y not working properly in IE8 and IE9.
Is there some way that we can fix this in IE8 and IE9.
Any help would be greatly appreciated.
Thanks in Advance.
Regards,
Rahul Rathi
I believe your syntax is wrong, and no.. it should work in IE8 and IE9 ... try:
.testcss {
background: url('images/imag2.gif') bottom left repeat-y;
padding-left: 10px;
padding-right: 10px;
}
http://jsfiddle.net/feitla/85XFu/
PS - tested in IE9... background repeated just fine. Make sure your div actually has a set height/width if it is empty.
I agree with #feitla on the fact that your syntax is wrong. You can't use bottom-left as it doesn't exist in the background property for CSS.
I also agree that you should simply use background: url('images/imag2.gif') left repeat-y as the bottom is not needed because it's already repeating in the Y axis and spanning all the height of the container.
Last but not least, you do have to set a width and a height to your element if it's empty (as in with no other markup) because otherwise you would only be able to see 20 pixels in width because of your padding left and right.
I think that the lesson to take from this is that it's safer to use shorthand styles as it makes your code cleaner and easier to read.
You would end up with:
HTML
<div class="testcss"></div>
CSS
.testcss {
background: url('images/imag2.gif') repeat-y left;
padding: 0 10px;
}
Read more about how to use shorthand code as it makes writing CSS a lot cleaner and more fun... and it's not as hard as it may seem, here's a link to this specific issue and shorthand css for background.
Is there a way to position a background image a certain number of pixels from the right of its element?
For example, to position something a certain number of pixels (say, 10) from the left, this is how I'd do it:
#myElement {
background-position: 10px 0;
}
I found this CSS3 feature helpful:
/* to position the element 10px from the right */
background-position: right 10px top;
As far as I know this is not supported in IE8. In latest Chrome/Firefox it works fine.
See Can I use for details on the supported browsers.
Used source: http://tanalin.com/en/blog/2011/09/css3-background-position/
Update:
This feature is now supported in all major browsers, including mobile browsers.
!! Outdated answer, since CSS3 brought this feature
Is there a way to position a background image a certain number of pixels from the right of its element?
Nope.
Popular workarounds include
setting a margin-right on the element instead
adding transparent pixels to the image itself and positioning it top right
or calculating the position using jQuery after the element's width is known.
The easiest solution is to use percentages. This isn't exactly the answer you were looking for since you asked for pixel-precision, but if you just need something to have a little padding between the right edge and the image, giving something a position of 99% usually works well enough.
Code:
/* aligns image to the vertical center and horizontal right of its container with a small amount of padding between the right edge */
div.middleleft {
background: url("/images/source.jpg") 99% center no-repeat;
}
Outdated answer: It is now implemented in major browsers, see the
other answers to this question.
CSS3 has modified the specification of background-position so that it will work with different origin point. Unfortunately, I can't find any evidence that it is implemented yet in any major browsers.
http://www.w3.org/TR/css3-background/#the-background-position
See example 12.
background-position: right 3em bottom 10px;
As proposed here, this is a pretty cross browser solution that works perfectly:
background: url('/img.png') no-repeat right center;
border-right: 10px solid transparent;
I used it since the CSS3 feature of specifying offsets proposed in the answer marked as solving the question is not supported in browsers so well yet. E.g.
The most appropriate answer is the new four-value syntax for background-position, but until all browsers support it your best approach is a combination of earlier responses in the following order:
background: url(image.png) no-repeat 97% center; /* default, Android, Sf < 6 */
background-position: -webkit-calc(100% - 10px) center; /* Sf 6 */
background-position: right 10px center; /* Cr 25+, FF 13+, IE 9+, Op 10.5+ */
A simple but dirty trick is to simply add the offset you want to the image you are using as background. it's not maintainable, but it gets the job done.
This will work on most modern browsers...apart from IE (browser support). Even though that page lists >= IE9 as supported, my tests didn't agree with that.
You can use the calc() css3 property like so;
.class_name {
background-position: calc(100% - 10px) 50%;
}
For me this is the cleanest and most logical way to achieve a margin to the right. I also use a fallback of using border-right: 10px solid transparent; for IE.
Ok If I understand what your asking you would do this;
You have your DIV container called #main-container and .my-element that is within it. Use this to get you started;
#main-container {
position:relative;
}
/*To make the element absolute - floats above all else within the parent container do this.*/
.my-element {
position:absolute;
top:0;
right:10px;
}
/*To make the element apart of elements, something tangible that affects the position of other elements on the same level within the parent then do this;*/
.my-element {
float:right;
margin-right:10px;
}
By the way, it better practice to use classes if you referencing a lower level element within a page (I assume you are hence my name change above.
background-position: calc(100% - 8px);
The CSS3 specification allowing different origins for background-position is now supported in Firefox 14 but still not in Chrome 21 (apparently IE9 partly supports them, but I've not tested it myself)
In addition to the Chrome issue that #MattyF referenced there's a more succinct summary here:
http://code.google.com/p/chromium/issues/detail?id=95085
If you have proportioned elements, you could use:
.valid {
background-position: 98% center;
}
.half .valid {
background-position: 96% center;
}
In this example, .valid would be the class with the picture and .half would be a row with half the size of the standard one.
Dirty, but works as a charm and it's reasonably manageable.
If you would like to use this for adding arrows/other icons to a button for example then you could use css pseudo-elements?
If it's really a background-image for the whole button, I tend to incorporate the spacing into the image, and just use
background-position: right 0;
But if I have to add for example a designed arrow to a button, I tend to have this html:
Read more
And tend to do the following with CSS:
.read-more{
position: relative;
padding: 6px 15px 6px 35px;//to create space on the right
font-size: 13px;
font-family: Arial;
}
.read-more:after{
content: '';
display: block;
width: 10px;
height: 15px;
background-image: url('../images/btn-white-arrow-right.png');
position: absolute;
right: 12px;
top: 10px;
}
By using the :after selector, I add a element using CSS just to contain this small icon. You could do the same by just adding a span or <i> element inside the a-element. But I think this is a cleaner way of adding icons to buttons and it is cross-browser supported.
you can check out the fiddle here:
http://codepen.io/anon/pen/PNzYzZ
use center right as the position then add a transparent border to offset it?
If you have a fixed width element and know the width of your background image, you can simply set the background-position to : the element's width - the image's width - the gap you want on the right.
For example : with a 100px-wide element and a 300px-wide image, to get a gap of 10px on the right, you set it to 100-300-10=-210px :
#myElement {
background:url(my_image.jpg) no-repeat -210px top;
width:100px;
}
And you get the rightmost 80 pixels of your image on the left of your element, and a gap of 20px on the right.
I know it can sound stupid but sometimes it saves the time... I use that much in a vertical manner (gap at bottom) for navigation links with text below image.
Not sure it applies to your case though.
my problem was I needed the background image to stay the same distance from the right border when the window is resized i.e. for tablet / mobile etc
My fix is to use a percenatge like so:
background-position: 98% 6px;
and it sticks in place.
yes! well to position a background image as though 0px from the right-hand side of the browser instead of the left - i use:
background-position: 100% 0px;