I'm trying to create a pattern with a png with a transparent background. It works fine both on Firefox and Safari, but on Chrome it's displaying with some white space in between.
The code to reproduce the issue is quite simple:
div {
background: url('http://vps97368.ovh.net/montessori.it/wp-content/themes/montessori/images/pattern-bg.png');
height: 500px;
}
<div>blabla</div>
And I've created a pen to show it: http://codepen.io/anon/pen/RPGOyx
The pattern should display simple parallel diagonal lines, but on Chrome I see them like this:
I'm experiencing the issue on a retina display. Not sure about others.
Make the image bigger. I used 25x25 for this one:
http://codepen.io/anon/pen/BNmVXQ
div {
background: url('https://s3-us-west-1.amazonaws.com/haven-images/pattern-bg.png');
height: 500px;
}
Related
I have problem with linear gradient in mozilla firefox. Following css code:
background: linear-gradient(180deg, black 20%, darkorange);
html {
height:100vh;/* demo purpose*/
background: linear-gradient(180deg, black 20%, darkorange);
}
For all browser produces nice background smoothly transforming from black to orange color. However it doesn't work in Firefox. It produces lot of thin orange and black lines one each after other. However, when I change first parameter to 90deg (horizontal gradient), it works as it is supposed to. What I'm doing wrong? I've read similiar question from stackoverflow about this problem, but no solution worked for me. And yes, I tried to change to -moz-linear-gradient and it isn't working either (I'm using latest version of FF browser, so it shouldn't be a factor anyway.
Thank you for help in advance.
JS-fiddle link (not much to fiddle there though):
Hmm I tested here in code snipped added by GCyrillus and it's working correctly. However when I'm testing it in my browser or JS Fiddle it still produces strange result as shown in this image:
Imgur
You need to ensure the element you're setting a background on has a height, either explicitly set or due to content.
.test {
width: 100px;
background: linear-gradient(180deg, black 20%, darkorange);
float: left;
}
#test1 {
height:200px;
}
<div class="test" id="test1">Test</div>
<div class="test">Test</div>
I created a responsive box for my site (http://www.to-hawaii.com/trees) and it works fine except one thing. See here http://www.to-hawaii.com/page.jpg on the left and right side of the title there is a gap and I cant figure out how to fix. I figured the problem comes from line style.css 525
.images_tabbox {
max-width: 495px;
width: 100%;
float: left;
background: transparent url("/theme/images/images_tab_box_mid.jpg") repeat-y scroll center top / 100% 100%;
}
When I remove float:left; this particlar issue is fixed but then the whole box looks like this http://www.to-hawaii.com/page2.jpg
I would appreciate it if someone has any ideas how to fix this. thanks!
It's because your image(s) have a solid white background. The white on the left and right is part of the actual jpg. To fix it you have to save your image again from the source (hopefully you have access to the source design files) with a transparent background as a png or gif format. jpgs can't have transparent backgrounds.
On my new webpage (http://patrick-ott.de/ -- it is getting there ;), I seem to have encountered a problem. At the very end there is a promise for a non black/white-version but it does not show the fully colored image. That is fine, I do not want the background to scale in width (or maybe when the resolution of the display exceeds the one of the image) but I do want to see the full-length version of the background, so essentially you can keep scrolling longer. Any ideas on how to do this smart? Right now the CSS for the background is as simple as this:
.colorbox {
background-image: url(pictures/colorbackground.jpg);
height: 100%;
width: 100%;
position: relative; }
set background-size
background-size: 100% 100%;
Add this to your CSS:
background-repeat: round round;
That should do the trick. But this is a pretty new feature in CSS so it will work if you expect your users to be using IE9+ and other modern browsers.
So this morning I got an automatic update to IE 11, after checking my eyes it appears that some of my background images are blurry.
I had to check that it was not my image causing the problem, so after firing up Chrome, they were nice and crisp again...
I am completely baffled.
I've now uninstalled the IE11 update and they are once again nice and crisp in IE10... Has anyone else encountered this?
I've included a screen shot showing the images in the different browsers.
Here is a link to a jsfiddle, I don't have IE11 any longer to test but its the same markup and CSS that I am using: http://jsfiddle.net/3g52E/
Well i can see what is causing this problem. It's the border-radius of your ._ui.
Now i can't tell you why this happens. However if you want to fix this you can or don't use border-radius or, which is a better solution i my opinion, use the <img> tag to generate the background.
Use image element
<img src="http://i.imgur.com/DauuVHW.png" />
Now to cut-off your image you can just use position: relative;, position: absolute; and a overflow: hidden;:
.block1 > div
{
position: relative;
overflow: hidden;
}
This will add the properties on ._ui _bre and ._ui _com.
Where the basic image properties are:
img
{
position: absolute;
left: 2px;
}
Now you can just use the top and bottom offset for the the image positioning. Where as you used background-position before:
._bre._ui img
{
top: -68px;
}
._com._ui img
{
top: -24px;
}
This way your image is not a part of the element which has border-radius anymore, which caused this problem. They have a more clear seperation now; 2 different elements.
jsFiddle
There is probably more elegant way to fix blurry images in IE 11.
In our app we have icons on buttons with round corners. Removing round corners or using <img> for icons were not options.
However, what worked for us was "classic" images optimization for retina displays, i.e. saving button background images with twice larger resolution and then specifying original size in background-size.
Looks great in IE 11 and on retina displays.
According to this:How to write a CSS hack for IE 11?
I added this code to my CSS:
#media all and (-ms-high-contrast:none){
*::-ms-backdrop, .my_elements_with_border_radius { border-radius: 0 }
}
With this browser hack the borders are not round anymore in IE11 but at least the background images are not blurry anymore. In any other browsers they are still round.
I am having a weird problem with ie8 and lower. I apply a backgound image and color to the body element with CSS. The background is, however, painted white in IE8 and lower when I load the page.
In the moment i resize a little bit the window the background is correctly applied.
body {
background-image: url(../images/main.gif);
background-repeat: repeat-x;
background-position: top left;
background-color: #6e9b68;
}
A live site suffering this problem.
Any idea how to solve this issue?
It's a bug in the version of jQuery you're using (v1.6.1).
I came across the same problem in this question, it has all the info you need: Weird IE8 layout glitch - why does the body background disappear?