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.
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 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 td and want to put a bg-image in it. In know there are different problems with using newsletters with css on different clients.
I tried this:
<td style=" background-image: url('...absolute path...');
background-repeat: repeat-y no-repeat;
width: 15px;">
</td>
I tried also to add a class attribute to the td and putting the css in head.
Nothing works, the img does not appear.
EDIT:
Now I read from a German source that outlook does not support many css attributes like
background-image
background-position
background-repeat
display
float
position
How can I add a background image to a td element?
I don't think that background image in css is supported in Outlook like that.
http://www.campaignmonitor.com/css/
I think, that the only way to put an image in a td is:
<td><img src"#" /></td>
Of course if you don't have other content than the image.
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.
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.