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.
Related
I want to change my div background color and image on hover. Just like this.
I tried with this way. But it changed only background color. Is there any way to achieve this kind of situation?
<div class="col-md-4">
<div class="icon-wrapper"></div>
<p>Products</p>
</div>
.icon-wrapper {
background: url("/assets/human-resources.png");
display: inline-block;
background-position: center;
background-repeat: no-repeat;
border: 1px solid #ddd;
height: 120px;
position: relative;
width: 120px;
border-radius: 50%;
transition: all 0.2s;
img {
top: 22%;
left: 24%;
position: absolute;
}
&:hover {
background: blue;
background-position: center;
background-repeat: no-repeat;
background: url("/assets/car-white.png");
}
}
background-color: #6DB3F2;
background-image: url('images/checked.png');
you could try to use this instead
background: #6DB3F2 url('images/checked.png');
I don't know all layout of your website but I can tell you a short introduction to popups - how to create them in right way.
At first, outside all other div blocks create another one for background mask (between last div block element in html and closing body tag) - it will be used only as background layer (with absolute position), style as you wish and set display none to hide it.
Then create another div block for popup (not inside background block but under it, position fixed to scroll with your page), create popup and style how you want, hide it as well (display none).
This will give you reusable popup structure that you will be able to use how many times you need afterwards just adding new popup block under first one etc.
I know it is just a theory without real life examples, so you can study a bit here (about structure, jQuery can be used in more easy way):
Reusable modal popups
P.S. Answer to your question:
You need to change background-color and background-image (on hover state). :)
In my understanding you are trying to change the background image and the background color on hover, right?
Try this:
yourElement:hover{
background-color: yellow;
background-image: url(../images/bg.gif);
}
Example 1 : Table row background color change
<table>
<tr bgcolor="#777777">
<td>Content Write here...</td>
</tr>
</table>
Example 2 : If change background image then use this code
<div style="background-image: url('bg.jpg');"></div>
Because you are overriding background on hover selector thats normal situation. Try background-color:blue; on hover selector
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
Here's the HTML I'm trying to use:
<h1>Order Not Paid<span class="not-paid"></span></h1>
Of course if there is a better way please say so.
Currently since there is no text inside of the span, it seems the browsers are ignoring this tag. Firebug shows up grayed out when inspecting.
When I place text in the span, the icon shows correctly.
What CSS rule can I apply for this effect? Here's what I have so far (It's SASS, but easy to grasp):
h1 {
font-size: 24px;
span.not-paid {
background-image: url('/Public/images/remove.png');
background-repeat: no-repeat;
}
}
I'd like the icon to appear where the span is.
Alternatively, is it kosher to do something like this? If so, I can settle with this as it looks good on IE8 and modern browsers.
<h1>Order Not Paid <img src="#Url.Content("~/Public/images/remove.png")" alt="" /></h1>
If the icon is small and not reused anywhere else just set it as part of the h1.
HTML:
<h1 class="not-paid">Order Not Paid</h1>
CSS:
h1.not-paid {
font-size: 24px;
padding:0 16px 0 0; /* whatever the dimensions the image needs */
background-image: url('/Public/images/remove.png') no-repeat right center; /* Position left/right/whatever */
}
A little cleaner this way.
the background image is not showing up because the span has no width, and therefore is not showing any of the background.
also, the snippet you gave is not valid css.
try something like this, assuming the image is 16px by 16px:
h1 {
font-size: 24px;
}
span.not-paid {
display: inline-block;
vertical-align: middle;
height: 16px;
width: 16px;
background-image: url('/Public/images/remove.png');
background-repeat: no-repeat;
}
The display: inline-block; is to make it so the width will apply. The vertical-align is to center the image on the middle of the line.
All of that said, the <img> tag solution would work too, but it doesn't scale well to a lot of similar images. The css-based solution makes it easier to switch to something like css spriting later.
In either case, you'll probably want to change your direct image urls to relative urls before expecting this page to work in a production environment.
I'm pretty sure that you need to give the span some width. By default it has none, so of course no background image will be seen.
First, if you are not using sass and less, your stylesheet is wrong. Next, give inner-block to span and the image height and width.
h1 {
font- size: 24px;
}
h1 span.not-paid {
width: 50px;
height: 50px;
display: inline-block;
background-image: url('/Public/images/remove.png');
background-repeat: no-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/
I'm having problems getting my icon to line up with the text, tried every combination i can think of, still aligned at top
http://jsfiddle.net/gkC32/1/
Any help would be great?
Have you tried setting the vertical-align property on the img element?
.bluebutton img {
vertical-align: middle;
}
Alternatively, since you're using the image purely as decoration, you might want to use background-image to set the icon instead:
.bluebutton {
background: #336699 url('http://cdn1.iconfinder.com/data/icons/fatcow/16x16_0460/group_add.png') no-repeat 10px center;
padding: 3px 10px 4px 28px;
}
See: http://jsfiddle.net/gkC32/8/
It's the image that's throwing it out I think. Adding something like:
.bluebutton img {
vertical-align:middle;
}
Should do the trick. If you arranged it differently as well, you could improve the alignment slightly further. e.g. http://jsfiddle.net/gkC32/32/