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.
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
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 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 :)
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 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.