if i try to apply multiple background images, works great:
.selector{
background-image: url(image1.png), url(image2.pnng);
background-position: 0 -50px, 0 -100px;
}
the problem comes when i try
.selector{
background-color: blue, red;
background-position: 0 -50px, 0 -100px;
}
that simply won't apply any background color at all..
What am i missing here?
You can't have more than one background-color.
You can either use images, or a CSS gradient to achieve your desired result.
Assuming your desired result is two colours meeting in the middle, look at this for a gradient example.
I don't get it.
You're trying to set the background color to two colors. How do you expect this to work? Multiple background images make sense as you can have transparent PNGs. But colours? You want to place a solid color on top of a solid color (so essentially overriding the previous color)? Background color applies to the whole area, so you can't shift it in space.
To answer your question, it's simply not possible to do that, unless you're thinking about gradients.
That doesn't make much sense. background-color: applies to the whole object. It's like you're trying to set a background color to the images or something, but background-color doesn't work that way!
Related
I'm using a template from semantic-ui. This one: https://semantic-ui.com/examples/homepage.html. Essentially i'm trying to change the height of the background to match the height of my image. Right now my image (the one in background-image) shows up but the background (which I turned red simply to see it better) is larger then it so I have this dead space between my background-image and the beginning of the content.
The only way I seem to be able to manipulate the background is the color. Any other time i'm changing it's size (which i've experimented with quite a bit) it only seems to change the size of the image. Not the red background.
Perhaps i'm not understanding the relationship between the two? Any tips on how to change the background's height to match the background-image?
Any help is appreciated.
CSS below:
.ui.inverted.vertical.center.aligned.segment {
background: red;
background-image: url('./images/backgroundLogo.png');
background-repeat: no-repeat;
/* background-size: 100%; */
background-size: 100% 507px;;
width:100%;
}
I found it. There was a native min-height: property that was over riding my attempts to change. Simply put in
min-height: 500px !important;
and it worked.
What would be the most efficient way to change the walk signals on the header image on http://www.danielLmusic.com from red to green. I would think there'd be a more efficient way to do it than to change backgrounds since i'm only changing a small percentage of it. Any help for my newbie self would be most appreciated.Also, it's a wordpress site if that makes any difference.
Thank you in advance!
Recreated the background image so that the signals are TRANSPARENT, you'll need to use a PNG or GIF. Use background-color CSS property to change the color, leaving the background-image untouched.
.bg {
background-color: red;
background-image: url('...');
}
.bg:hover {
background-color: green;
}
I have this situation using CSS.
I want an image to be in the center of the screen, doesn't matter the size of the screen, always in the middle. That's pretty easy to do.
But, the image (.png) I want to be in the middle is black and has some transparent letters in it.
So, I want the whole screen to be black, but still have transparent letters in the middle of the screen.
The reason I want transparent letters is because I'm using a script to fill the letters while the page is loading. The idea is based on a progress loading bar, but in this case, using letters as the 'bar'.
How can I achieve that? I have tried surrounding the image with divs but it's not the best way since depending on the screen size, some divs may not reach the image and left a blank space.
What do you suggest? What should I read?
Just in case I didn't make myself clear, here is an image:
The best option I can currently think of, to black out the screen around the centered img is to use box-shadow:
#main {
position: absolute;
top: 50%;
left: 50%;
margin: -250px 0 0 -250px;
box-shadow: 0 0 0 500px #000;
}
JS Fiddle demo.
This does, of course, require that the browser supports the box-shadow property (or at least one of the vendor-prefixed implementations), and also takes a fairly arbitrary number for the 'spread' of the blur.
Unfortunately, while I'd rather use the border property the border affects the layout and must be compensated for in positioning the img, whereas the box-shadow doesn't affect the layout of the page.
With this demonstration, obviously, the background-color should be replaced by a background-image or whatever alternative you're using to represent the loading bar.
So you want the whole screen black, but you have transparent letters that you want to be seen?
IF i understand what you want correctly, could you make the background color of the body (or html object) black, keep the image, but put a white (or colored) image directly behind the logo using absolute positioning.
I guess I don't understand why you want the transparent letters, but a black background.
Is it possible to change the color or tint of background image on hover/focus using pure css
See example here http://jsfiddle.net/jitendravyas/HdDRA/
In above example there is a white arrow on an image. I want to change the color of white arrow ( not the other background image) to something else on hover and focus.
I cannot use inline images in my case.
Edit:
I'm looking almost same like this http://jsbin.com/icemiy but for background images.
And I also want to change the color with fade-out so I can't do with multiple images
A quick and dirty fix would be to duplicate the arrow image in the color you want it to be onHover. Then replace the background image with this in the code.
body
{
background:
url(http://www.kapellohair.com/images/white-arrow.png) no-repeat,
url(http://www.tnpsc.com/downloads/NaturesScenery.jpg) no-repeat;
background-position:
center 50px,
center top;
}
body:hover
{
background:
url(http://www.example.com/images/arrow-with-desired-color.png) no-repeat,
url(http://www.tnpsc.com/downloads/NaturesScenery.jpg) no-repeat;
background-position:
center 50px,
center top;
}
p.s: The link does not exist. It is only for illustration purposes
Just thinking off the top of my head here.
I suppose you could put a transparent coloured div over the top of the image with an opacity of 0, then have its opacity go up to say 10% on hover. You'd be somewhat limited on what you could do though, it would look weird if you did it to an image with an irregular outline, for example, and you'd only have limited control over the tinting (I think it would pretty much be the equivalent of a semi-opaque layer in Photoshop so you couldn't do anything that you would require other tricks such as multiply or screen to achieve).
No, you can't do what you want, you can change the background using another different image.
An alternative could be to use a font to render the arrow and then to change its color (which is also animatable).
Alternatively, you can rely on Javascript to do some color manipulations on the image. See this answer
Can someone take a look at my background shadow? Here is the link:
link text
I'm trying to find the best solution for having a background shadow for a card in the front (layered).
Is it possible to make the sides of shadow cave in with CSS?
I'm currently using a PNG with transparency and I can't get the shadow to match with the background!
Any suggestions would be helpful.
To get your image to line up you can do it in css:
#card_main {
background:url("/img/shadow.png") no-repeat scroll 0 0 transparent;
margin:0 auto;
min-height:800px;
position:relative;
top:-1px;
width:980px;
}
Though your background gray color seems to be different in the image than the background.
you can also make your shadow.png only be the text shadow, not including the background-color for the header and content area in the png.
or, you can simply use the box-shadow css declaration for webkit and FF. and a filter for IE. if you're interested in this solution i can post some sample code.