I have a transparent logo for which i want to apply a background color how can i do so using css?
Simply use background-color on your element as such:
<img style="background-color: #F00;" src="my_transparent_logo.png" />
If you do not want to do it inline, you can assign it an ID (or class) like such:
<img id="logo" src="my_transparent_logo.png" />
and in your external CSS file do the following:
#logo {
background-color: #F00;
}
You can use
background-color
See Background properties
Assuming an element with an id attribute with the unique value "logo",
#logo { background-image: url("foo"); background-color: #F00; }
Here is another resource for when you are applying background properties through css: http://www.w3schools.com/css/css_background.asp
my thought though is that if you want the image to have a background color, this could defeat the purpose of using a .png so it might be better to convert the .png into a .jpg with the background color added into the image itself. Then you don't have to worry about browser compatibility with transparency --- of coarse it just depends on what your goal is.
Related
I tried webfilters to change the white background of this image looking at this:
Change color of PNG image via CSS?
Not sure if this is the way to change the whitebackground of this image:
http://i.stack.imgur.com/AZRrE.png
Is it possible to change this through css?
You need to use a png that has a transparent background - the one you are using has a white background. For example.
.red {background-color:red;}
.blue {background-color:blue;}
.green {background-color:green;}
<div class="red"><img src="http://i.imgur.com/UAdT2Jd.png" /></div>
<div class="blue"><img src="http://i.imgur.com/UAdT2Jd.png" /></div>
<div class="green"><img src="http://i.imgur.com/UAdT2Jd.png" /></div>
If you do a search for radio button png you should be able to find a better one than the one I have used (as mine has some rough edges that are showing up)
Is it possible to change this through css?
No. If the image had some transparency, you could change the background-color (and/or background-image) of its parent element, like so:
<span class="thing"><img src="your-semi-transparent-image.png"></span>
And in the CSS:
.thing {
background-color: aqua;
/* This will show through the transparent region of the image */
}
I think I may not be understanding "ID's" and Classes in CSS. In the following example, I am just trying to customize the way the single image is displayed. I tried to simply just create a custom id for that image, and then in the CSS add the appropriate tags.
The CSS I wrote is not applying to the image.
And on a side note, can I create a custom id in CSS by just doing <id> instead of <p id> ?
<!DOCTYPE html>
<head>
<style>
#mypicture {
outline-color: red;
border-radius: 40px;
}
</style>
</head>
<body>
<header>
<p id="mypicture"><img src="assets/ben.jpg"></p>
<h1>Bens's Blog</h1>
<ul>
<li>About Me</li>
<li>Best Poems</li>
<li>Worst Poems</li>
</ul>
</header>
</body>
You're applying your CSS to the paragraph <p> tag. You want this to respect your current DOM:
#mypicture img {
outline-color : red;
border-radius : 40px;
}
A better rule set is this:
#mypicture > img {
outline-color: red;
border-radius: 40px;
}
mypicture is a paragraph and you want the styles to be applied to the image within the paragraph.
Try applying the ID directly to the image:
<p><img src="assets/ben.jpg" id="mypicture"></p>
The default value for outline-style is none. So, setting color alone isn't enough to get the outline to appear. Try setting outline-style: solid;. The will put a square outline around the paragraph.
Since you are also setting border-radius, it makes me wonder if your intent is to round the corners on the image. If so, you should apply the styles to the image instead of the paragraph. If you want the outline to be rounded as well, use border instead of outline.
I would simply (on line 13) leave out the paragraph blocks and put the id inside the picture declaration.
<img src="assets/ben.jpg" id="mypicture">
I am trying to use 1 single image file containing 4 images and display them using CSS sprite. Somehow, all 4 images are displayed. I was referring to one of the examples in w3schools.
<div id="ViewTypeContainer" style="float: right; margin-top: 10px; margin-right: 10px;">
<img id="calendarView" alt="" src="/Images/ButtonToggle.png" height="1" width="1"/>
<img id="grdView" alt="" src="/Images/ButtonToggle.png" height="1" width="1" />
</div>
CSS:
#ViewTypeContainer img#calendarView {
width:82px;
height:82px;
background: url('/Images/ButtonToggle.png') 0 0;
}
#ViewTypeContainer img#grdView {
width:82px;
height:82px;
background: url('/Images/ButtonToggle.png') -30px 0;
}
My image file is in .png format:
Can anyone spot my mistake? Thanks.
Yeah: your img tags have their src attributes pointing at the sprite image too.
If you want the sprite image to show up with the positioning specified in the CSS, the images need a transparent image in their src attribute.
Working example using your image here (I've used a data-URI for the transparent GIF):
http://jsfiddle.net/7Ns8L/
And here's another example using what might be more semantic HTML (depending on what these controls actually do), i.e. no <img> tags:
http://jsfiddle.net/7Ns8L/1/
Exactly. You're giving a background image to an image. So the IMG tag is displayed as normal size right over the top of your sprite. The concept of sprites is easiest applied if you work with background-position css property. You could either go through the trouble of generating a transparent .png for your IMG tag source (I wouldn't recommend it), or just replace the IMG tag with a div and give the div the same ID and CSS.
I have a table with a background image using css property background-image. In table I have some images using the <img. Images <img table are above the background image. I would like the background image overwrite the images <img as with the text. Is that possible?
Code Example:
<style>
#content { background-image:url("background-image.jpg"); background-repeat:repeat-y}
</style>
<table id="content">
<tr>
<td>Some text.....text.....text
Image: <img src="quadrado.jpg" />
</td>
</tr>
</table>
"I would like to display the two images. The background image
above the quadrado.jpg ! Like a watermark"
Sounds like you want an overlay. You can't do that with just CSS.
But you can come close by adding styles like so:
#content
{
opacity: 0.8;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
filter: alpha(opacity=80);
}
#content img
{
opacity: 0.8;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
filter: alpha(opacity=80);
}
.
For more of a true overlay, you'd need to code it into your HTML or use javascript to add it on the fly.
Take a look at this page. It uses javascript to generate overlays for blocks with the class OverlayTheBackground.
There are also jQuery plugins that are supposed to generate overlays.
Perhaps post a picture of what you want.
But, it sounds like all you need to do is add this style:
#content img {visibility: hidden;}
I'm not sure I understand the question completely, but if you want the background image to show through parts of the content images, you will need to use png's or gif's as they permit parts of the image to be transparent and jpg's don´t.
How to put an image over another bigger image, like on youtube, a play button is displayed on top of video thumbnail?
Make a semi-transparent PNG graphic with a "Play" symbol and the size you want (e.g. 240x320).
Let's say you named it "overlay.png", and let's say the YouTube-generated thumbnail is at http://img.ytimg.com/abcdefg/0.jpg
Now all you need in your code is this:
<a href="destination_of_your_link">
<img src="overlay.png" width="320" height="240" border="0"
style="background: url(http://img.ytimg.com/abcdefg/0.jpg) center center black;" />
</a>
As long as your target audience is not still using IE6, you should be safe.
I'm not sure that YouTube uses images for this effect, isn't it still the Flash player?
Anyhow, exactly how this is done depends very much on the design you want to achieve. Lets assume that you want to achieve the YouTube style, where you have a thumbnail image and want to overlay a play button image on top. If you want the thumbnail to be an actual <img> tag you will need some extra markup, like this:
<div class="thumb-wrapper">
<img src="mythumbnail.gif" alt="my awesome video" /><span></span>
</div>
The wrapper <div> is required so you can target the img and span correctly, and have dimensions to contain them in. The span is where the overlay image will go.
.thumb-wrapper {
position:relative;
}
.thumbwrapper span {
position:absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
z-index: 100;
background: transparent url(overlay.png) no-repeat;
}
(I haven't actually tested this, if its blatently wrong let me know I'll revise it!)
This assumes a couple of things:
Your thumbnails will always be a fixed size and your overlay image matches that
Your overlay image is a semi-transparent PNG
You could also use the opacity: style to achieve #2. Of course, IE6 will rear it's ugly head and you'll need to use a PNG fix for it if going the transparent image route, or a separate opacity filter if using that method. Both of these are undoubtadly answered elsewhere on Stack Overflow or easily google-able.
If you have other requirements it might be possible to do this without the extra markup, as I said it all depends on what you need exactly. Some requirements may not be possible without JavaScript (which would of course mean you could inject any extra markup with that!).
You will find the solution in the following thread on StackOverflow:
How to draw a graphic over another graphic
Shortly (quoting after Ipsquiggle) :
<div style="position:relative">
<div>
<img url="backgroundimg.png">
</div>
<div style="position:absolute; left:0; top:0;">
<img url="smallgraphic.png">
</div>
</div>
More details why and how it works in the original thread.
If you have good control over image size, we have used the background to various elements - for example, set the background of a table cell to one image and put an img tab inside the cell.
Taking your example of youtube, you could very easily do this with 2 images and 1 img tag and a little bit of CSS of course ;)
<style>
img.youtube {
width:500px; height:500px;
margin:0; padding:0;
background:transparent url(/point/to/your/larger/image.jpg) no-repeat center
}
</style>
<img src="/point/to/youtube/play/image.png" alt="Gotta have alt text ;)" border="0" class="youtube" />
How it works is simple, you have the small youtube image as transparent PNG or GIF and then set the background image as the larger image, this will then give the effect of the smaller image being in the center with no extra markup.