I have set a background image in body and in .wrap. My question is how do I place a background above all them? It is done with CSS however I didn't figure it yet.
I place all my code in http://jsfiddle.net/7sdnU/
Thank you.
<body>
<div class="wrap">
</div>
</body>
With z-index:
http://jsfiddle.net/7sdnU/2/
The html element can also be styled, so you can shift the background layers back one element. Something like this:
html {
background:url(bottom-background.png);
}
body {
background:url(middle-background.png);
}
wrap {
background:url(top-background.png);
}
/* Make sure everything takes up the whole viewport */
html, body, .wrap{
height:100%;
width:100%;
padding:0;
margin:0;
}
Demo: http://jsfiddle.net/7sdnU/15/
You could also just add another wrapper div:
<body>
<div class="wrap">
<div class="inner">
</div>
</div>
</body>
Then apply the "top" background to .inner
However, CSS3 allows multiple backgrounds, so you may want to have a look at that - that's best solution if you can use it, but it's not fully supported.
Related
First time posting here. I was wondering how to change the css for the html { } attribute of a single page. I am trying to make the background color for 2 pages different. If there is a better way to do it please let me know. Thanks!
I have done this:
html {
background-color: black;
}
for one page.
I want to do the same thing with a different color for another page (so that when you scroll out of bounds of the div it does not show a different color).
Every page must to take a different css external document:
<link rel="stylesheet" href="css/page1.css">
Then, you can change the element's properties:
/* 1st page */
body{
background-color: black;
/* background: rgb(0,0,0); **You can also use this property** */
}
/* 2nd page
body{
background-color: blue;
}
*/
Saludos!
This is one solution to your code. If you do not want the white part between two pages, just using position:absolute; in CSS.
Furthermore, your CSS code is not working because you forgot a "."
.page1{
height:100%;
background:red;
}
.page2{
height:100%;
background:green;
}
<body>
<div class="page1">
<p>
Your elements
</p>
</div>
<div class="page2">
<p>
Your elements
</p>
</div>
</body>
I'm trying to implement this codepen into an html page. The idea is that it fades away after everything on the page loads. This is what I currently have.
HTML
<div class="js">
<body>
<div id="preloader"></div>
<!-- WEBSITE -->
</body>
</div>
</html>
(* ALERT: You cannot try to close a div tag after having closed the body element *)
CSS
Lots of CSS so I put it on codepen
JQUERY
jQuery(document).ready(function($) {
$(window).load(function() {
$('#preloader').fadeOut('slow', function() {
$(this).remove();
});
});
});
So it seems to be working fine except I can't seem to figure out the purple background. The spinner works perfectly but if I put background: #774CFF; in the .js div#preloader it doesn't cover the entire page in purple, only within the spinner.
You assign the background-color on the #preloader, which has 30px width and height.
So, either you apply the background-color to the body
body{
background-color:#774CFF;
}
either you wrap the #preloader with another element and stretch it to fit the screen:
HTML
<div id="preloader-wrapper">
<div id="preloader">
</div>
</div>
CSS
#preloader-wrapper{
position:absolute;
width:100%;
height:100%;
top:0;
left:0;
background-color:#774CFF;
}
I'm trying to create a scrolling effect that preferably doesn't use javascript (CSS only) but I understand if it's not possible, just exploring options.
My page looks like this:
When scrolling down I want the background image to have a parallax-like effect, staying static while the body's background and frame move around it.
Here's a sample of code to work with:
http://jsfiddle.net/J8fFa/7/
HTML
<body>
<div class="border-bg">
<div class="image-bg"></div>
</div>
<div class="border-bg">
<div class="spacer">
</div>
</div>
</body>
CSS
body{
background-color:#aaa;
}
.border-bg{
width:80%;
margin:30px auto;
background-color:#fff;
padding:40px;
}
.image-bg{
background:url('http://i.imgur.com/7cM1oL6.jpg');
height:400px;
background-size:cover;
}
.spacer{
height:900px;
}
I can see how this would work if the image was the background for the body, but as this is sitting on top of the body is there any way I can manipulate it to have a similar visual effect?
change your .image-bg class to:
.image-bg{
background:url('http://i.imgur.com/7cM1oL6.jpg') fixed;
height:400px;
background-size:cover;
}
this will prevent the image from scrolling
updated fiddle: http://jsfiddle.net/J8fFa/9/
I have been trying to figure this out for a while and everything I try fails to produce the result I am after.
So the setup is as follows
HTML
<div class="container">
<div class="icon-holder">
<img src="https://cdn3.iconfinder.com/data/icons/free-social-icons/67/facebook_square-128.png" class="icon"/>
</div>
<div class="icon-holder">
<img src="https://cdn3.iconfinder.com/data/icons/free-social-icons/67/facebook_square-128.png" class="icon"/>
</div>
<div class="icon-holder">
<img src="https://cdn3.iconfinder.com/data/icons/free-social-icons/67/facebook_square-128.png" class="icon"/>
</div>
<div class="icon-holder">
<img src="https://cdn3.iconfinder.com/data/icons/free-social-icons/67/facebook_square-128.png" class="icon"/>
</div>
<div class="icon-holder">
<img src="https://cdn3.iconfinder.com/data/icons/free-social-icons/67/facebook_square-128.png" class="icon"/>
</div>
</div>
CSS
.icon-holder {
float:left;
height:100%;
width:auto;
}
.container {
height:100px;
}
.icon {
height:auto;
width: auto;
max-height: 100%;
display:block;
}
.container-before {
height:100px;
}
.container-after {
height:20px;
}
Now the problem lies in that if I use javascript to resize the container I need the images to resize with it and have no spacing in between. I need a CSS solution that works, I know I can hack it with JS but thats not what I am trying to accomplish.
I have an example running at http://jsfiddle.net/twmxh/3/ of the whole issue with expected output.
UPDATE
Just a bit more about the implementation. The container div is actually a toolbar with a resize handle. So the container is the only element I can apply the new height on.
Can you do this
$("#resize").click(function() {
$('.container').height("20px");
$('.container .icon').width("20px");
});
This appears to be triggering some funny browser bugs - it works fine essentially in both Firefox and Chrome, but both screw up on the element resize in different ways. In IE10 your sample doesn't run at all.
However, for the intended result you shouldn't be using animate at all in these modern CSS3 days, just use CSS transitions instead, like this example Fiddle solving your case to work in all current browsers.
Try switching your CSS for the image size
width: 100%;
height: auto;
i don't think heights and percentages behave well in most browsers
This is generally how you can define the size for a "responsive" image... whereas the width will always fit the size of the container, and the height will follow suit automagically.
edit your code so that the animation scales by width rather than by height. see if that works.
Try adding to the dynamically changed widths
clear:right;
this will refresh the container
heres a link
http://www.w3schools.com/cssref/pr_class_clear.aspenter link description here
I've a simple javascript function which is meant to increase my sidebar div's height to make it equal to the height of the content div. this is how I am doing this....
Javascript:
<script type="text/javascript">
function absar(){
document.getElementById("sidebar").style.height = document.getElementById("content").clientHeight;
}</script>
HTML:
<body onLoad="absar()">
<div id="sidebar" style="border:1px solid red">Few content</div>
<div id="content" style="border:1px solid red">
some content <br>
some content <br>
some content <br>
some content <br>
some content <br>
</div>
</body>
This code will make the height of sidebar equal to the height of content div. ** OK**
But when I paste same code in wordpress(where I've same id values content & sidebar) just after the body tag and provide onload="absar()" to body it does nothing, exactly nothing.
At this point when I've designed almost whole layout I can't go with a new solution like Faux Columns or table etc. .
At last a stupid css trick worked and worked perfectly,....
for my sidebar div I set
padding-bottom: 5000px;
margin-bottom: -5000px;
and for the container which contained sidebar and content divs. I set
overflow: hidden;
and it worked perfectly - Just like the way I wanted, Please tell If you know any drawbacks of this trick,... I'll be posting here if I found some,
Below is the example code,
HTML
<div class="main">
<div class="sidebar">Few Sidebar Widgets</div>
<div id="content">
Bang Bang Content <br>
Bang Bang Content <br>
Bang Bang Content <br>
</div> <!-- End of Content -->
</div> <!-- End of Main -->
CSS
#main{
overflow:hidden;
}
#sidebar{
padding-bottom: 5000px;
margin-bottom: -5000px;
}
Further to #Absar 's answer, can I just add my adaptation?
I did this:
.container {
overflow: hidden;
....
}
#sidebar {
margin-bottom: -101%;
padding-bottom: 101%;
....
}
I did the "101%" thing to cater for the (ultra rare) possibility that somebody may be viewing the site on a huge screen with a height more than 5000px!
Great answer though, Absar. It worked perfectly for me.
For several reasons, this should be solved by using proper CSS and HTML markup, not by Javascript. The main reason is the separation between your site logic and your presentation layer. CSS is just for visual layout, and simple presentation issues should be solved in the CSS domain. This seems to be the case of your question.
I suggest you have a look at this CSS-tricks article. It is both enlightening and thorough.
Hope it helps.