If you don't know what I mean, check this image out:
Multiple images
I want to know how it works, CSS yes, but exactly how does it all work out when using a background using this image and then it is all cut all exactly what it is supposed to do - when determined as a background for this image.
Would be interesting for me to know how - so I can take my CSS level up a bit more :P
Thanks
What you are looking for is CSS Sprites, there are heaps of tutorials and ways to achieve this. Basically what you are doing is declaring a background and using background-position to decide what in the background is displayed.
CSS Sprites are great by the way, good job for trying to figure them out.
{
height: foo;
width: foo;
overflow: hidden;
background: colour url() no-repeat 0 pixels-to-top-of-image;
}
<div id="buttonOne">Button 1</div>
<div id="buttonTwo">Button 2</div>
#buttonOne, #buttonTwo
{
background-image: url(/images/ALL-BUTTONS-IN-ONE-IMAGE-TILED-16PX-APART.png);
background-repeat: no-repeat;
width: 16px;
height: 16px;
overflow: hidden;
}
#buttonOne
{
background-position: 0 0;
}
#buttonTwo
{
background-position: 0 -16px;
}
Related
I have the folowing HTML:
Wardrobe
Wine
Coffee
This is the relevant CSS:
.home-block {
background-color: #c2b89c; display: block; height: 180px; line-height:180px;
text-align: center; font-size: 70px; color:#e2e2e2;
text-shadow: 2px 2px 0 #444; margin-bottom: 20px; background-size: cover;
background-position: center center; box-shadow: 1px 1px 4px #111;
}
My result now looks something like this:
That's OK, but what I really want is the blocks to have a solid color, and only show the image on hover. Like so:
Please keep in mind that I'm using a responsive design, so the blocks will have a different size and aspect ratio on different screen sizes. That is why I'm using background-size: cover. Also this is for a CMS system, so I want the images and colors to be set inline in the HTML, so it will be easily editable and more blocks can be added.
So I basically need a clean solution without absolute positioned elements (because they tend to break if there's no fixed width) to achieve this.
What I have tried is this:
.home-block { background: none; }
.home-block:hover { background: inherit }
but with no success. I was just about to fix all of this with some lines of jQuery, but I just quickly wanted to check if there is no pure CSS way to achieve this.
It's a little bit tricky if you need to have background-image set inline in HTML. You can't overwrite it easily. What I would try to do is to change background-position on hover:
.home-block {
...
background-position: 1000px 1000px; // background-image is there but not visible
}
.home-block:hover {
background-position: center center !important; // make it visible
}
http://jsfiddle.net/h2Jbg/
So for normal state you will not see background image but will see backgroud color. On hover you move image back.
Unfortunately it's not possible to use the :hover pseudo-class inline, which makes it hard to accomplish this inline on a single element.
It is often a bit ugly to use an additional element for the purpose of styling, but at least it is a possible solution to the problem at hand.
<div style="background-image: url(http://lorempixel.com/400/200);">
<div class="home-block">Foo</div>
</div>
You could then use something like this in your CSS:
.home-block:hover {
background: transparent;
}
Demo
This way, you will be able to add new blocks with individual background-images, without updating the stylesheet.
I would like to create a sprite with several images that will be used as background. Some of them will be used with norepeat and some will have repeat-x.
What's the best way to setup such styles?
So far I've tried this but it does not work properly:
css
.sprites {
background-color: transparent;
background-image: url(img/sprites.png);
background-repeat: no-repeat;
}
.bg {
width: 1px;
height: 25px;
background-position: 0 0;
background-repeat: repeat-x;
}
html
<div class="sprites bg">
</div>
Is this even possible?
I think the best way to go for this is to separate the nonrepeated Bgs from repeated ones. put all norepeated bgs in one sprite image. For repeated ones, you can only put them together if they have the same width, and you have to place them vertically.
If you will only be repeating in the x-direction, make sure you place the images vertically. That is, don't place two different images side-by-side.
http://www.phpied.com/background-repeat-and-css-sprites/
This CSS code does work in all browsers except FireFox. Why ? How can I fix it ?
.img_box {
width: 110px;
height: 160px;
background-repeat: no-repeat;
background-position: center center;
background-image: url('https://www.google.com/images/srpr/logo3w.png');
}
Thanks in advance.
EDIT:
Here is the HTML that I want to use:
<img class="img_box" />
When Firefox encounters an image without a source, it replaces the image with its alt text. I personally find this extremely annoying, as it means I can't test layouts unless I specifically create placeholder images, and should those images be unavailable for any reason the layout completely breaks.
Unfortunately, I have yet to find a solution to this problem.
In your case, however, you would be much better off using a div and adding display:inline-block to your CSS, instead of using an image.
solution1:
.img_box {
width: 110px;
height: 160px;
background-repeat: no-repeat;
background-position: center center;
background-image: url('https://www.google.com/images/srpr/logo3w.png');
display: block;
}
solution2:
<div class="img_box"></div>
Hi there I am trying to make and image on top of another in 1 tag.
Basically I want an image to be the banner on top, so repeat-x
then under it I want the background image repeated multiple times
So something like this
body
{
background:url(banner.jpg); repeat: repeat-x;
background:url(background.jpg);
}
not 100% sure how to do it...I think that explains how I would like it.
I may also want something on the bottom added later so like after that background is done I would want something like background:url(footer.jpg) repeat: repeat-x; bottom
Im thinking this is what youre after.
http://jsfiddle.net/wpqDy/
html {
height: 100%;
width: 100%;
background: url("bg.jpg") repeat 0px 3px;
}
body {
background: url("bg_top.jpg") repeat-x top left;
height: 100%;
width: 100%;
}
You'll need to put background images on two different containers. Perhaps something like this:
<body>
<div id="page">
<div id="content">
...
</div>
</div>
</body>
#page
{
background:url(background.jpg);
}
#content
{
background:url(banner.jpg); repeat: repeat x;
}
CSS3 has support for multiple backgrounds on a single element; this is relatively widely supported, except for IE <= 8. You can write the following:
body
{
background-image: url(banner.jpg), url(background.jpg);
background-repeat: repeat-x, repeat;
}
Hello everyone!
I have a website which is http://www.urbanelementz.ca ... It's currently in development.
Please note that I'm quite familiar with CSS sprites and can make mouse-over/rollover sprites as well as static image sprites. I use about 7 or 8 major sprites on my website that control most of the images and multiple mouse-overs (such as the menu, etc).
My question: I have about 8-10 DIV's that use background images. As of now, each div has it's own background-image. Either I'm missing something very simple or I'm just stumped because I can't seem to code it properly to work.
My problem: I know how to make the sprite, I know how to link to the sprite but when you use the "background-position: 0px 0px" option it will move the background image position in the DIV and not the background position on the image to show the proper sprite.
You can view my CSS file here: http://www.urbanelementz.ca/css/style.css
Note that it's not fully organized or optimized at the moment because I'm making changes.
Please take a look at the css sprites which are all located towards the bottom and have comments so you can see which ones they are.
Am I missing something obvious? Maybe I'm sleep deprived. =0)
If someone can point me to a tutorial or just paste the proper coding and description of how to do it, that would be great.
Thanks so much!
As per your comment, below is the content of the fiddle I created:
<div id="one"></div>
<div id="two"></div>
<div id="three"></div>
<div id="four"></div>
<div id="five"></div>
div {
width: 100px;
height: 20px;
border: 1px solid #aaa;
margin-bottom: 5px;
background-image: url('http://www.gravatar.com/avatar/e1122386990776c6c39a08e9f5fe5648?s=128&d=identicon&r=PG');
}
#one {
background-position: -15px 0;
}
#two {
background-position: -15px -27px;
}
#three {
background-position: -15px -54px;
}
#four {
background-position: -15px -81px;
}
#five {
background-position: -15px -108px;
}
http://jsfiddle.net/TFwdB/