I finished putting all my content onto my html. After that I went to create the background, I want a space type of background so I googled what to do. I used code I found to create a background. My page went from having content on it to having no content but showing the animated space background only, with a blank footer. Anyway around this to where I can have my animation and my content on the page.
Its not really clear what you have done, can you put the code here? one quick way I think is to just make your background div absolute and give it z-index:-1 left:0 top:0
Related
This may be a stupid question, but I am making a website and I want to have a page that has a fixed image that stays where it is when you scroll to see more text. One problem that I have encountered is that I can get the image to be fixed, but then I cannot make other text scrollable. The other problem is that I can get the text to be scrollable but the text goes under the fixed image. Is there any way that I can fix this. I have been using very simple html divs with classes from a style.css file.
As Geeky Quentin said, z-index is the solution to your problems. You mentioned that you are using classes in css, so in the class you should put z-index: index. The higher the index, the more things it goes over. If you want an image to stay where it is and not get anything put over or under it, you can just use different z-index indexes. If you separate the s then you should be able to make the text scrollable. I hope this answers your question.
I recently downloaded Flexslider and managed to extend the images, and I have two things I need help with. The first thing is that I want the slider to be full width, and apparently it is being blocked from that in .container by overflow:hidden. If I remove that piece of code, everything expands and the website doesn't look right, but it removes the space between the slider and the screen. Does anyone know how I can fix that?
And my second question is how I make a small space between the slider images. Here is an example of how I want it: Example
Here are my codes:
jsfiddle
Adding margin:0px; on the body fixes the problem.
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!
Here's one for you that has me stumped:
I'm using background:url to put a small image in the bottom right corner of my container within css which works nicely. However, when users are on the account creation page, the section that has the "create account" and "cancel" buttons is overlapping with my image, obscuring half of it. Here's what it looks like:
I have looked into using z-index to fix this issue to no avail (since the image is a part of the container, if I decrease the z-index for the obscuring div, the whole section with the buttons is put behind the container which makes them impossible to see). I also don't want to go into each page individually and put the image into the html, especially since I'm using Joomla and the template html structure is pretty confusing for me. (Using Joomla 3.0.3 with the default Protostar template)
Am I missing something obvious? I feel like I am...
Thanks in advance!
You're funny :) Using a background image but wanting to put it in the foreground.
Just use an image tag and position it absolute in the bottom right of the container (don't forget to give the container position: relative)
The problem is as follows:
I have a header which has a width of 100% (thus it is from side to side of the screen). My background image, starts soon after the header.
In the body I have a box with contents which is centered. When I resize the window I want that the background is overlapped, thus I want this content box to move to the left when doing so. Until it reaches a limit that the background is completely hidden. It will then reach a point that the box cannot shrink thus having a min-width.
How shall I make the box of content overlap the background without hindering the header?
(BTW I have no idea what the tags are. Because this website is asking me for tags)
Thanks
This layout is called Elastic because the page contents adjust as the window does.
Since you didn't provide the HTML, we can't help you anymore than providing the relevant CSS style to apply to your mysterious "box".
style="width:80%; min-width:500px;"
If you're messing with HTML and CSS, I strongly recommend reading up on the basics. The more you know yourself, the more we can help you.