i am working on this website (builted with Wordpress) and i am trying to set this image as a fixed left background above the entire website content.
Via CSS i'm trying this
body {
background-image: url("http://birsmatt.ch/de/wp-content/uploads/2016/04/bg_left.png");
background-position: left;
background-repeat: no-repeat;
z-index: 1;
}
...but the z-index does not works.
Any tip?
Thanks in advice.
Inside the body is your whole website content. So if you set a background, it will be behind all the content of the body.
You can create a new element inside the body with the size of the body and give that the background you want.
Example:
#background {
background-image:url('http://birsmatt.ch/de/wp-content/uploads/2016/04/bg_left.png');
background-position:left;
background-repeat:no-repeat;
height:100%;
width:100%;
z-index:1;
position:absolute; /* make it overlap your website content */
}
<body>
<div id='background'></div>
<div id='rest of your content'>
...
</div>
</body>
Related
I have a page section that has a fixed image as the background. When the page scrolls another page section scrolls on top of that image. I am trying to make the background transparent so you can see through to the image. I have tried rgba(0, 0, 0, 0.20) and
opacity:0.4;
filter:alpha(opacity=40); methods to no avail.
Here is my code:
.page-section {
width:100%;
margin:0px auto 0px auto;
overflow-x:hidden;
background:url('img/body-tile.pn');
background-color:rgba(255, 255, 255, 0.20);
background-repeat:repeat;
}
.transparent {
background-color:rbga(0, 0, 0, 0.50);
}
.home-bg {
height:100%;
background:url('img/home-bg.jpg') no-repeat;
background-position:center center;
background-attachment: fixed;
-webkit-background-size:cover;
-moz-background-size:cover;
-o-background-size:cover;
background-size:cover;
z-index:10000;
}
<div class="page-section home-bg clear" id="home">
</div>
<div class="page-section transparent clear" id="about">
<div class="wrapper clear">
</div>
</div>
Introduction
I've read through your updates and there are still a few things that I'm not sure of. Firstly, I've no idea about dimensions of your images or your divs. You also have two classes that you've shown no rules for in your css. In fact if I were to run your code in a browser I'd get the following absolutely nothing showing up....
That being said, your description is more helpful:
I have a page section that has a fixed image as the background. When the page scrolls another page section scrolls on top of that image. I am trying to make the background transparent so you can see through to the image.
So I'm going to base this answer off of your description. That being:
A static/non-scrolling background image that is omnipresent
Creating a page with a static background
The way to do this is to attach the image as the background of the page container. Whether that be a div or the body tag (or some other tag - it doesn't matter).
For this example though, I'm going to attach the image as the background of the body tag.
HTML
For the example I'm going to create a page with multiple divs container inside of the body tag...
<body>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</body>
^^^ Doesn't get much more simple than that
CSS
This is where we make it look how we want it too... I have added several rules so that it displays properly and you can see how it works.
body{
background:#3df url('path/to/image.jpg') no-repeat fixed center; /* Attach image to body with options of no-repeat, center, and fixed and a fall back colour of #3df */
background-size: cover; /* Set background to cover the whole of the area that body takes up */
width:100%; /* Set body width to 100% of view port */
height:100%; /* Set body height to 100% of viewport */
margin:0; /* Set margin to none - now white borders */
padding:0; /* Set padding to none - no white borders */
}
div{
background: rgba(0,0,0,0.5); /* Set default colour of divs to black at 50% opacity*/
width:80%; /* Set width of all divs to 80% of viewport*/
height:200px; /* Set height of all divs to 200 pixels */
margin:auto; /* Center all divs on the page */
}
div:nth-child(even){
background:rgba(255,255,255,0.5); /* Set every other div to white at 50% opacity */
}
Example
NOTE: I used a random image from the internet for demonstration purposes.
See it in action here: http://jsfiddle.net/65h7R/
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Creating a page with a static background</title>
<style>
body{
background:#3df url('http://piccolor.com/wp-content/uploads/2014/02/Calm-Sea-Waves-wallpaper_7597.jpg') no-repeat fixed center;
background-size: cover;
width:100%;
height:100%;
margin:0;
padding:0;
}
div{
background: rgba(0,0,0,0.5);
width:80%;
height:200px;
margin:auto;
}
div:nth-child(even){
background:rgba(255,255,255,0.5);
}
</style>
</head>
<body>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</body>
</html>
Follow up
I'm leaving this section till last because as I mentioned at the beginning I'm still not sure what you're code is supposed to be doing. However, if my understanding of it is correct then the reason why it is not working is relatively straight forward and has nothing to do with opacity.
You might have realised already after reading the first paragraph from the section above:
The way to do this is to attach the image as the background of the page container. Whether that be a div or the body tag (or some other tag - it doesn't matter).
From what I understand of your code you are attaching the background image to the first div in your page sections and not to a parent container. Therefore the image is only visible when the div in question is on the screen and is only visible beneath that element/div.
What you need to do to fix this is to attach the image to a parent div/container such as the body tag - as I have demonstrated above
I'm building a vertical layout with many slides, each one has 100% height to fit on different resolutions. I'm using zurb-foundation 5 front end, and in the top part of the site I'd like to create a background slideshow with orbit; to acheive that, I organized the markup so that each one of the 'li's which form the orbit slider has 100% height and a personal background image. Evreything is working ok, the only issue is that, once the page is loaded, when I increase the height of the browser, my background doesnt become bigger.
That's the HTML markup:
<section id="top">
<ul class="top-slider" data-orbit>
<li class="slide1">
<li class="slide2">
</ul>
</section>
And the CSS one:
html, body, #top, #test {
width:100%;
height:100%;
margin:0;
}
.orbit-container, .orbit-container ul {
height:100%;
}
.slide {
height:100%;
background-repeat: no-repeat;
background-position:center;
background-size: cover;
}
.slide1 {
#extend .slide;
background-image: url('../images/slider_1.jpg');
}
.slide2 {
#extend .slide;
background-image: url('../images/slider_2.jpg');
}
Try to use "max-width" instead of "width".
Thank you for the answer, unfortunatly it doesn't work. Anyway, I solved adding !important to
.orbit-container, .orbit-container ul {
height:100% !important;
}
:D
My background image isn't scrolling up and down, or else it is scrolling down too far. I want it to scroll down to the bottom of the background image and then stop.
<head>
<style type='text/css'>
.noWhiteSpace {
margin-left:0;
margin-right:0;
margin-top:0;
background-color:#F4F7E3;
background-image:url('/front_page.jpg');
background-repeat:no-repeat;
background-size:100%;
height:180%;
}
.words {
font-family:Madelinette;
text-align:center;
margin-left:25%;
margin-top:10%;
}
#lineOne {
color:#5f4e2b;
font-size:5em;
}
#lineTwo {
color:#629040;
font-size:4em;
padding-bottom:2%;
}
#otherLines {
color:#952221;
font-size:2em;
}
</style>
</head>
<body class='noWhiteSpace'>
<div class='words'>
<div id='lineOne'>Crafters Resale</div>
<div id='lineTwo'>blah</div>
<div id='otherLines'>blah<br>blah<br>blah<br>blah<br>blah</div>
</div>
</body>
background-attachment: scroll is by default you don't need to specify that. Your image is not scrolling because your body don't have enough height try giving height explicitly in css or just add some more content in your body.
Hope this will help you but if you were asking something different please elaborate it.
height of 100% means your whole content will be displayed but dude background-image don't get count in the content(if you add img tag then it will be counted). So you need to give the height same as that of your img in px. For eg.
.noWhiteSpace {
height: 2222px; /* I think that was your background-img height */
/* your other styling .... */
}
I'm aware that similar questions have been asked over and over, but I have yet to come across a solution that actually works for me. Picture the following problem.
Situation:
The body has a non-fixed background image that repeats both vertically and horizontally.
There is supposed to be a second transparent background image laid over the first.
Constraints:
The second background is supposed to stretch across the document, just like the background on the body. Mind: Not just the viewport, the entire document.
Even when the body height is smaller than the document height (i.e. no scrollbar), the second background must stretch to the bottom of the viewport (so any solution working with 100% html and/or body height is out of the question).
The second background's position cannot be fixed, because that would cause some sort of parallax effect when scrolling. The illusion that both images are actually one must be upheld.
It is possible for the body to have margin and/or padding. Both backgrounds should cover the entire document regardless.
Using a second background image on the body ("background-image: url(), url();") is not an option for backward compatibility reasons.
No JavaScript.
No actually merging the two images into one, obviously. :)
I have brooded over this problem for a while now and have gotten to the conclusion that this is impossible using only HTML and CSS2. I'd very much like to be proven wrong.
You should place a background image for two separate which covers each the whole document :
<html>
<head>
<style>
.firstbackground {
position:absolute;
left:0;
top : 0;
width : 100%;
min-height : 100%;
background: url('first.png') repeat;
}
.secondbackground {
width : 100%;
min-height : 100%;
background:url('second.png'); /* may be transparent, but why add a background then ;-) */
}
</style>
</head>
<body>
<div class="firstbackground">
<div class="secondbackground">
long content
</div>
</div>
</body>
</html>
CSS3 allows multiple backgrounds that are separated by commas, for eg:
background: url('topNonFixedBG.png'), #000 url('mainBG.png') no-repeat fixed top center;
http://jsfiddle.net/hs2WT/1/
Just use multiple divs...
CSS:
html {
height: 100%;
}
body { height: 100%;}
.wrapper1 {
width: 100%;
height: 100%;
background: url('http://khill.mhostiuckproductions.com/siteLSSBoilerPlate//images/nav/hixs_pattern_evolution.png');
}
.wrapper2 {
width: 100%;
height: 100%;
background: url('http://khill.mhostiuckproductions.com/siteLSSBoilerPlate//images/nav/yellow1.png');
}
.content { color: #fff; }
HTML:
<div class="wrapper1">
<div class="wrapper2">
<div class="content">
<p>Some Content</p>
</div>
</div>
</div>
let the secend background to have the position:absolute;
body{
background:url("http://jsfiddle.net/css/../img/logo.png") #000;
}
#secBg{
background:url("http://placehold.it/350x150") ;
position:absolute;
min-height:500%;
min-width:100%;
}
<html>
<body>
<div id="secBg">
</div>
</body>
</html>
http://jsfiddle.net/5sxWB/
I have a fixed navbar using curved ribbon images that have transparent bits above and below the actual ribbon and I have a scaling full size background (so I can't make a navbar with a matching background at the top). I would like the page content to disappear behind the ribbon, halfway through the navbar as the user is scrolling.
It's the same problem as these two questions and the answers (which are good) aren't working for me.
Hide scrollable content behind transparent fixed position divs when scrolling the page?
Hide Scrolling Content Under Transparent Header
This is what I don't want:
http://imageshack.us/photo/my-images/213/badnr.jpg/
This is kind of what I want but without the scrollbars:
http://imageshack.us/photo/my-images/534/scrolled.jpg/
Thanks in advance for any help, it's greatly appreciated, this site has and will continue to teach me a lot.
The css z-index attribute should do the trick to place any element in front of or behind another element. Like so:
<style type="text/css">
body, html {
margin:0 auto;
padding:0;
font-family:Verdana, Geneva, sans-serif;
font-size:12px;
}
/* Header Styling */
#header {
color:#FFF;
background: url(/images/header-back.png) repeat-x;
position:fixed;
top:0;
left:0;
width:100%;
height:50px;
z-index:1;
}
#headerWrap {
width:1024px;
margin:0 auto;
height:50px;
}
/* Sub Header */
#subHeader {
position:fixed;
top:50px;
margin:0 auto;
z-index:1;
}
#subHeaderWrap {
height:30px;
width:830px;
border-bottom:thin solid #333;
background: url(../images/subheader.png) repeat-x;
}
/* Contaier */
#container {
margin:0 auto;
width:1024px;
min-height:600px;
}
#containerWrap {
margin-top:50px;
}
/* Menu */
#sidebar {
float:left;
width:140px;
min-height:600px;
}
#content {
border-left:#333333 solid thin;
border-right:#333333 solid thin;
border-bottom:#333333 solid thin;
float:left;
width:830px;
min-height:600px;
padding-top:30px;
margin-bottom:10px;
}
#contentWrap {
width:830px;
margin:0 auto;
padding-bottom:10px;
}
</style>
<div id="container">
<div id="header" style="z-index:1;"/* Places div on top */">
This is transparent.
</div>
<div id="containerWrap">
<div id="sidebar">
Menu Items Here
</div>
<div id="content">
<div id="contentWrap">
<div id="subHeader" style="z-index:1;"/* Places div on top */">
<div id="subHeaderWrap">
This div is transparent too, but is now on top.
</div>
</div>
Anything here is scrollable and will scroll under the divs above with z-index:1;
</div>
</div>
I have found the solution you're looking for.
You're going to use a little Jquery and some CSS. I will assume you're loading the latest version of Jquery in your footer.
The header will be fixed, the elements inside it will be absolute. We will not focus on elements inside the header because that really doesn't matter for this, but if you were to put a menu and logo in the header you would make them absolute.
HTML Div with class header assigned or if you prefer you could just create a <header></header> element, whichever. But for this example we will use a class.
<div class="header">...Your Header Elements In this...</div>
CSS
body {background: url('../img/page-background.jpg') no-repeat top center fixed; background-size: cover;}
.header {position: fixed; top: 0; left: 0; width: 100%; height: 100px; background: transparent;}
JS - I use a seperate JS file and then load this after I've loaded Jquery in the footer.
$(window).scroll(function() {
"use strict";
var windowYmax = 1;
var scrolledY = $(window).scrollTop();
if (scrolledY > windowYmax) {
$('.header').addClass("hide-content");
} else {
$('.header').removeClass("hide-content");
}
});
Add this CSS for new class assigned:
.hide-content {background: transparent url('../img/page-background.jpg') no-repeat top center fixed; background-size: cover;}
Here is a JSfiddle: The Fiddle
I was not able to get the JS to work in JSfiddle for some reason, maybe someone can fix that issue, but I don't really have the time to mess with JSfiddle much, but wanted to provide an example to the end result. So I just added the class that gets assigned by the JS to the div in the HTML and you can see the result in the preview pane.