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;
}
Related
this is my code:
body{
background: url(https://static.pexels.com/photos/29628/pexels-photo.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.header{
height:2em;
width:100%;
position:fixed;
top:0; left:0;
background-color:white;
}
.main{
width:100%;height:10em;
margin-top:5em;
background-color:white;
}
.mainPanel{
width:50%;
margin:auto;
background-color:yellow;
height:5em;
}
<html>
<body>
<div class="header">
</div>
<div class="main">
<div class="mainPanel">
</div>
</div>
</body>
</html>
I want that the yellow div is transparent and shows the background image of body. That the yellow div go trough the white div behind it and shows the background image of body. Is that possible? I hope it comes clear what i meant.
The only workaround I can think of would involve breaking your white box into three rectangles and arranging them to form a window of sorts. Here, try this out:
body {
background: url(https://static.pexels.com/photos/29628/pexels-photo.jpg) no-repeat center center fixed;
background-size: cover;
}
.header {height:2em;width:100%;position:fixed;top:0; left:0;}
.main {
width: 100%;
height: 10em;
margin-top: 5em;
}
.mainPanel{
width:50%;
margin:auto;
height:5em;
}
<html>
<body>
<div id="left-rectangle" style="background-color: white; width: 25%;height: 160px; position: absolute;"></div>
<div class="right-rectangle" style="background-color: white; width: 25%; float: right; height: 160px;"></div>
<div class="center-rectangle" style="position: absolute;margin-left: 25%;background-color: white;width: 50%;height: 80px;margin-top: 80px;"></div>
<div class="header">
</div>
<div class="main">
</div>
</body>
</html>
You could simply repeat the background, and since it has a fixed position, it will be exactly like the body background and you will not notice a difference.
body, .mainPanel {
background: url(https://static.pexels.com/photos/29628/pexels-photo.jpg) no-repeat center center fixed;
background-size: cover;
}
Simply extend the background of body to .mainPanel to create the illusion.
Demo: jsFiddle
html, body {padding: 0; margin: 0;}
body, .mainPanel {
background: url(https://static.pexels.com/photos/29628/pexels-photo.jpg) no-repeat center center fixed;
background-size: cover;
}
.header {
height: 2em;
width: 100%;
position: fixed;
top: 0; left: 0;
background-color: #EEE;
}
.main {
width: 100%;
height: 10em;
margin-top: 5em;
background-color: white;
}
.mainPanel {
width: 50%;
margin: auto;
height: 5em;
border:1px dashed #CCC; /* just for demo */
}
<div class="header">header</div>
<div class="main">
<div class="mainPanel">
</div>
</div>
I have this vertically formed image that should reach to the bottom of the page. So basically its height should be 100% all the time. Then this same image should also be put at the center of the page, which is pretty simple to do, but what I'm struggling with is making a menu in the middle of the image (inside it).
What are the best ways to achieve that effect? I cannot provide any code try because I don't even know how to start. Help would be highly appreciated.
This is to demonstrate the problem:
Demo
html
<div class="menuOnImage">
<ul>
<li>Home</li>
<li>Works</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
css
.menuOnImage {
background: url('http://www.picturesnew.com/media/images/image-background.jpg') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-repeat: no-repeat;
position: absolute;
top:0;
bottom:0;
text-align: center;
width: 80%;
left:0;
right: 0;
margin: auto;
height: 100%;
}
ul {
display: inline-block;
position: absolute;
top:0;
bottom:0;
height: 110px;
left:0;
right: 0;
margin: auto;
width: 60%;
border: 5px solid #fff;
list-style: none;
padding:0;
border-radius: 5px;
padding: 5px;
background: rgba(0,0,0,0.4);
}
li {
border: 2px solid #aaa;
margin: 2px;
background: rgba(0,0,0,0.4);
color: #fff;
}
body, html {
height: 100%;
margin:0;
padding:0;
}
HTML:
<div id="largeImage">
<div id="menu">Menu Here</div>
</div>
CSS:
html, body { width: 100%; height: 100%; }
#largeImage {
background: url('path/to/image.jpg');
background-size: cover;
width: 100%;
height: 100%;
}
#menu {
width: 500px;
margin: 0 auto;
}
This should give you the basis of what to do :) Basically the code above is to create a div that is 100% width and height, and then position a menu that is 500px in the middle of that div
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;
I am making a page whose layout is divided into 3 sections : Header, main body, and footer. I want a background image in my main body. Now when i try to do that, i am experiencing a problem. The image is not covering the complete area. It leaves some area at the bottom. Check this fiddle for proper explanation.
Here is what i have done so far:
HTML
<html>
<head>
<title>Gehri Route: Login, Signup</title>
</head>
<body>
<div class='headercontainer'>
<div class='header'>
header
</div>
</div>
<div class='mainbodycontainer'>
</div>
<div class = 'footercontainer'>
<div class='footer'>
footer
</div>
</div>
</body>
</html>
CSS
body
{
background-color: rgb(250,250,250);
margin: 0;
padding: 0;
}
.headercontainer
{
background-color: rgb(245,245,245);
min-width: 999px;
height:60px;
border:1px solid #666;
left: 0;
}
.mainbodycontainer
{
margin: 0 auto;
overflow: auto;
background-color: rgb(250,250,250);
min-width: 999px;
padding: 80px 0;
background: url("http://images.nationalgeographic.com/wpf/media-live/photos/000/107/cache/california-profile_10719_600x450.jpg?01AD=3Eg20HvemHwApI8-INwZvViX_nk9hW8HJTh_oBQchW4pJwAzYLvxz9w&01RI=A8733DF327AC3E9&01NA=na") no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.footercontainer
{
background-color: rgb(245,245,245);
width: 100%;
height:82px;
border: 1px solid #666;
left:0;
position: fixed;
bottom: 0;
}
.header
{
margin: 0px auto;
width: 999px;
}
.mainbody
{
margin: 0px auto;
width: 999px;
}
Also please help me to make this responsive design.
You need to force a height to the body and html tag of 100%. If there is no content the background won't appear because the height of the element (.mainbodycontainer) is 0. In your case it was 80px because you applied padding.
check this fiddle. http://jsfiddle.net/olwez/ncLZN/
I added a height to the body and html tags of 100% and a minimum height of 100% to the .mainbodycontainer div. That way you don't have to manually set the heights or have content within the .mainbodycontainer for the image to behave as you wish.
I just threw in an overflow: hidden; on the body tag so that scrolling is gone.
Here is the full css.
html { height: 100% }
body
{
background-color: rgb(250,250,250);
margin: 0;
padding: 0;
height: 100%;
overflow: hidden;
}
.headercontainer
{
background-color: rgb(245,245,245);
min-width: 999px;
height:60px;
border:1px solid #666;
left: 0;
}
.mainbodycontainer
{
margin: 0 auto;
overflow: auto;
background-color: rgb(250,250,250);
min-width: 999px;
min-height: 100%;
background: url("http://images.nationalgeographic.com/wpf/media-live/photos/000/107/cache/california-profile_10719_600x450.jpg?01AD=3Eg20HvemHwApI8-INwZvViX_nk9hW8HJTh_oBQchW4pJwAzYLvxz9w&01RI=A8733DF327AC3E9&01NA=na") no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.footercontainer
{
background-color: rgb(245,245,245);
width: 100%;
height:82px;
border: 1px solid #666;
left:0;
position: fixed;
bottom: 0;
}
.header
{
margin: 0px auto;
width: 999px;
}
.mainbody
{
margin: 0px auto;
width: 999px;
}
add this to your style:
width:600px;
height:450px;
.mainbodycontainer
{
margin: 0 auto;
overflow: auto;
background-color: rgb(250,250,250);
min-width: 999px;
padding: 80px 0;
background: url("http://images.nationalgeographic.com/wpf/media-live/photos/000/107/cache/california-profile_10719_600x450.jpg?01AD=3Eg20HvemHwApI8-INwZvViX_nk9hW8HJTh_oBQchW4pJwAzYLvxz9w&01RI=A8733DF327AC3E9&01NA=na") no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
width:600px;
height:450px;
}
http://jsfiddle.net/QcUfm/9/
A background image will only show as much is revealed either by the content or a height. If your div doesn't have enough content to force the parent element big enough, you won't see it all. Also, if you are using any type of positioning like fixed, absolute or even relative and moving it, that can affect it also. I didn't look at the fiddle but those are some common issues.
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/