I've used a technique here with jQuery, HTML and so on. If I select an element its background will be a sliding lines animated gif so if I put another div in front of it and i made the back div 1 pixel wider than the front then it will look like the selection effect on photoshop. The problem is that sometimes I want an element to be opaque (for example text elements should not have background color, I want other elements to have that feature). Thus if I set the front div to opaque which have the text I will see the sliding lines gif itself. Is there a way to overpass the background div's background image on that area where the front div is visible and I could see everything BEHIND the back div?
Related
I currently have a background image but want to insert a blank white page on top of it using either html5 or css3. In addition, I would like the page to be able to be adjusted in terms of dimensions.
From the question description you have provided, I can understand that you need a White Box isnide a Box with an Image as background.
There are many ways to do it, Simple is to create a Div inside Div. Parent Div will have style of background image and child Div will have background color as white and position relative.
Background behind button should be like block background. Button can change its width.
How I can realise this?
This might be done in a lot of ways, here's just my first idea:
Use a mask like this:
Make sure your background-image covers the whole button
Insert two white divs above the background-image: left & right of your button
Insert a Mask like the above as the buttons background
Due to the transparent area (indicated by the texture) you are able to display a border-like part of your background image while the rest of it stays invisible, because its overlapped.
I illustrated the result of the instructions above
I have two divs. I would like to position one div over the other and have it appear over it. I am able to position the div but how can I make it such that background of the div is not visible or should I control the background visibility.
....
...
You should use background color and you can do one more thing that is while showing the upper div reduce the opacity of below div or just hide it or you can make overlay on which put the upper div so background div will not be visible. So many ways are already present to do such thing it depends upon you need.
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.
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.