On a web page I'm creating, I have a div with a background image. I overlay some text over the image that I'll be changing frequently, so that's why I'm using a background image and real text instead of an img tag that contains the text.
The background image contains some click-able areas, so I need an image map.
I think the best way to do this is to have another overlay div with a transparent image, and have an image map for the transparent image that corresponds to the background area click-able areas.
Am I on the right track, or is there a better way?
If you only need the "rectangle" shape for the links in the image map, you could use css defined link positions instead. This is accomplished by specifying the position and setting the background-color to transparent. Here is an example: http://www.position-relative.com/tutorials/tute1_css_bg_image.php
something you might try is placing the background div on "float"
IE
div.background {
float:left;
}
since its got a "float" on it the size of the background wont push the divs that come after it to the side...
then you can make a second div to contain all the text stuff and then use something like :
div.textarea{
position:realtive;
left:50px;
}
to position the text area (that youll be editing a lot) above the div background
IE6 doesn't support transparency so I recommend you use the IE6 png fix hack.
Related
I'm new in HTML programming and my main idea is to make text move out of the way while TweenMax animate(scale image)
I Have a function to enlarge and reverse image in position, but then scroll image are overlaping text.
This is a default image and text position :
But then i scroll on start(like green thing on screenshot bellow) screenshot are overlaping the text:
I want to make it so when the picture is enlarged it would push the text down and not overlap over it. What should I use in this case? I can give an example of my current code if needed. I did some research and either this is so easy with something like CSS that there are no examples or it is impossible to do.
Just give that text's main parent div below css, and don't use scale for that, just use width:100%; you can achieve it.
div {
float:left;
width:100%;
}
I am working on a drop down menu that I want to make completely with CSS. Within the link I will not only have text that needs to change when hovered over, but also an image. Changing the color of the text is easy. However I am not sure how to swap the images on the hover...
Here is what I want the result to look like:
Where the arrows will be small images that will switch when the link is hovered over. How do I do this using CSS?
http://www.w3schools.com/css/css_image_sprites.asp
Check Image Sprites - Hover Effect section.
Set the image as a background image to a div (with a set width and height), and you can change that value with css.
Ideally put both graphics into one image, so that you can just shift the background position and you don't get any flicker during the transition (Google "css image sprites").
I believe you'd need to use javascript to change the src of an embedded image.
You could also have two images and use display:block and display:none to show/hide them as appropriate, but I don't think that would be the best approach.
Use CSS background: url()... on an element you deem most applicable. Here is documentation and a walkthrough: https://developer.mozilla.org/en-US/docs/Web/CSS/background.
On a side-note, you may want to consider using a sprite as well, https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/CSS_Image_Sprites
I have the image below - is it possible to fill it with a color (eg: the part in the triangle) using HTML/CSS?
Or can I create this shape with HTML/CSS and then fill it?
Or do I have to use a colored in image?
Would be preferable to use HTML/CSS completely or at least fill the image..
thx
If you leave the part that you want to fill transparant then you can fill it with a color using css. If you want to create the triangle without using an image you can use SVG but that is not supported in some versions of IE (8 and older) or you can use Raphael JS to draw it in pretty much all browsers.
HTML and CSS don't actually DO anything, they're just markup for how stuff should be presented. So no, you cannot edit an image using HTML and CSS only, though it is probably possible with JavaScript.
What you could do with HTML and CSS is to display an image with an alpha channel and set a background color on the element containing the image. The background color would then be displayed where the image is transparent.
you can... Make sure the triangle part of your png is transparent and the rest white... PLace your image in a div with the same width and height as your pic and give that div a background color. Voila... Everything is white except the transparent triangle.
Good luck.
<div style="width:66px;height:30px;background-color:green;">
<img src="yourimage" alt="" />
</div>
I am currently creating a one page website, however I am having an issue, I need the scroll text underneath the fixed element however you can see the text that should be dissapearing under the fixed position element, as the element as a back-ground, which is a transparent png, is there any way I can hide text as it scrolls underneath the fixed position element.
Here is a fiddle of what I have, so far
JS FIDDLE
Ideally I am wanting it so that when text moves behind the box with red borders it is not visisble, without the need for a background color.
I have visited your website and stolen some images to better understand what you are trying to accomplish.. Assuming i'm correct in the assumption you do not want a solid background on the header because it would mess with your pages background....
you can use multiple backgrounds...
see your demo
You will need something in #banner that will hide the text. From the css it looks like there is supposed to be a background image in that block, but it is not showing up.
The header is transparent as set in your css reset, so a color or image will be necessary if you want the text to be hidden. Otherwise, it's like moving the text behind a piece of glass...you will still see the text unless you have something to actually cover it.
I suspect if there was a working background image on the header, it would block the text where it wasn't transparent. When I add a background-color it achieves that effect.
I have a div which has css background: rgba(0, 0, 0, 0.85);. Centered in that div is the title of the page. I want to make the title see through (knockout, punch-through, however you want to call it. i.e. see past the div's background black to the background image of the page). The only method of doing that that I have come up with is using an image with the div's background and transparent text and seperate the header part into blocks.
///////////////////////////////////////////////
// (empty) // TITLE IMAGE // (empty) //
///////////////////////////////////////////////
The problem is that I dont know how to create the empty divs such that the image will remain centered (the empty divs need to be there to add the black background). Is there a different way to either do the see through text that doesnt have this problem or a way to center the image div with the empty divs?
EDIT: For an example of the effect that I am trying to achieve, look here:
http://www.showandtell-graphics.com/layer-knockout.html
you can not do this directly; You should use an image for this, or svg might do the trick but that's a hell of a lot more complicated and browsers do not all support it that well.
You should just be able to do this
<div>
<h1>Title</h1>
</div>
Place the background-image on the div
The h1 will be transparent by default.
To center the title, use text-align:center
To center the background image, you can use background-position:center
Example: http://jsfiddle.net/jasongennaro/EQDZd/