Many of you probably know the Firewatch Parallax in CSS pen by Sam Beckham, which recreates the parallax effect of the Firewatch website: https://codepen.io/samdbeckham/pen/OPXPNp
<div class="parallax__cover">
I want to put some text in this div to close out the parallax effect and I can't figure out how to center this text in my viewport.
Problem is, the surrounding div "parallax" is much wider than the viewport and it starts 1500 px to the left of it.
Any ideas?
I tried to center it the usual ways with an auto-margin etc. I expected the text to be horizontally centered but that does not work.
Related
I can't figured out a background problem. I want my logo and text background to strech to left, but the text has to stay in the main wrap.
thank you!
sorry for late, i played with media screen and width. Now its good for the customer.
On the top "PRÉMIUM ÖNKISZOLGÁLÓ AUTÓMOSÓ" background. and the logo black line.
http://redcarspa.hu/
This is kind of a peculiar problem. I am working on a header for a custom form where a logo is on the right side of the header and header text is centered within the logo banner.
In general, logos are narrow, so I want to center the text in the main container div like this:
In a few cases, if the logo is very long, I want to center the text on the left side. This is easy enough to do by creating a div that floats left and centering the text within:
The tricky part here (and I'm not sure it is even possible) is making the header text centered on the left side if and only if the image size is beyond a certain length. Oh--and I can't use Javascript.
Wondering if there are any CSS tricks that can get me there...
I'm new here so forgive if anything sound very noobish.
I'm busy making a personal website and have two divs inside a wrapper, a content div and a sidepane div. their height is set on 99% and they overflow on auto. I want the page to not scroll (unless they make the screen smaller) but the divs must scroll.
The Problem: I want to have the bottom text of the divs to fade away so that when you scroll down the div it brings the text to normal. I could use a gradient image or just CSS if someone could lead me in the right direction. I'm struggling with this cause of the overflow. I want to know how one could keep the gradient at an absolute position at the bottom of the div, but now its not really at the bottom of the div if you get what I'm saying? Because the div has overflow on. I want it at the position where the div ends on the screen, but not where the text ends. I tried putting my code in
Here's a pic
If you check the right div, I want the bottom to be faded and as I scroll the gradient stays there at the bottom. (which is not actually the bottom of the div) - also need to be able to resize page and it stays in same position.
The key is background-position: fixed;
I have created a little fiddle for you to see what i mean: Click me
I just hope i understood your problem correctly without any code and just a screenshot ;)
Also for CSS gradients see here
I have a fixed height div and want to align an image to the bottom right corner with the text (of an unknown/variable length) to wrap around it. I'd ideally like to avoid using Javascript and the best solution so far appears to be to use a vertical spacer div above the image (which is the container height - image height) to push it down. This works perfectly on IE / FF but the text overlaps the top of the image on safari (mobile and standard). I'm not sure why this is happening, I appreciate the fonts are displaying differently but surely the text should flow around the div/image either way? You can see an example of what i'm talking about at http://jsfiddle.net/deshg/XScmK/, i've just used a coloured div with some text instead of an image in this example.
Any thoughts would be massively appreciated as I'm not sure why this isn't working?
Thanks very much as ever,
Dave
in your 3rd div margin-top:20px; for a quick fix, but this will push up your 1px wide div.
also try changing these heights: 141px to 140px, and change 159px to 160px.
I'm doing HTML and CSS for a site, and I've come across a very weird bug / behaviour that I can't pin down.
Take a look at http://www.atelierhsl.nl/antwerp/. There's a white line through the logo at the top. If I display:none the navigation at the bottom of the page, it disappears. But when I increase the bottom padding of the text column (.entry-content) it reappears again. This happens in Webkit, Mozilla and IE, so I know I must be doing something wrong. I just can't figure out what. Anybody?
This is caused by an anti-aliased line on the top your body's background images (just 1 pixel of light gray). The simple answer is to crop it using an image editor.
You may want to align the image to the top:
background: url("/wp-content/themes/transfer/images/bg.jpg") no-repeat scroll center top #1D1D88
The main problem is that the background image isn't as big as the the area it should cover.
Kobi's answer is correct, but if you don't mind a design suggestion: Rather than putting a black background image at no-repeat top for the body, separate body content into a container and a footer. For the content background use a smaller background image and tile it, or set the background color to black, since it appears you have no gradient. The footer div can then have a white background (inherited from the body, or just assigned directly).
You page is logically divided into main content and a footer, so the HTML should express that.
There is two solutions:
Just changed the body padding top from 60 to 40 or
changed the background position from center center to center top
I think, you should cut a 1px line from your background and to repeat-y it. There will be no bug, and you will decrease the image weight.