Apologies for the bad HTML here, I'm not very good at it. When trying to make a HTML page for a friend's Discord bot, something weird started happening when trying to get the background div (class of background) behind the body. Simple enough, I just set a z-index of -1. This causes issues with the Discord bot listing website, though, as it sends that background behind everything and means that it's hidden. "No problem, I'll just set the z-indexes to be 765 and 766 right?" Wrong. I've tried it on the Discord bot website and codepen.io, any time I use a non-negative index on main it brings it to the front. I could make the indexes for background and body 0 and 999, background will still be in front. Does anyone know what I can do to fix this?
Relevant CSS:
body {
margin: 0;
overflow-x: hidden;
position: absolute;
z-index: 999;
}
.background {
background: url(URL);
width: 100vw;
background-size: 100% 100%;
min-height: 100%;
position: absolute;
top: 0;
left: 0;
z-index: 0;
}
Relevant HTML:
<body>
*things*
</body>
<div class="background"></div>
What about this?
body {
background-image: url(https://placehold.it/1000);
background-size: cover;
}
I think there might be some confusion with how the elements work. I think you're making it a step more complicated. Is that so?
Related
it's my first time here, I'm looking for a way to do a kind of floating header in HTML or CSS.
I mean you know that kind of websites when you scroll down a part of the page follow you.
Just like this :
https://codepen.io/freeCodeCamp/full/YqLyXB
Blockquote
ea
Hope the question isn't asking anywhere else, It's hard to find out a response in english since I can barely explain it my french!
Thank's if you take time to answer.
position: fixed; will create a header that is "fixed" to the top of the window viewport and will float over the rest of the site's content.
body {
height: 500vh;
background: url('http://www.platonphoto.com/photos/72-1057-a.jpg') top center no-repeat;
background-size: cover;
}
header {
position: fixed;
top: 0;
left: 0;
right: 0;
background: black;
color: white;
padding: 1em;
}
<header>header</header>
What you are looking for is position: fixed.
It is one of the positioning available for a HTML element which allows you to take a certain element out of the normal flow of your document and make it fixed at a certain place. Then it won't scroll as you scroll the image.
I've been working on a website which works pretty well, bar some optimisation issues that I'll tackle in the future; you can see it there: http://robin-v.net/
The problem I'm facing today is that, on mobile browsers – at least on iOS, I haven't been able to try on Android recently but I've heard it behaved similarly – scrolling causes the browser to lag quite a bit and the address bar to act weirdly.
Whenever you scroll, during the scrolling itself nothing strange happens but as soon as you lift your finger from the screen the browser freezes for a moment, and then the address bar toggles its states – if it was visible it collapses, and vice-versa. I know that the address bar is meant to collapse whenever you scroll down, but here it toggles from hidden to visible whenever you scroll, regardless of the scroll direction. (Depending on the browser, the address bar might never hide at all, and stay visible 100% of the time.)
I have no idea what might cause this behavior... the version of the website that's currently online has almost no JS (the little it has has nothing to do with scrolling).
I'm pretty sure it's due to a CSS declaration, but I don't know which.
To be honest, I'm relatively new to web development, and I learnt by myself, so I'm sure I must be doing something wrong somewhere, but I don't know what. I've faced the same issue on another website I made, so it's probably a habit I got from somewhere that I should get rid of.
From what I've gathered, I think it probably has to do with the declarations on the html or body elements, or something to do with overflow or positioning... But that's all I have. :/
I'm pasting the code for the base structural elements below, but I'm not even sure the problem lies with them.
HTML
<body class="home blog">
<div id="main">
<div id="scenes">
...
</div>
<div id="slidewrapper">
<div id="rightsec" class="mainsec">
...
</div>
<div id="leftsec" class="mainsec">
...
</div>
</div>
</div>
</body>
CSS (Sass)
html {
box-sizing: border-box;
font-size: 125%;
text-size-adjust: 100%;
line-height: 1.4;
}
body {
background: #000;
}
#main {
position: relative;
height: 100vh;
width: 100vw;
overflow: hidden;
}
#scenes {
position: absolute;
top: 0; bottom: 0; left: 0; right: 0;
height: 100%;
width: 100%;
margin: auto;
pointer-events: none;
}
#slidewrapper {
position: absolute;
height: 100%;
width: 100%;
backface-visibility: hidden;
}
.mainsec {
position: absolute;
top: 0;
height: 100%;
width: 100%;
overflow: hidden;
}
#leftsec {
z-index: 1;
left: calc(60px - 100%);
}
#rightsec {
z-index: 2;
right: calc(60px - 100%);
}
Cheers!
Okay, it seems it's all caused by the elements containing the content having a fixed size, filling the whole screen (in this case, #main is 100vw * 100vh) and with overflow: hidden. When you scroll, the content inside #main moves, but the document itself doesn't, since it's not larger than the viewport. That's why the address bar never moves either.
I managed to fix the issue on a different website, but unfortunately, due to the structure of my homepage (which I linked in the question), I don't see how I could change it there. If someone has an idea, please feel free to share!
I've looked around but it doesn't help that I don't even know the name of the effect.
What is the effect called which has a transparent div section with a large image behind it. It's similar to a paralax effect but I don't think it falls under that category.
Please see here: http://shield.nvidia.co.uk/
At the "All you favourite games to go." section.
I've seen it on lots of sites.
Another example here: http://www.wekeroad.com/
If I can at least know what the effect is named I can proceed to learn it.
Edit: Thanks guys, I thought it was some fancy effect. It's very simple, I made my own too just playing around: http://jsfiddle.net/uuepunx8/
html, body{
height: 100%;
width: 100%;
}
*{
padding: 0;
margin: 0;
}
.first{
width: 100%;
height: calc(100% + 100px);
background-color: red;
}
.second{
height: 50%;
background: url('http://hdwallpaper.freehdw.com/0004/3d-abstract_hdwallpaper_equations_33432.jpg') fixed 0 0;
}
Setting a main container's background to position:fixed; is what you're looking for. Your internal content will need to be big enough to scroll and have something breaking up the content, such as a margin-bottom: 300px:
.background{
background: url(http://lorempixel.com/300/300/) repeat;
background-size: cover;
position: fixed;
height: 100%;
width: 100%;
}
Here is a simple JSFiddle to play with.
I don't know the name, but that effect is not hard to implement using CSS.
All you have to do is add a background image to each of your scrolling divs (or other element type structuring your page) setting the background-attachment to "fixed".
So, in the final weeks I have to send this project we have been working on for school. Today however, I uploaded live to http://goroam.org and was shocked when I realized that everything was pushed around, and out of place. I know that the font's look really bad but I wasn't done uploading the font's because of the issue that i'm trying to fix now. Also why is there a horizontal scroll bar? I'm so confused. Any help will be gladly taken..
from your dastyle.css remove
width: 100%;
which you have assign in body and add
position: absolute;
example
body{
position: absolute;
padding: 0;
margin: 0;
}
Use CSS3 and stay trouble free :
div
{
resize:both;
overflow:auto;
}
(or) without CSS3
Just drop you width and :
body{
position: absolute;
margin: 0 auto;
}
i have created a website but now i am having 1 issue. i am unable to do click even on link and navigation.
you can take a look:
http://www.cambridgekitty.com/business-directory/
to check the real codes.
HTML
<div id="main-bg">
<div id="left-side-logo"></div>
</div>
CSS
#wrap {
padding: 0;
position: relative;
width: 100%;
}
#main-bg {
background: url("../img/kittybg2-h.png") no-repeat scroll right top transparent;
margin: 0 auto;
min-height: 733px;
position: relative;
width: 100%;
z-index: -9999;
}
just add a logo on left side
#left-side-logo {
background: url("../img/norwichkitty-final-logo-bg-02.png") no-repeat scroll 0 0 transparent;
height: 500px;
left: -150px;
opacity: 0.8;
position: absolute;
top: -60px;
width: 500px;
z-index: -1;
}
and add
position: relative;
to #wrap. and add
z-index: -9999;
to #main-bg.
but after doing this ... i am unable to click on logo or even navigation links.
please let me know why i am casusing this issue.
thank you
Don't use a negative z-index if you don't know exactly what you're doing. Use a positive value and just set #left-side-logo's z-index to a value even higher.
Since #wrap has a negative z-index, it's placed behind the content of #inner-wrapper in the latter's stacking index.
See also:
W3C: CSS2.1: 9 Visual formatting model (Section z-index)
If I were you, I would simple change the elements I apply the different background images to. Give #inner-wrapper the city image background, and #main-bg the logo background. Then use the background-position property to position the logo background (currently the two zeroes in your background rule). Also, if you want opacity for that logo you can achieve that by simply setting it in Photoshop or whatever editor you prefer.
This solution means you don't have to deal with the z-index issues and makes for more hack-free and semantic mark-up, although you do have a few containers. Hope this helps :)