I am putting together an idea for a site with scrollable background images, on top there is a white menu div with text in it. If possible i would like to have the text completely see through so that it almost looks like it has cut the text from the white div to show the images.
i know of the css rule:
background-clip: text
but i don't think this wont solve my problem as my images are not the background for the div the text is in. Is there any workaround without using svg or png.
thanks :)
Related
I have built a simple website which includes a parallax image gallery with accompanying text descriptions for each image. The gallery is underlaid with a simple repeating pattern wallpaper.
The images have no margin between them. Their borders are covered by the text box which has a higher z-index, and the discrepancy between the scroll speed of the images and texts creates the parallax effect.
I would like to allow the background wallpaper (bottom layer) to also be the background of the textbox but to achieve this, I would need to make the middle layer (the image) transparent where it is obscured by the text box.
I have no idea where to start with this - I suspect my best bet is to just ignore this problem remove the wallpaper altogether but perhaps there is a straightforward answer to this issue?
The included image has a semi-transparent text-box and borders to give an idea of the layout and the problem I'm facing. Would appreciate any ideas. thanks
Link to the image
It's kind of hard to explain, but I want to make a website with a picture as the background, and over the picture a grey overlay. I then want to have some text above the overlay, and where the text is, the grey overlay is removed, so the text is written in the absence of the grey overlay.
I made an example a year ago, with images, but I want to make it in CSS, if it's possible.
Here's the example (sorry for the mess, didn't really know what I was doing back then)
Example Page
Specifically, the text furthest down (most visible) on the page.
I really hope something like this is possible without using images as the text.
Thanks in advance!
This is not possible with CSS. You can do it with SVG though:
Text with image background in svg or css
I'm looking to build a progress bar that I will generate programmatically. I'm a css novice, at best. Here is what I have so far; using tips from this question.
Ideally, I would style the following simple HTML, but I'm open to adding more tags:
<div id="container">
<h2><span>Goal</span></h2>
<div id="bgblock"></div>
<h2><span>So Far</span></h2>
</div>
Two, maybe 3 issues:
Right now the "text over line" is accomplished by making the text white, on top of the line. This ends up cutting into the green background. To avoid this, I guess I need to have the text (without a background color) and lines on either side of it?
Obviously my formatting / margins / offsets are a mess, and the top of the box borders / hr alignment is not quite right (seems like the top text needs to be shifted up a couple pixels or the container down a couple pixels, but I'm having trouble doing this).
Thoughts on a cleaner solution that gets me where I want to be?
I've created a working fiddle for you. http://jsfiddle.net/avrahamcool/QpWqd/46/
the main trick is to differ the white background and the text of the h2 elements, giving each a different z-index.
both the background and the text are above the border.
but the green background come between the white and the text.
so the layers are:
border
white background of h2 tag
green background
text
Tested on: IE10, FF, Chrome
I have an editable textarea displaying code text, and I want to apply some simple styling with a background pattern simulating the typical <pre> styling.
When I place the background image and scroll within the textarea, the background image is fixed to the textarea and the text flows on top when scrolling.
I want the background image to scroll together with the text.
Fiddle
The only bulletproof solution I've come across while searching is something like this, but I was hoping to find a simple CSS solution to this.
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.