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/
Related
I have the following png file (see First Image). I need to add a blue overlay to the background so that it looks like the second image. How can I do that using CSS?
The best supported cross-browser way to accomplish is to actually make two images, one blurry and the other not blurry, and then cascading them atop one another.
body {
background: url(images/bg-solid.jpg) no-repeat;
}
#page-wrap {
background: url(images/bg-blurry.jpg) no-repeat fixed;
width: 500px; margin: 40px auto;
}
I am using the Electoral template from ThemeForest here, this is the original template. I am trying to use CSS to fade out the edges of the blue image to the right, however the change is affecting the entire container. I've changed the background color to reflect the undesired behavior at the first link.
What I want to do is be able to apply CSS instructions to just the image. This is the section that controls the container:
#hero .q-container {
position: relative;
padding-top: 8%;
background-image: url(../img/sam.png);
background-repeat: no-repeat;
background-position: bottom 30% right 10%;
background-size: 30%;
}
I tried using the following but it didn't work:
#hero .q-container img {
background-color: red;
}
Does anyone have any ideas to fix this? Thanks!
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.
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/
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;
}