I have a div which has one of two background positions for a sprite background image depending on the class set for the div in a php script.
The CSS, which is below, works fine on standard browsers, but on the iPad I am not seeing the same. Instead I see more of the background image than I want to. As you can see from the image below, rather than just seeing one star, I am seeing part of another star too.
How can I get the background position/image looking right on the iPad?
.normal, .favourite {
width:18px;
height:17px;
margin-right: 4px;
border:none;
cursor: pointer;
display:inline-block;
vertical-align: middle;
background-color:transparent;
background-repeat: no-repeat;
}
.normal {
background-image: url('/images/playlist_sprite.png');
background-position: left bottom;
}
.favourite {
background-image:url('/images/playlist_sprite.png');
background-position: right bottom;
}
Rather than defining the background position using left/right/bottom try defining it exactly using pixels.
e.g.
background-position: XXpx XXpx;
Also, make sure that both those images in your sprite are exactly 18px by 17px as that is what the class is saying the image size will be.
Related
When I apply a CSS background to my div tag, the color will work but the background-image will not display.
I want the background-image to be repeated across the bottom of my divs, but even if I only apply background-image: url('assets/shadow.png'); without position, repeat, or background-color, it will still not show up. Only white is displayed.
But if I apply background-color: #ECECFB; the background-color WILL show up correctly in the background.
Why doesn't background-image work?
CSS
#slider-container,#footer-container,#main aside {
background-color: #ECECFB;
background-image: url('assets/shadow.png');
background-repeat: repeat-x;
background-position: bottom;
}
The image is linked correctly. Image is 15px by 12px.
I tried shorthand CSS background and only color was displayed.
Look at my fiddle below, notice it works fine. If the image does not download (i.e. bad url) then the background colour will only appear. Check the location or the network tab on chrome dev tools to see if the background image is not being loaded (404).
<div class="foo"></div>
.foo {
background-color: red;
background-image: url(http://subtlepatterns.subtlepatterns.netdna-cdn.com/patterns/blackorchid.png);
background-repeat: repeat-x;
background-position: bottom;
height: 500px;
width: 500px;
}
http://jsfiddle.net/rlemon/XCbK4/
The background property also can be used to display images.
Syntax
background: color position size repeat origin clip attachment image;
When using background and background-image at the same time you may have a conflict. I assume using background-color is behaving different for some reason or it may be significant in which order you use them.
This will of course give you the color instead of the image, too:
#slider-container,#footer-container,#main aside {
background-image: url('assets/shadow.png');
background: #ECECFB; // overwriting the image
}
You can try this. I hope it will help:
#slider-container,#footer-container,#main aside {
background: #ECECFB url('assets/shadow.png') repeat-x bottom
}
I have a problem with setting a background image over my background color: Here is my example so that you can see what I mean: JSFiddle
Now here is the functional CSS part:
#tancan{
background-color: #ebebeb;
background-image: url('http://lamininbeauty.co.za/images/products/tancan2.jpg');
}
As you can see in the JSFiddle, the background image repeats. If I use no-repeat as a property, the image disappears.
Also, I want the background image to float to the right, and should the image be bigger than the containing div, how to I make it fit proportionally? - Like you would make an image tag <img/> fit by using width: 100% and height: 100%?
I don't want to use an HTML image tag, it would be much easier but there are several reasons I do not want to use it.
Try this - http://jsfiddle.net/vmvXA/17/
#tancan {
background: #ebebeb url('http://lamininbeauty.co.za/images/products/tancan2.jpg') no-repeat top right;
}
and to make the background image not exceed its parent container you can use background-size: contain - http://jsfiddle.net/vmvXA/22/
Here's the fiddle.
background:#ebebeb url('http://lamininbeauty.co.za/images/products/tancan2.jpg') no-repeat right top;
To make the code shorter, it is possible to specify all the settings in one single property. This is called a 'shorthand property'.
To make all pictures fit inside it's parent add the style property background-size:contain;.
Updated the fiddle.
You can't just add no-repeat to background-image, because background-image is a specific property that only refers to the image itself. If you want to add it all in one declaration, then set background:
background: url('http://lamininbeauty.co.za/images/products/tancan2.jpg') #ebebeb no-repeat top right;
or keep it all separate, up to you:
background-color: #ebebeb;
background-image: url('http://lamininbeauty.co.za/images/products/tancan2.jpg');
background-repeat: no-repeat;
background-position:top right;
background-size: contain;
I have an image that looks like this:
Is it possible to extend this image (perhaps inside a div) so that it would look something like this:
Thanks!
You can create a div of the same color using the CSS background-color property (I believe the hex should be ~#999). Then, position the image as a background-image within the div using the background-position: right property.
HTML
<div class="arrow">Home</div>
CSS
#arrow {
background-color: #999;
background-image: url('http://i.stack.imgur.com/QDCz4.png');
background-position: right;
background-repeat: no-repeat;
/* sets div dimensions/text styles */
height: 24px;
color: white;
text-align: center;
line-height: 24px;
float: left;
padding-left: 20px;
padding-right: 30px; /* slightly longer to account for background image /*
}
JS Fiddle: http://jsfiddle.net/fbBsz/14/
Get a vertical slice of the gray part of very top left of the arrow with having width:1px. Take that one px slice image and repeat it on -x.
Here is something you can practice with
Since your image does not have a gradient, you have a better chance of matching the color(s) you want with just using background color.
you can set it as a background to a div
#elem {
display:block;
width:200px;
height:20x;
background: url(/filepath/to/image.gif) right top no-repeat #ccc;
}
Just make sure the background color is the same as the dark grey on the gif
No, this is not possible in CSS. You must set the width of the containing element, set the background image's url and set the x-position to right and set the repeat to no-repeat. Then set the background color to the same as the button's foreground color. If the button foreground is a pattern, you will have to use another image as the background.
No, not with that image at least :-)
Looks like you could make use the "sliding doors" technique – see http://www.alistapart.com/articles/slidingdoors/ for a good article about it
I'm curently workign on this page and I'm trying to make the background repeat-y from a certain height but to no avail. If you look at the link's background (bottom area); you'll see that it leaves a an ugly space there, which is ugly. The CSS is as show below
body {
font-family:Calibri;
font-size: 16px;
margin: 0px;
padding: 0px;
background-color: #000;
background-image: url(images/bg.png);
background-repeat: repeat -200px 0px;
}
There's no way I'm aware of that makes the repeat skip some pixels. If I were you I would split them so the background-image of the body would be what the majority of it is now without the top. And then I would add a div to the top with these settings:
<div id="upperpart"></div>
in css:
#upperpart{
background-image: url(whatever it is);
width:100%;
height:how high it is
background-repeat: repeat-x;
margin-bottom: minus its height; <-- this will make everything below this div get ontop the div
}
After some mathematical thinking and experiments, the line of code below did the magic. I had to also watch where to cut it off with -1530px. Make sure you use the same background you used with the body tag.
html {
background: url(images/bg.png) repeat 0px -1530px;
}
I'm trying to create a block quote like in the image below:
http://www.norrislakevillas.com/images/block-quote-sample.png
The quotation marks sit in the bottom right corner of a 50 X 45 px transparent PNG image with 10px of spacing on the top and left.
The element is rendering correctly with the exception of the background image, it just won't show up.
CSS Code:
#block_quote{
float:left;
width:400px;
background:#f7f7f7;
background-image:url(images/quote-top.png) left top no-repeat;
margin:50px 0 100px 53px;
border:1px solid #ccc;
}
#block_quote p{
font:italic 14px segoe ui, arial, sans-serif;
color:#5f5f5f;
line-height:1.4em;
margin:0;
padding:20px 15px 20px 60px;
}
Any ideas why the image isn't rendering?
Thanks
Your image path needs to be relative to the CSS file. Also it's just background, not background-image if your using all the declarations in one line and the order at the end is no-repeat top left.
background: url(images/quote-top.png) no-repeat top left;
background is a "shorthand property" that sets all background properties, including the url of the image. The way you write it, it does not specify an image, only a color.
So don't mix up background and the individual background properties like background-image. It should be either
background:#f7f7f7 url(images/quote-top.png) no-repeat left top;
or
background-color:#f7f7f7;
background-image:url(images/quote-top.png);
background-repeat:no-repeat;
background-position:left top;
but not any mix of these; that will confuse the browser.