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;
}
Related
I have been googling this for hours but none of the suggestions found are working.
I have a page banner which is light blue. On it I have placed a transparent png image file. The blue background does not show through, I just see the white/grey checkerboard effect where the transparency is.
It is pretty simple. I have a Div container defined in CSS and a class for the img. Here is the CSS
.header-column-small {
float: left;
width: 30%;
background-color: transparent !important;
}
.header-column-small img {
width:220px;
height: 150px;
object-fit: contain;
}
The background color is defined further up the chain in a parent div class.
And here is the HTML
<div class="header-column-small">
<img src="books-on-shelf-small.png" />
</div>
Here is how it looks
Screenshot
I have tried using background-colour: transparent in both the image class and the immediate image container (header-column-small) but no better.
Any help really appreciated
Many thanks
Mark
OK, hangs head in shame... :)
Turns out the PNG file was not a transparent background image at all. Just a warning to others that may be searching the net for images for their project. The sites that claim to be providing 'transparent' png files are not always doing so.
I should have looked for the obvious first before trying all sorts of code hacks to fix a problem that wasn't really there..
Thanks to those who replied so quickly to shine a light on my short-sightedness!
Cheers
Mark
I have a background image and below that I want to have a color.
I have this CSS:
body {
background: url('/images/background.jpg');
background-color: #000;
}
But the image appears with no color. I've also tried this:
body {
background: #000 url('/images/background.jpg');
}
But that doesn't work either. What am I doing wrong?
What do you really want? The background color around the image background or in the back of the image? If it's in the back of the image you have to use an .png (transparent) image and the background: #000 url('/images/background.png');
background: #000 url('/images/background.jpg');
Your background color is actually working but it is being overlapped by declaring a background-image. Unless your image supports transparency like .png and opacity was declared. You would be able to view your bg-color.
It will help if you provide us your exact image and the output you want to achieve.
Use in this way background: #657b78 url('../images/background.jpg') repeat top left;. Do not forget to check if the URL of such image is correct.
I cannot solve a css problem.
I have a nav bar which should be transparent. But the links on it also get transparent due to the opacity attribute and because they are child elements of the transparent navigation bar.
can u help me to solve this?
If you dont want your link text to be affected you should modify the rule for the .container selector to look like this
.container {
width: 100%;
height: 90px;
margin: 0 auto;
background-color: rgba(255,255,255,0.5);
}
it will keep your background color design without affecting your text
Opacity , as well said here several times , affect the element and its children
Using opacity . Text is affected
Using rgba(255,255,255,0.5), children not affected
Take care of the other rules that can take action due your javascript and hover situations
Fiddle here
Bis spater
The solution is easy. Just set the background-color CSS property to transparent.
.nav {
background-color: transparent;
}
In css3 you can use transparent backgrounds instead of making the whole panel transparent.
To add a transparent color you can do: rgba(255,255,255,.5) where the .5 is the opacity.
You should try just a simple css background property.
.navbar
{
background-color: transparent;
}
I use transparent png image (bg.png) with the desired opacity, and call it like this:
.menu
{
background: url('bg.png') repeat;
}
The png image can be small, even 1x1 pixel. The repeat is to fill the background space entirely.
its as simple as this
background: none;
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!
I have a sprite map. In that sprite map there is 1x1px fragment that I need to use to create a background for an element (i.e. repeated).
Does CSS alone provide a solution for that? I am interested even if it is futuristic and will work only in IE12. For those who don't know what a sprite map is, I've attached an example.
https://static.anuary.com/9429dc4e7a395b6443ae58919f1416523a9a798dd54931cb0e5ed70c582766a4/public/images/sprite.png.
I don't know of a particular method that will let you clip a portion of an image to tile it as the background of an element. Since you only have a 1px x 1px fragment, why don't you use the standard background-color property or keep a separate graphic for this purpose? I prefer the background-color CSS property since you seem to be dealing with a solid color.
You can also go to CSS3.info to see what's coming.
You can try using CSS before or after pseudo elements instead of using placeholder tags
.icon::after {
position:relative;
display:inline-block;
overflow:hidden;
content:" ";
width:21px;
height:24px;
background:url(images/icons.png) -1000px -1000px no-repeat;
}
.icon::after {
background-position: -14px -24px;
}