I have a container and i have two sections that i want to display one at a time. something like a scrolling webpage like This!
Basically how do i make the first div element (section) have its own background that fits to screen and the second section should have just a blank screen. Thank you very much ! please examples will be gladly appreciated :)
This is my css:
* {
box-sizing: border-box;
/* look this up */
}
body {
margin: 0;
}
/* style what the sections have in common */
.container {
width: 100%;
float: left;
top: 0px;
left: 0px;
text-align: center;
padding: 1em;
}
.about {
float:left;
height:auto;
width:100%;
background: url(10.jpg);
background-repeat: no-repeat;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size:100%;
}
/* target specific sections */
.heads {
background-color: red;
float:left;
height:auto;
width:100%;
}
This is my Html:
<body>
<section class="container about">
About
</section>
<section class="container heads">
About
</section>
</body>
.container{
width: 100%;
float: left;
text-align: center;
padding: 1em;
background-position: center;
height: 100%;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size:100%;
}
.about{
background: url(10.jpg);
}
.heads{
background-color: red;
}
You should set your body and HTML height to 100%:
body, html {
height: 100%;
margin: 0;
}
Then change your .about to:
.about {
float:left;
height:100%;
width:100%;
...}
NOTE: If this is what you were looking for please remember to mark it as correct.
add this in your .about class
background-size:100% 500px;
Related
What I need (and failed) to do is website like in this picture:
Website need to be full screen and no scroll.
I'm not satisfied with results, because:
-when website is opened on vertical screens (smartphones) the bottom border is too big
-I also tried to make this background image to show fully top and bottom (I want to faces at top and bottom to be seen in full, not just partly), but I don't really know how to do it.
My CSS code:
html
{
background: #f36d32;
width: 98%;
height: 95.9%;
padding: 1%;
}
body
{
background: url(http://web-industry.eu/landing/img/bg.png) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
width: 100%;
height: 100%;
}
Ok, the border problem is solved by #imGaurav with such a code:
body {
background: url('http://web-industry.eu/landing/img/bg.png') no-repeat;
background-size: 100% 100%;
width: 100vw;
height: 100vh;
box-sizing: border-box;
border: #f36d32 3px solid;
padding: 0;
margin: 0;
}
<body></body>
But I still can't figure out how to make both top and bottom faces to be visible.
body {
background: url('http://web-industry.eu/landing/img/bg.png') no-repeat;
background-size: 100% 100%;
width: 100vw;
height: 100vh;
box-sizing: border-box;
border: #f36d32 3px solid;
padding: 0;
margin: 0;
}
<body></body>
So you just want the full size image to scale with different with different screen sizes?
In your css on the image div try:
background-size: contain;
If that is not what you are after, here is a link to all the property values you can use and test out.
http://www.w3schools.com/cssref/css3_pr_background-size.asp
Add below CSS to your HTML body
position: absolute;left: 0;top: 0;
Did you mean somethink like that?
<div class="vertical-container">
<div class="vertical-middle">
<img src="http://www.susansolovic.com/blog/wp-content/uploads/2014/04/instagram-logo-md-300x300.png">
</div>
</div>
html,body {
height: 100%;
}
img {
max-width: 100%;
max-height: 100%;
}
.vertical-container {
background-color: green;
display: table;
height: 100%;
width: 100%;
text-align: center;
}
.vertical-middle {
height: 100%;
vertical-align: middle;
display: table-cell;
}
https://jsfiddle.net/org72bfb/1/
You can use the following css to solve the problem. Reference CSS-trick
html {
background: url(http://i.stack.imgur.com/zRKcX.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
I am new to HTML/CSS.
I am building a simple webpage, but whenever I minimize the window, the background color minimizes with it. So when I scroll to the right, the background is blank.
HTML:
#body{
width:100%;
overflow:scroll;
/*overflow-x:scroll;*/
/*position:relative;*/
}
.container {
padding:20px 70px;
width:1000px;
position:absolute;
}
div.top {
background-color: #6495ed;
width:100%;
height:400px;
margin:0;
}
div.top_text {
padding:25px;
margin:35px;
float:left;
display:inline-block;
width:550px;
}
div.top_form {
border : 2px solid;
border-radius:20px;
padding:15px;
/*float:left;*/
display:inline-block;
width:auto;
background-color:#00edca;
}
<body id="body">
<div class="top" align="center">
<div class="container" align="center">
<div class="top_text">
<p id="intro">The Best <b>Pest Control Services</b></p>
</div>
<div class="top_form">
<!--some content-->
</div>
</div>
</div>
</body>
Thank you for your help!!
background-size: cover (or background-size: 100% 100%) can be used on body or another element to have the background image or color cover the whole element.
MDN example
and if you don't want the size of elements to change when you change the window size, don't use % sizes, but fixed units sizes.
HTML
html {
background: url(images/bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
body{
margin: 0;
padding: 0;
}
.container {
padding: 20px 70px;
width: 1000px;
margin: 0 auto;
}
div.top {
background-color: #6495ed;
width: 1000px;
height: 400px;
margin: 0 auto;
}
div.top_text {
padding: 25px;
margin: 35px;
float :left;
display: inline-block;
width: 550px;
}
I am beating my head against a wall on this one. I am trying to design a landing page, with a full screen picture background, that stops at the footer. So essentially I believe my trouble lies in creating a sticky footer..
I have been following the tutorial at this website.
Here is my HTML:
<!DOCTYPE html>
<html>
<head>
<code omitted>
</head>
<body>
<div id="wrapper">
<div id="bkgcontainer"></div>
<div class="push"></div>
</div>
<footer>
<address>
<code omitted>
</address>
</footer>
</body>
</html>
My CSS:
* {
margin: 0;
}
html, body{
height: 100%;
background-color: black;
}
#wrapper {
width: 100%;
position: relative;
min-height: 100%;
margin: 0px auto -25px;
}
footer, .push {
height: 25px;
}
#bkgcontainer {
width: 100%;
height: 100%;
position: relative;
margin: 0 auto -25px;
background: url(images/bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
display: block;
}
footer{
text-align: center;
margin: 0px auto;
color: white;
position: relative;
}
As far as I can tell, I have everything set right. But when I launch the website, 'bkgcontainer' takes up the full screen and the bottom margin '-25' is below the view-port. I'm at a loss, any ideas? Fixes or better ways, I'm all ears.
You can make the picture background take up 90% of the screen height, make the footer 10%, and pin the footer to the bottom of the page:
//remove `footer`
.push {
height: 25px;
}
//set height to 90%;
#bkgcontainer {
width: 100%;
height: 90%;
position: relative;
margin: 0 auto -25px;
background: url(images/bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
display: block;
}
//change height to 10%, change to fixed position, and set bottom to 0. Oh, set width, too.
footer{
height: 10%;
text-align: center;
margin: 0px auto;
background-color: white;
position: fixed;
bottom:0;
width:100%;
}
See this jsfiddle to see how it looks.
Here's a completely different solution. Note that it doesn't contain a modification of your code, however, it is an entirely different solution (out of several solutions) to get a header and a footer
HTML:
<header>
this is header
</header>
<div id="content">
hello
</div>
<footer>
this is footer
</footer>
CSS:
html, body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
header {
width: 100%;
height: 60px;
background: green;
position: fixed;
top: 0;
}
#content {
width: 100%;
height: 100%;
background-image: url("http://cdn.wonderfulengineering.com/wp-content/uploads/2014/07/Beautiful-Wallpapers-7.jpg");
background-size: 100%;
}
footer {
width: 100%;
height: 60px;
background: blue;
position: fixed;
bottom: 0;
}
Here's the fiddle: http://jsfiddle.net/harshulpandav/7S4Xx/214/
You can try a position:fixed for footer class
footer{
text-align: center;
margin: 0px auto;
color: white;
position: fixed;
bottom:0;
width:100%
}
You should change the min-height value on the #wrapper to either a smaller percentage value or a minimum pixel value to allow for the footer to display. What you have done is tell the browser that you want that div to extend no less than the full screen.
EDIT:
Okay, let me simplify this because I'm obviously explaining it horrendously.
Here is a fiddle: http://jsfiddle.net/ZaSM3/2/
And here is the code:
<html>
<head>
<style>
* {
margin: 0;
}
html, body {
height: 100%;
}
#coverPhoto {
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-attachment: fixed;
background-image: url(http://i.imgur.com/of5DkaT.jpg);
background-repeat: no-repeat;
background-position: center center;
height: 100%;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -4em;
}
.push {
height: 4em;
}
.footer {
height: 4em;
background-color: rgba(0,0,0,0.5);
}
</style>
</head>
<body>
<div id="coverPhoto">
<div class="wrapper">
<p>This is my content.</p>
<div class="push"></div>
</div>
</div>
<div class="footer">
<p>Footer is NOT overlayed over the image</p>
</div>
</body>
Please note that the footer is at the bottom of the page, solving the problem, but it is NOT overlayed over the cover photo. I need it to be appear over the cover photo.
I don't agree with being marked down when i did answer based upon the limited information provided.
However, the link you posted me to seemed to work fine. But there is a cleaner solution with less markup you could consider.
http://jsfiddle.net/ZaSM3/3/
HTML:
<div class="page-wrap">
<div id="content">
<p>This is my content.</p>
</div>
</div>
<div class="site-footer">
<p>Footer IS overlayed over the image</p>
</div>
CSS:
* {
margin: 0;
padding: 0;
}
html, body {
height: 100%;
}
html{
background: url(http://i.imgur.com/fJYziTr.jpg) no-repeat 0 0 fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
body {
width: 100%;
height: 100%;
font-family: Tahoma, Geneva, Arial;
font-size: 14px;
}
#content {
width: 1000px;
height: 500px;
margin: auto;
background-color: #000;
background-color: rgba(0,0,0,0.75);
color: #FFF;
text-align: justify;
}
.page-wrap {
min-height: 100%;
/* equal to footer height */
margin-bottom: -142px;
}
.page-wrap:after {
content: "";
display: block;
}
.site-footer, .page-wrap:after {
/* .push must be the same height as footer */
height: 142px;
}
.site-footer {
background: orange;
z-index: 999;
height: 142px;
}
I suggest using the footer tag (). This is part of the new HTML5 specification and is much clearer.
HTML:
<footer><!--Insert whatever you need here--></footer>
CSS:
footer {
position:fixed;
bottom:0;
opacity:0.5;
}
You can change the opacity to your needs. 1 is 100% and 0.5 50%. Tht'll give you an idea. Hope it helped.
I'm fighting currently with a centered wrapper (centered with margin 0 auto). now i want to have a container beginning at the left until the centered wrapper begins. Is that possible at all with this given margin spec?
I would really appreciate some hints!
see also the fiddle:
http://jsfiddle.net/TQhEa/1/
What i have now:
What I want to have:
My code:
<body>
<div id="page-wrapper">
<p><---- how can i cover the left side only with red without javascript but keeping the "0 auto margin?"
</div>
</body>
my CSS:
body, html{
width:100%;
height:100%;
top:0;
margin:0;
background-image: url('http://www.art-wallpaper.net/Full-Size-HD-Wallpaper29/images/HD%20Widescreen%20Wallpaper%2059.jpg');
background-repeat:no-repeat;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
#page-wrapper{
background-color:red;
margin: 0 auto;
width: 400px;
top:0;
margin-top:0;
height:100%;
}
p {
padding:0;
margin:0;
font-size:30px;
}
}
The easiest way would be to set the background-color and position of background-image. Check out this piece of code:
html
<div id="page-wrapper">content</div>
css
body {
margin: 0;
background: #c11 url(http://placekitten.com/1000/1000) 100% 0 no-repeat;
}
#page-wrapper {
width: 400px;
height: 1000px;
background: #ccc;
margin: 0 auto;
}
Add 1 more DIV with the following CSS :
#left_div {
position: absolute;
left: 0;
top: 0;
width: 50%;
height: 100%;
background-color: #F00;
display: table; /* note IE5-7 does not support this */
z-index: 1;
}
and modify the current centered DIV $('#page-wrapper') to have higher z-index value
Add an extra div with the property's position: absolute; width: 50%; height: 100%; and z-index: -1;
See: http://jsfiddle.net/skeurentjes/TQhEa/3/