I want to make a website where when it loads, there is a full screen image, and when you scroll down it has a white background which includes all of my about and contact information. How can I do it? I made a div called "top-background" which includes the source to the image, and in the css i used
z-index: -100;
height: 30%;
width: 100%;
top: 0%;
But it doesn't fullscreen or do what i want it to do.
You can do it like below
body {
margin: 0;
}
.bgone {
position:absolute;
width: 100%;
height: 100%;
background: blue;
background-image: url('yourimagehere.png');
background-size: cover;
color: white;
}
.bgtwo {
position: absolute;
width: 100%;
top: 100%;
height: 100px;
}
<div class='bgone'>On page load content</div>
<div class='bgtwo'>Scrolled content</div>
You can achieve this by creating two div's and making their height 100vh which stands for 100% of view height.
.background-1 {
background: blue;
height: 100vh;
}
.background-2 {
background: white;
height: 100vh;
}
<div class="background-1"></div>
<div class="background-2"></div>
Related
About Us and Contact Us are my two sections. The contact us section's background property is working well. However, I now want to add a background picture to both divs' parent wrappers. Therefore, the background image may be seen above both divs. I am unable to identify the issue that is preventing me from displaying the background image.
index.html:
<div class="aboutus-contact-us-wrapper" >
<div class="about-us-section">
// content here
</div>
<div class="contact-us">
// content here
</div>
</div>
style.css:
.aboutus-contact-us-wrapper {
width: 100%;
position: relative;
background-image: url('./images/ourboardvector.png');
background-size: 100%;
background-position: right;
background-size: contain;
}
.contact-us {
width: 100%;
height: 100vh;
background-color: #181f2b;
position: relative;
border-bottom: 20px;
color: #ffffff;
position: relative;
}
.about-us-section {
position: relative;
width: 100%;
height: 100vh;
background-color: #F1F1F1;
font-family: 'Lato' !important;
}
Set z-index of both child divs to -1.
Z Index ( z-index ) is a CSS property that defines the order of overlapping HTML elements. Elements with a higher index will be placed on top of elements with a lower index. Note: Z index only works on positioned elements ( position:absolute , position:relative , or position:fixed )
.aboutus-contact-us-wrapper {
width: 100%;
position: relative;
background-image: url('./images/ourboardvector.png');
background-size: 100%;
background-position: right;
background-size: contain;
}
.contact-us {
width: 100%;
height: 100vh;
background-color: #181f2b;
position: relative;
border-bottom: 20px;
color: #ffffff;
position: relative;
z-index: -1;
}
.about-us-section {
position: relative;
width: 100%;
height: 100vh;
background-color: #F1F1F1;
font-family: 'Lato' !important;
z-index: -1;
}
<div class="aboutus-contact-us-wrapper">
<div class="about-us-section">
// content here
</div>
<div class="contact-us">
// content here
</div>
</div>
I want my background image to cove the entire div but instead there are a lot of white space
HTML
<div class="backgroundsecction">
<div class="backgroundimg"></div>
</div>
CSS
.backgroundimg{
background-image: url(https://i.imgur.com/MAdBtV4.png);
height: 100%;
width: 100%;
background-repeat: no-repeat;
position: relative;
}
.backgroundsecction{
height: 900px;
width: 100%;
}
Please use background-size:cover
.backgroundimg{
background-image: url(https://i.imgur.com/MAdBtV4.png);
height: 100%;
width: 100%;
background-repeat: no-repeat;
position: relative;
background-size:cover;
}
.backgroundsecction{
height: 900px;
width: 100%;
}
<div class="backgroundsecction">
<div class="backgroundimg"></div>
</div>
If the white border bothers you around the background, use something like this:
.backgroundimg {
background-image: url(https://i.imgur.com/MAdBtV4.png);
height: 100%;
width: 100%;
background-repeat: no-repeat;
position: relative;
}
.backgroundsecction {
height: 900px;
width: 100%;
}
body {
margin: 0;
}
<div class="backgroundsecction">
<div class="backgroundimg"></div>
</div>
If the image is smaller than the screen, than use larger image. it is generally good practice to prepare that some people could have very very large resolution displays...
Or scale it up, like #ankitapatel mentioned: with background-size:cover;.
Use 2 things as suggested
body {
margin : 0px; //add this
}
.backgroundimg {
background-image: url(https://i.imgur.com/MAdBtV4.png);
height: 100%;
width: 100%;
background-repeat: no-repeat;
position: fixed; //change fixed to cover entire
}
.backgroundsecction{
height: 900px;
width: 100%;
}
<div class="backgroundsecction">
<div class="backgroundimg"></div>
</div>
I am attempting to make the background div actually 100% with other movable/floating divs that are positioned absolutely.
Width 100% is not accounting for the .floater div being far off the screen. (which the browser shows with scrollbars).
live example of problem: https://jsfiddle.net/h0arax9o/2/
Scroll to the right of the preview.
I would like the purple background to cover the entire document.
html:
<div class="background"></div>
<div class="floater"></div>
css:
.background {
background: purple;
width: 100%;
height: 100%;
position: absolute;
}
.floater {
background: red;
width: 200px;
height: 200px;
left: 1400px;
position: absolute;
}
Edit: for clarity, I would like the background to 'stretch' across the entire page, for example, if it was an image, when you scrolled in the example, the image would scroll as well.
I updated the example to showcase that.
.background {
background: purple;
width: 100%;
height: 100%;
position: fixed;
}
.floater {
background: red;
width: 200px;
height: 200px;
left: 1400px;
position: absolute;
}
<div class="background"></div>
<div class="floater"></div>
.background {
background: purple;
top: 0; right: 0; bottom: 0; left: 0;
position: fixed;
}
.floater {
background: red;
width: 200px;
height: 200px;
left: 1400px;
position: absolute;
}
enter link description here
You need to use a css reset: http://meyerweb.com/eric/tools/css/reset/
If you click on the gear icon on the top right of the css part of jsfiddle you can choose to normalize css. Here's a forked jsfiddle where I did that: https://jsfiddle.net/ckkoq3pn/
_
Issue: I am trying to make a layout with a fixed header for nag and below that will be an image that will fit the page. below that I want divs for content. the problem I am facing is that I cannot get both the image and the content divs to fit the screen and stack vertically.
The IMG is set to absolute because its the only way I could get it to 100% fit the screen without adjusting the margins. however when I do this the divs below that I am going to use for content: .body2 and .body3 do not show.
I want to get everything flush with the screen of the browser and stacked properly.
HTML:
<header>
<div id="headernav">
</div>
</header>
<div id="FixedBKG">
<img src="Images/imgbkg.JPG" id="bkgimg"/>
<div id="content">
<div class="body2">
</div>
</div>
<div id="content">
<div class="body3">
</div>
</div>
</div>
</body>
CSS:
#headernav {
height: 70px;
top: -10px;
left: 0px;
width: 100%;
background-color: black;
position: fixed;
z-index: 10;
color: white;
margin:0px auto;
}
#FixedBKG {
width: 100%;
height: 100%;
}
#bkgimg {
width: 100%;
left: 0px;
top: 0px;
position: absolute;
}
.body2 {
background-color: #C0C0C0;
height: 400px;
width: 100%;
left: 0px;
right: 0px;
display: block;
}
.body3 {
background-color: black;
height: 400px;
width: 100%;
left: 0px;
right: 0px;
display: block;
}
Ok, here's a second draft: FIDDLE.
General comments:
1.Try not to use positioning on a straight-forward layout like this one.
I changed the image to display: block and made it 100% of the div width - it will then adjust itself to the container, and you can
then adjust the container as you wish.
I changed the heights of the two lower divs and added a border so you could see them easier in the fiddle.
You really don't need the 100% widths, since divs are 100% by definition.
You might consider styling the body, and add a container element to give you more flexibility on formatting.
Let me know if you'd like to change anything else.
CSS
img {
display: block;
width: 100%;
}
#headernav {
height: 70px;
line-height: 70px;
text-align: center;
width: 100%;
background-color: black;
color: white;
}
#FixedBKG {
width: 100%;
}
.body2 {
background-color: #C0C0C0;
height: 200px;
width: 100%;
border: 1px solid red;
}
.body3 {
background-color: black;
height: 200px;
width: 100%;
border: 1px solid yellow;
}
I'm trying to create something like this:
http://jsfiddle.net/S6FUQ/
HTML is:
<div id="container">
<header></header>
<main>
<section class="half"></section>
<section class="half"></section>
</main>
</div>
And CSS is:
* {
margin: 0; padding: 0;
}
html, body, #container {
height: 100%;
}
header {
height: 50px;
background: gray;
}
main {
height: 100%;
background: green;
}
.half {
height: 50%;
}
.half:first-child {
background: blue;
}
.half:last-child {
background: yellow;
}
In it, I have a thin ribbon at the top, and I want to divide the rest of the screen into two equal sections, but I don't want vertical scrollbar to appear.
I tried margin-bottom: 50px; for main, but it didn't work. What should I do?
Height of "main" should be 100% - 50px. Here is the fiddle.
main{height: calc(100% - 50px);}
To make it work on old browsers, you could use absolute positioning.
Demo
#container {
position: relative;
}
main {
position: absolute;
width: 100%;
top: 50px;
bottom: 0;
background: green;
}
You are already using % to set height... Why don't you use it again to solve your problem?
header {
height: 10%;
background: gray;
max-height:50px; //this will ensure your header will never go bigger than 50px
}
main {
height: 90%;
background: green;
}
PS: The only time your header is going to be smaller than 50px is when the browser is smaller than 500px (which will be only in some landscape mobile devices)
EXAMPLE