Safari css position not working
We are working on a new site and have an issue with the "Join Conversation" field only in Safari. Works great in other browsers. The background is supposed to show at the bottom of the window, but in Safari it shows up on the whole box: http://futurethink.colorandinformationdev.com
The old dev site is here and it renders Safari and other browsers just fine. I have checked diff check between home page and css but cannot figure it out: http://cool-quotes.org/future
#email_newsletter.home_content {
background:#fff url(img/addons/news_letter_container_bg.png) repeat-x left bottom;
overflow: hidden !important;
border:1px solid #B3B3B3;
/* */
}
source to share
According to W3Schools, you can specify values in the following format:
- top right / center right / bottom right : specify only one keyword
- xpos ypos: Units can be pixels (0px 0px) or any other CSS units
- inherit: indicates that the background-position property setting should be inherited from the parent element
Also I tried my stuff personally and I found that it doesn't really work for Safari, but if you really need it and if you can do the trick mentioned below then your problem will be solved :-)
Fiddle work for you
<!-- The CSS -->
<style type="text/css">
div {
background: url(https://www.google.co.in/images/srpr/logo4w.png) no-repeat scroll right bottom transparent;
margin-right: 100px;
}
p {
margin-right: -100px;
}
</style>
<!-- The HTML -->
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In euismod adipiscing elementum. In turpis ipsum, adipiscing vitae magna vitae, consequat hendrerit justo. Aliquam non facilisis dui, tempus convallis tortor. Donec ultricies pharetra tortor, a tempor magna commodo nec. Donec id justo ornare, ullamcorper est ac, aliquet justo. Duis rutrum justo a laoreet volutpat. Phasellus molestie consequat risus at varius. Aenean imperdiet ornare odio, a aliquam leo pharetra id. Integer lectus felis, semper id sapien viverra, dignissim molestie massa. Mauris blandit eros eget lorem cursus, sed consectetur lectus tincidunt. Cras tristique vel orci eu cursus. Sed congue tempor venenatis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas vehicula nec eros sit amet mollis. Nam ipsum arcu, pretium et tempus ac, scelerisque sed nulla. Sed dapibus in massa in consequat.</p>
</div>
Cheers and Goodluck!
source to share
From fooobar.com/questions/1996155 / ...
You can put it with a negative left value - effectively moving it to the right. And you can position the background images to start at the bottom right corner. it doesn't work that well if you need to have an expandable image, but then you can use percentages for width, height, and padding.
source to share