Im trying to change my ul li list to use it with background image & sprites, but i have this problem with background-repeat, what i'm missing?
http://jsfiddle.net/R7MU4/
Since your sprite is tiled vertically, you need to use an element that will have a height equal to that of each of the sprite images.
One option is to use another element, like a span, and apply the background to that.
http://jsfiddle.net/mestekweb/R7MU4/2/
You could also apply the style to the link element.
http://jsfiddle.net/mestekweb/R7MU4/3/
In both cases, you'll have to adjust the margins and padding of the lists and/or links to compensate.
Related
I want my logo be aligned to center and that be clickable outside the margins without html img tag - with css background-image or something that remove right click > view image.
http://jsfiddle.net/qhU5u/
Thanks.
Solved
You should really use an img tag. However if you don't want to for some reason:
http://jsfiddle.net/qhU5u/1/
I've completely removed the div and just used tha a tag to display the logo.
Just use an img element. This is far better for accessibility purposes.
For example, if someone is viewing your page without the CSS enabled, they will be able to see your logo if it is an img, but not if it is a background-image.
However, if you wish to use a background-image, I would recommend using a div with a fixed height and width which matches your image.
Then, place an a element inside the div giving this the same dimensions as the div.
Your way of nesting div inside an a is invalid HTML.
See Demo: http://jsfiddle.net/qhU5u/2/
try this example and see if it's what you're looking for:
http://jsfiddle.net/qhU5u/8/
I've searched everywhere, and I just can't find out the answer to this.
So I have a DIV in my style sheet, that is positioned absolute and with a background image.
Inside that DIV, I have an that I want to appear UNDER the DIV background.
I've tried z-index but it dosn't seem to work!? Is it something to to with the absolute position on my DIV?
Put the image div before the your absolute positioned one. That should put it under the other div. You could also
position: absolute
the image, but still put it before the div.
Whatever you do, you CANNOT make child elements appear BELOW their parent's background (see about stacking contexts for more info.) You need to modify your DOM so that the second element is taken outside of the DIV having a background to be shown in front of that element.
position:absolute is in a screen context. To use position:absolute inside a div context, make the parent div as position:relative, so, his child with p:absolute will consider the top of his parent as orign.
Make sure that your background image is either a .PNG and or a .GIF File Format. Both of these file types support transparency.
i'm trying to use 2 background images on a div, im using theese style for this
background:url(../images/bg1.png),url(../images/bg2.png);
but all images are like position absolute, they are on each other so i use
background-position:0px 0px,40px 0px;
background-repeat:no-repeat,no-repeat;
when i try this 2. background dissapears, how can i fix this?
As discussed in comments, seems that the container is too narrow. It's 'disappearing' because the position is wider than the element.
I could be wrong, but I didn't know multiple background is allowed.
Since I'm assuming that you're using translucent png's, why don't just put them in 2 divs and wrap one inside another?
If i have a body using a background image and a div inside the body using a set background and color, how can I override the div's style to use the body's background image? I don't want to simply set the background of the div to the image as positioning of the image will be off.
I don't want to simply set the background of the div to the image as positioning of the image will be off.
You mean you want the body's actual background image to be visible (not just the URL being inherited) even though the div has a background color defined? That is not possible.
You would have to give the div a background-color: transparent to make the body's background image shine through.
The W3's background-image documentation specifies that inherit is an invalid declaration for the property.
It seems redundant to post the same information as #Pekka, but his work-around is, probably, the best non-inherit option available; although Eric Meyer's 'Complex Spiral' demo is also an option, which combines position: absolute; with multiple different versions of, essentially, the same background-image to achieve quite an impressive 'tinted/coloured' effect.
I am still trying to get sprites to work right, and continue to be confused, since I can't seem to find an example matching what I want. Basically I have a series of 16x16 icons that need to go in row. I don't seem to be able to find the right element to use and set the background image on.
I have tried divs, and they work in block mode, but not inline mode. I have tried span, a, li and many others. All these set in display:inline don't allow me to set the element width, and so I get a few pixels of background image only. If I put in a few nbsp it will work, but that hardly seems to me to be the right solution.
Is there a URL that has a little series of icons in a line that use sprites for their background images? Preferably elements that I can do :hover on?
If you have to use display:inline then you have to put your elements inside a container. A common example is this:
<ul>
<li><a></a></li>
<li><a></a></li>
</ul>
Set the li elements to display:inline and the a elements to display:block. Then you can add a width to the a elements along with the sprite and the li elements force the a elements to sit horizontally.
You can find a tutorial using this method here.
Stackoverflow uses this technique. If you right click on the upvote/downvote arrows, and click view background image (in Firefox) you will be taken to the sprites image. From looking at the source code, they are using spans. You should be able to set the width and height of the span with CSS.
If you want, you can use to use
display: block; float: left;
and the elements will line up as if they are inline. You can then set the height and width with CSS as well.