I'm trying to make a diagonal background with CSS.
Why not use images? Because I want to make a parallax effect later and I can not do it with images due to some factors.
You can see here the page:
http://jsfiddle.net/2ABd4/6/
As you can see, the result is the one I want. The problem is that the layer named "bg1" and "bg2" have a fixed position.
position: fixed;
I do not want it to be fixed.
But if I put an absolute position is off to the right.
So, I need this result to remain diagonal, without being fixed without dislodging the page to the right. The question is: Is it possible to do this?
Related
I am trying to do this fun resume site and am stuck with the backgrounds itself. I have 3 backgrounds in all: a picture with a mountain and some sky, another picture with just the mountain cut out, and a nice little Easter egg hidden in between. I made the front and back layers scroll-able, and the middle one fixed, so the little dickbutt hides behind the mountain when the user scrolls down.
But the problem is, the dickbutt image is somehow not positioned properly even if I manually positioned it in Photoshop before saving it as an image. So I used the background-position tool to set it right, and it's all right now, except, it is so just for that specific browser size. In the mobile view, not only is the background not centered on the mountain peak, but the dickbutt is way off with respect to position.
TL;DR: I want to position one of my multiple backgrounds with respect to one of the other backgrounds, but instead it is getting positioned with respect to the viewport. What should I do?
Here's my code: (github link)
I want the page to look like this:
There is no way to position of images with respect to other background . but you can achieved your task with multiple div having multiple background and arrange them using position absolute and z-index
I'm trying to achieve parallax effect only using CSS. I have achieved to manage parallax effect for a single image by having it's position fixed and setting z-index to -1. I'm having trouble incorporating the same technique for the second image as it overlaps with the first one. How do I resolve this?
This is an example of the effect I'm trying to acheive only without using images.
I want to create these screens that take up the entire screen like in the example. But instead of using background images to keep the content position, I'd like to use any HTML content within these screens. I'd also like to eventually ad a parallax effect similar to this.
So let's break it down. I got these background images on these screen elements. The background is fixed so it stays in the same position when you scroll. When you scroll down, the element moves out of view and another comes into view. It gives this effect as though the scrolling is causing a cover to slide up and reveal another screen. I want to keep this effect only without using background images. So I'll need some way to have some content remain fixed and have a contain hide it when it overflows an element that isn't fixed. But, as far as I know, there's no way to do this with CSS alone, am I wrong?
Like I said above, it would be interesting to have the content not remain exactly fixed, but instead slightly move it as you scroll giving it a slightly parallax effect. In order to do that tho, I'll need to use JavaScript. But, that's a bit out of the scope of my question, but I'd like to keep this in mind when coming up with the solution.
Thanks for all help in advance!
How can I make all my pages have the same background feeling as my homepage. For example if you see this page you can see the background is out of place. Let me know if you want me to send you the code but pretty much you can see it at these pages. Thanks a lot!
PS: Any other way besides using position fixed?
Try a different approach... Instead of using 2 different gradients in two different div's (#hhbg and #footer), just combine the two gradients into one image and apply it as a background to, for example, body. Then use background-position to anchor the image to the bottom corner and repeat it horizontally.
I've already had a look through some posts and couldn't find what I was after. I'm designing something in PS at the moment and I can foresee an issue when it comes to coding the design into html+css.
Imagine my centre div, it's 960px. It's going to have a semi-transparent .png as a background. The design is “full width” so this div will be contained in a larger div, set to 100% width. This is all ok until I get to the background on this outer div. It's also going to have a .png running the full width of the page. Problem is: I don't want it running through the middle, as it will result in the middle have a double thickness to it, if that makes sense?!
Basically, I need a way to either run a div either side that is elastic, or someway of stopping the background from running across the centre 960px portion of the browser window.
I have NO idea how this can be achieved, apart from using JS to set widths, which I don’t really want to do.
Any ideas?
Ok, I’ve tried to get the basic issue here: http://jsfiddle.net/8Bznc/1/
You can just put a non-transparent background on the center div, so the other background doesn't show through.
See here: http://jsfiddle.net/9bnHD/
Apply the background-image only to the wrapping div.
Alternatively, if the center and sides need to have different images, give the center div a non-transparent background-color as well.
Also, you could fake it by using multiple background-images. Demo
Keep in mind this won't work in old versions of IE, but something as non-essential as background transparency can be excepted as graceful degradation.