I have an element with a transparent png as its background image - it's like a polaroid with the photo bit cut out so just the frame is showing.
With this as the background I then want a standard image to sit behind the element that has the transparent png background - to fit inside the frame.
i've tried setting z-indexing and opacity and although I can get the image to show through its obviously transparent because of the opacity settings.
Any ideas?
If .yourPhoto is a background image, you could do this:
<div class="yourPhoto">
<div class="yourPNGframeImage">
</div>
<div>
Or you could use inline images and position both absolute:
<div class="container">
<img class="yourPhoto" src="">
<img class="yourPNGframeImage src="">
</div>
.container {position: relative;}
.yourPhoto, .yourPNGframeImage {position: absolute; top: 0px; left: 0px;}
there is a fair few things to look out for when doing PNG.
when cutting make sure you
background is off.
export as png24.
if your in ie6 you will need to use someting like twin-helix png fix
http://www.twinhelix.com/
Try these steps. You should not have to change the opacity of your image as it will affect the whole image. When you use z-indexing you should also put in the position css element
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 would like to make a background image for one of my images. The background image is transparent and can be seen at http://webmaster.tsaprotectandserve.com/new_design/images/view_site.png (and I'm pretty sure I have the correct url relative to the document in the code) and the idea is just that one you hover over the images, you can see the view site background image. Before I move the background image to a hover class and center it on the image, I wanted to make sure it works properly just as a background image but it isn't showing up.
My code is
<img style="float: left; margin-bottom: 20px; background-image: url(images/view_site.png)" src="images/white_house_website.PNG" width="490" height="231" alt="White House Website">
My website with the issue is here and the image with the problem can be found if you scroll all the way to the bottom. It is the white house image.
u can view my working solution in jsfiddle:
http://jsfiddle.net/avi_sagi/Ea78j/3/
CSS Rules
.thumb{
width:490px;
height:231px;
background:url('images/view_site.png') no-repeat center;
background-size:100%;
}
.thumb:hover .view_site{
width:490px;
height:231px;
background:url('images/white_house_website.PNG') no-repeat center;
background-size:128px 128px;
}
if your css is in external stylesheets remember to change the url of the background image or mention absolute url to be safe.
HTML
<div class="thumb">
<div class="view_site"></div>
</div>
It is actually working. the image is covering up the "Veiw Site" image.
Because its the background.
i removed the top image via google chrome...
What you want to do is set the "View Site" image as separate div as child of a div around the image.
and set it to appear on hover.
something like
http://jsfiddle.net/hWcMK/
CSS:
.imagebox:hover .viewsite{
display:block;
}
.viewsite{
width:125px;
height:125px;
background-image: url("http://webmaster.tsaprotectandserve.com/new_design/images/view_site.png");
margin-top:-150px;
position:absolute;
display:none;
}
and the HTML:
<div class="imagebox">
<img src="http://webmaster.tsaprotectandserve.com/new_design/images/abc_website.PNG" width="80%"/ >
<div class="viewsite"></div>
</div>
I have a page that implements basic MS-Paint type functionality using the following palette:
When a tool is selected a grey outline is shown instead.
Currently an image of the window with the grey outlines is set as the background of the window div. The individual tools are on a single separate image:
When I begin to style the window, each tool is absolutely positioned using css of this nature:
#sketchpad_tools .tool.paintbrush {
background: url(../images/sketchpad/selected_tools.png) no-repeat -15px -80px;
top: 90px; left: 10px;
height: 100px;
width: 100px;
}
This requires me to eyeball each position, adjust the top and left properties, followed by finding the right location in the background image where the tool resides. This turns out to be a very time consuming task. If I decided to shrink the background size of the images--which I had to do on multiple occasions--the task becomes twice as long to complete.
Is there a more productive method for quickly styling this sort of functionality?
Instead of using the background image for the palette with the shadows, why not have a selected image (grey) and not selected image (colour) for each tool instead? When the tool is selected just hide the colour image and show the grey version.
If you have the images (without positioning) in a DIV with a width set to that of the palette then they should automatically wrap when the DIV width is exceeded.
See JSFiddle sample here showing how images will wrap in a DIV, just set the width of it.
Code sample you just need to add your image links in and :
<DIV style="width: 300px;">
<p>My Toolbox</p>
<img src="Tool1_Image_Location_Grey" />
<img src="Tool2_Image_Location_Color" />
<img src="Tool3_Image_Location_Color" />
<img src="Tool4_Image_Location_Color" />
<img src="Tool5_Image_Location_Color" />
</DIV>
I would like a CSS hover affect for multiple links that affect the same image. If you look at this example site I have Repair, Sales, Upgrades and Data Recovery links. When you hover over any one of them I would like the image to their left to change. You can hover over the image currently there to see what I mean.
website: http://ctuchicago.squarespace.com/
I would create a box that contains the image and all of the links. Then when the box is hovered over the image will change. This doesn't get you exactly what you want - which is only hovering over the link changes the image, but I think it is close enough and far easier.
http://jsfiddle.net/mrtsherman/D5ZRs/
div:hover img { background: url('blah'); }
<div>
<img src="" />
Repair
Sales
</div>
Put the image inside the a tag. Then use position: relative to position the image...
for example
a img{
position: relative;
left: -50px;
}
This seems to work... partially XD
<div class="frontdiv fblankd">
<a href="/audio-video" id="hav" style="width: auto;">
<div style="
height: 80px;
margin-left: 81px;
background: white;
color: black;
">
<h3>AUDIO / VIDEO</h3>
<p>Music Server, Home Theatre, Zone Systems, Universal Remote Control</p>
</div>
</a>
</div>
The basic idea is to have your content in the a tag (like ever body has been saying).
What I've done with the styling is set the anchor to width:auto and wrapped the content in a div. this div I then gave a height of 80px, left margin of 81px, background of white and font color of black.
Wrap the <p>, and <h3> tags inside the <a> tags.
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.