This is a live demo: http://baogiadientu.com/demo/fridgevan/
And the result that I want: http://baogiadientu.com/demo/fridgevan/images/demo.png
I want to add a background with an infinite width to two elements (.top-bar and .nav). I have tried to do the same with .bgwhite's background but a scroll bar is appearing, which is not what I want. Does anyone have any advice on how to achieve this without a scroll bar?
Here is my HTML structure:
<div class="container">
<header class="clearfix">
<div class="bgwhite"></div>
<div class="logo">
<img alt="logo" src="images/logo.png">
</div> <!-- end .logo -->
<div class="beside-logo">
<div class="white-spce"></div>
<div class="top-bar">
</div> <!-- end .top-bar -->
<div class="nav">
</div> <!-- end .nav -->
</div> <!-- end .beside-logo -->
</header>
</div> <!-- end .container -->
I'm sure we would have to see the CSS in order to answer to this, but I suppose you have a .css file linked to that .html document, am I right?
In this case, just set the background image to body and mess around with the properties available for the background attribute.
body {
background: url(images/yourbg.jpg) fixed center repeat-x;
}
And in case you mean to set a white background with a bit of transparency to it, so that the site's background is still coming up from back there, try this:
.nav {
background: rgba(255,255,255,0.5);
}
Hope this helps, it's what I understood from the question.
Related
I am using zurb foundation and I would like to make a web page that would have a structure and scroll effect like this one. I have an html structured like this:
<html lang="en">
<head>
...
</head>
<body>
<div class="off-canvas-wrapper">
<div class="off-canvas-wrapper-inner" data-off-canvas-wrapper>
<div class="off-canvas position-left" id="offCanvas" data-off-canvas>
...
</div>
<div class="off-canvas-content" data-off-canvas-content>
<div id="app">
<!-- should be below the screen height -->
<div id="drawer">
<div id="magazine-detail">
...
</div>
<div id="magazine-detail-carousel">
...
</div>
</div>
<!-- the background image of the main-section -->
<div id="bg">
</div>
<!-- should take up the screen on the page load and start going below drawer on scroll down, on the z-axis -->
<div id="main-section">
<!-- sticky fixed top-bar -->
<div id="top-bar">
...
</div>
<div id="header">
...
</div>
<div id="carousel">
...
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Since I need a zoom in effect on the background picture I have setup div #bg like this:
#bg {
background-image: url('/img/cover.png');
background-size: cover;
z-index: -1;
animation: zoom 10s;
height: 100vh;
width: 100vw;
position: static;
-webkit-animation-fill-mode: forwards;
}
#keyframes zoom {
0% { transform:scale(1,1); }
100% { transform:scale(1.1,1.1);}
}
Since I saw in the example web page, on inspect in chrome, that the main page content, which in my case will be #drawer, is pushed with margin-top down to the bottom of the screen, I tried with this:
#drawer {
margin-top: 100vh;
position: relative;
z-index: 5;
}
But that is obviously not good, since when I have it like that I can't see the content of the other divs that are above the #drawer, because the margin takes the space with its color. And the margin-top = 100vh doesn't work for one more reason, I can't use jQuery scrollTop, for the divs that are not visible.
As for the main section, which for me in this case is what the #front-slider is in the example page, it needs to be on top of the #bg div, so that the #bg divs background-image serves as the backround of the main-section. I had to make div #bg so that I could have zoomed in effect on the background image, without main-section being scaled as well, when the background image is being zoomed in.
And for the top-bar I just need to be at the top like a sticky top-bar all the time.
I am not sure how to position all that to get the same effect and structure of the page shown as an example, I have tried with every possible css positions but nothing worked.
Updated
I have managed to work it out by using this.
So I'm creating a parallax page and i did:
<section class="parallax">
<div class="parallax-inner">
<h2>Space</h2>
</div>
On the css then I put a background and some padding. But here's the problem: I created an h1:
<section class="parallaxtop">
<div class="parallax-inner-2">
<h1>Space</h1>
</div>
And I set the background bbut it doesn't appear!! I'm 100% sure that i put the right file and the right directory! And I did the same with the h2 div! What should i do?
.parallaxtop{
background: url("img/pattern.jpg");
}
there's a typo on .parallaxtop
you used color('') instead of url('')
should be:
.parallaxtop{
background: url("img/money.jpg");
}
Lots of answers of how nesting a container inside of a container-fluid is a bad idea. So without doing that, how do I make the background-color of my non-fluid rows take up the width of the entire screen?
You can see Bootstrap does this on thier own website with the purple but viewing the source was not helpful for me. Any ideas?
You can wrap your container in a another div and apply the background color to this parent div. Please see http://codepen.io/panchroma/pen/aNgvoJ
HTML
<div class="wrap">
<div class="container">
<div class="row">bootstrap row</div>
</div>
</div>
CSS
.wrap{
background-color:teal
}
Update
This is good but for alternating row background colours, one must use
wrap -> container -> row for each row?
If you need alternating rows each with full width background colours, it would be cleaner to use a container-fluid for your page, then use a nested container on each row: http://codepen.io/panchroma/pen/GZbqLV
<div class="container-fluid">
<div class="row one">
<div class="container">
<div class="row">one</div>
</div> <!-- end nested container -->
</div> <!-- end row -->
... <!-- repeat above for each row -->
</div> <!-- end parent container -->
CSS
.one{
background-color:pink:
}
something like this maybe
<style>
.cont {
background-color: yellow;
height: 20em;
width: 100%;
}
</style>
</head>
<body>
<div class="cont">
<!-- content -->
</div>
I have created this simple tribute page, with fixed background image.
I wanted to offset the container with the text content (I created a class just for it: .main-content) a bit down with a margin-top: 130px, so it's not glued to the very top of the page.
<body> <!-- applied background-image here -->
<div class="darken"> <!-- dark overlay on the background image -->
<div class="container-fluid">
<div class="container main-content"> <!-- .main-content - has margin-top: 130px; applied -->
<div class="row">
<div class="col-lg-offset-2 col-lg-10"> <!-- Bootstrap centering -->
<h1 class="display-1">St. Pope John Paul II</h1> <!-- just another text below... -->
<h2 class="display-4">Pope of the family</h2>
</div>
</div>
<div class="row">
<div class="col-....... <!-- rest of the text -->
However - a strange thing happened - the
.main-content {
margin-top: 130px;
}
margin seems to affect the body (according to Chrome DevTools...) thus eventually affecting (applying the margin-top to) the div with .darken class!
I want to achieve two things:
Having my text offset from the top of the page
Having .darken class applied to the full viewport
How can I achieve this?
CodePen link
Please try this:
Instead of margin use padding.
.main-content {
padding-top: 130px;
}
So i have an id of logo, and there is a logo image puted as background-image. I am making mobile webpage,so other divs are ignoring it and are in front of it.
html
<header id="header" class="calign group">
<a id="logo" class="png ru" href="http://www.web.ru/">Webname</a>
<!--other divs-->
</header>
css
#logo.ru {
background: url("images/logo.png") no-repeat scroll left top transparent;
I would suggest jquery, CSS sibling selectors are limited. It would be to easy for it to break because additional content was added to the page.
<header id="header" class="calign group">
<!--other divs-->
<a id="logo" class="png ru" href="http://www.web.ru/">Webname</a>
</header>
#header div:hover~a {
/* these rules apply on hover to the a element.
An a element that comes after this one, but not necessarily
immediately after. In other word #logo.ru */
}
And #logo would need to be positioned with CSS back to where you wanted it.