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
Related
I need to figure out how to overlay an image of my logo on top of another repeating image that is being used as a background for the nag bar at the top of my site.
The CSS for the nag bar image looks like this:
.header {
background:url(../images/bg-header.jpg) repeat-x;
height:125px;
is there a way to add another image on top of this and have it aligned to the left side of the underlying image?
Something like this?
http://jsfiddle.net/aJEwZ/
<style>
.nav {
background: url(http://www.psdgraphics.com/file/light-wooden-background.jpg) repeat-x;
height: 250px;
width: 500px;
border:1px solid black;
}
img {
padding:20px;
}
</style>
<div class='nav'>
<img src="http://a.deviantart.net/avatars/h/a/haz-elf.jpg?1" />
hello</div>
Here you go.
here's a DEMO
and here's the CODE
Here's the css
.header {
background: url("http://fc04.deviantart.net/fs70/i/2013/266/7/3/sydneigh_logo_by_robberbutton-d6nmaox.png") top left no-repeat ,url("http://subtlepatterns.com/patterns/sandpaper.png") repeat-x;
background-size: 571px 125px, auto;
height:125px;
width: 100%;
}
notice how the background attribute has two shorthand backgrounds with images written out seperated by a comma. The first image is on top of the second image and so on.
The first property of attribute background-size only applies to the first property in the background attribute (the first image in the declared background attribute.) The second applies to the second image in the background attribute.
This works the same way with other background-properties such as background-repeat, and background-image.
Here's an article on having multiple background images:
http://www.css3.info/preview/multiple-backgrounds/
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.
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 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.