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.
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.
I've got a line of text that gets revealed when a dropdown arrow is clicked. However, certain pages of the site I'm building have divs that extend beyond the single line of text I'm hiding.
Here's an example:
The green div (ordinarily white) needs to overlap the div above (blue body with orange margins). My goal is to cover up a link that will sit 15px beneath the arrow under the word "Bukau", leaving the text to left unaffected.
I have a hunch the solution I'm looking for might involve making the 'green' div fixed/changing z-index values.
I also want to make sure the green block acts like an extension of the content below it, getting pulled up/down when a user clicks the arrow toggle.
Appreciate any advice/suggestions!
Solution: Simple as making the top-margin on the 'green' div -50 or so pixels, and setting its position to 'relative'
I have two different elements (div class="") within a larger container.
Let's call them div class="overlay_container" and div class="title." The div class="overlay_container" has a subclass, .image, which creates an overlay over the entire larger container on hover.
The div class="title" has a z-index of 10,000 and lies over .image and therefore over the overlay. Unfortunately, when you hover over "title," the subclass overlay image underneath disappears.
I know the problem is obviously that the "title" div is right over the other divs and therefore the on hover will disappear due to the z-index. But how do I fix this? How do I make it so that when you hover over the "title," the .image overlay still appears?
If your answer involves jQuery, could you please tell me where to put the script (before the /head tag)? Thanks!
Adding pointer-events:none; to the title div might work?
Looks like most browsers recognise it, except for....dun dun dun...IE: http://caniuse.com/#search=pointer-events
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 am designing a page on www.bookmyshirt.co.cc/hair/city.html
In main div it has two div:
1) block_header
2)main_out
but main_out is not showing grey background to all of its content rather it shows only grey background to some height i want that grey background to all of its content.
and also at bottom that button also merge with above content.
any suggestion is welcome.
main-content1 is in position absolute.. that's why main-content cant set the proper height.
Remove the position absolute an you'll see the grey background
EDIT:
your problem is that you set the heights for different divs but the content of your divs are bigger than the height you gave them (e.g .main-content, .deals) if you have a dynamic content or if you dont know the height of the div, just remove that property in the css.
To solve the problem of the register button, remove the height on .deals