I'm having a problem with image sizing between Chrome and Safari. On our Webshop (www.85online.de) I get these thin black lines on top of some images in the product grid.
enter image description here
I found that the problem is caused by "background-size: cover" in Chrome. When I change the value to "background-size: 100%" these lines disappear, but now they show up in Safari.
Anyone having the same problem? How can I fix this?
This is a background-image problem, your background-image on repeat by default, So you need to add CSS
.cmp-product-thumb .thumb-image .container-image {
background-repeat: no-repeat;
}
Related
I have a little black border around my page, just on the left and top. I can get rid of it, but I want the background to be stretched. If I make it so it's not stretched, it goes away. I don't want that. When I make it not stretched, it repeats instead. I want it to do both. Here's my CSS.
body {
background: url(background.png);
background-width:100%;
background-height:100%;
background-size: 100%;
}
Without the background-size: 100%; I have the border there, but it is also the cause of the repeating background.
Crop Image canvas to get rid of borders
Nevermind, I figured it out, I needed to do the linear-gradient with width:100vh;.
I want to make a background like this except using an image instead of the blue background: http://gakeyclub.org/
Notice that resizing the window of the browser does not disturb the background. What do I need for this?
According to your comment, what you are asking is to have your background center on your page. To do so use background-position this will tell the browser where to position the background according to its container.
background-position:50% 50%;
You might like to add some other background attributes such as background-repeat:no-repeat to make sure the picture does not repeat on huge resolutions.
this is how your css should be looking for a fixed image as background:
body
{
background-image:url('image.png');
background-repeat:no-repeat;
background-attachment:fixed;
}
Why do you want to use an image. It will just increase the size of the page. Use this code:-
background: none repeat scroll 0 0 #002f5f;
Few days ago i've noticed, that if a website have a background and if you overlap transparent PNG image on the div, the divs background disappears... Maybe it's only my computer rendering glitch, so I'll attach Screenshot too.
JSbin for index and css
Try:
body{
background:url('image') no-repeat top left;
}
You should not use 'background' in HTML tag!!!!!
html{
background:url('image') no-repeat top left;
}
Are you sure you don't have two images on top of each other? it seems like you have a colour image with a grey-scale image underneath.
If so, remove the bottom image.
EDIT: sorry, it seems to be an image change problem when you hover. Look at changing what the image switches to
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?
Can someone take a look at my background shadow? Here is the link:
link text
I'm trying to find the best solution for having a background shadow for a card in the front (layered).
Is it possible to make the sides of shadow cave in with CSS?
I'm currently using a PNG with transparency and I can't get the shadow to match with the background!
Any suggestions would be helpful.
To get your image to line up you can do it in css:
#card_main {
background:url("/img/shadow.png") no-repeat scroll 0 0 transparent;
margin:0 auto;
min-height:800px;
position:relative;
top:-1px;
width:980px;
}
Though your background gray color seems to be different in the image than the background.
you can also make your shadow.png only be the text shadow, not including the background-color for the header and content area in the png.
or, you can simply use the box-shadow css declaration for webkit and FF. and a filter for IE. if you're interested in this solution i can post some sample code.