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 .... */
}
Related
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>
I am attempting to write a simple 404 (Page not Found) error page for my website: bazingamanphdgaming.t15.org. This is my code so far:
<html>
<head>
<title>404 - Not found</title>
<style>
#title {
position:fixed;
top:40%;
color:white;
font-size:40px;
text-align:center;
width:100%
}
#link {
position:fixed;
top:45%;
font-size:20px;
text-align:center;
width:100%
}
</style>
</head>
<body style="background-color:black">
<div id="title"><b>404 - Page not found</b></div>
<div id="link"><br />
<a style="color:white" href="http://bazingamanphdgaming.t15.org">
Return to the BazingaManPHD Gaming home page.
</a>
</div>
</body>
</html>
However when I reduce the browser window's width the bold text in the #title goes over the link going back to the homepage. This is a screenshot:
Of course to fix this problem I would need to put a min-width property on the #title like so:
<div id="title" style="min-width:200px"><b>404 - Page not found</b></div>
I am using 200px as an example there, but it doesn't seen to work, whatever size I put it as. Any help would be appreciated.
Simply add this to your CSS:
#title {
white-space: nowrap;
/* rest of your styles */
}
This will prevent the text in #title from wrapping.
You could enable vertical align by setting display:table and display:table-cell to the containers.
html,body{
width:100%;
height:100%;
}
body{display:table}
.page {
background:black;
display:table-cell;
vertical-align:middle;
text-align:center;
width:100%;
height:100%;
}
.title {
color:white;
font-size:40px;
}
.link {
font-size:20px;
color:white;
}
<div class="page">
<div class="title">404 - Page not found</div>
<a class="link" href="http://bazingamanphdgaming.t15.org">Return to the BazingaManPHD Gaming home page.</a>
</div>
This way it will center whatever you put into it.
Demo at http://jsfiddle.net/gaby/f6c1wupL/1/
here is a fiddle to take a look.
Basically there were a couple problems in your css.
Setting the position of elements to fixed takes them out of the natural flow.
If your thinking about the page as a piece of paper these fixed elements are floating above the paper wherever you place them.
By putting them relative you are putting them onto the piece of paper so the position of other elements can have an effect on their position. i.e bumping them out of the way.
by marking them relative the 'top' selector no longer works instead to move the items down the page give them a margin-top to offset them from the the bounds of the body(it's parent element).
#title {
position:relative;
margin-top:40%;
color:white;
font-size:40px;
text-align:center;
width:100%;
http://jsfiddle.net/crnc6ht5/
I have a three-parts layout: header, content and footer. I am very well familiar with the absolute positioning technique; I use it a lot when I want the content div to extend to 100% of available height.
In this case, my problem is that I don't know in advance the height of the footer, it is dynamic based on its own content, which has an unknown number of lines (typically between 1 to 3 lines).
I want the main content div to grab 100% of available height, after accounting for the height of the header (which is fixed, so it's a no-brainer) and for the height of the footer therefore I can't use absolute positioning technique here.
I have a solution with involves javascript, but I am trying to find a css-only solution. Ideally, it should be a cross-browser solution (IE8, IE9, chrome, firefox and Safari).
Try this
<!doctype html>
<html>
<body>
<style>
html,
body {
margin:0;
padding:0;
height:100%;
}
#container {
min-height:100%;
position:relative;
}
#header {
background:#ff0;
padding:10px;
}
#body {
padding:10px;
}
#footer {
position:absolute;
bottom:0;
width:100%;
background:#6cf;
}
</style>
<div id="container">
<div id="header">header</div>
<div id="body">body</div>
<div id="footer">footer</div>
</div>
</body>
</html>
I am completely new to html and css so my question could be very basic but hope you guys can help me udnerstnad,
I am using following css code
body
{
background-color:Olive;
width:550px;
font-family:Verdana;
}
I am setting width to 550px and as a result all my paragraphs contract to 550px but the background is applied to the whole page even beyond the 550px
I understand that because of inheritance the child elements would have inherited the width property from body, but I was thinking that if I set width property of body to 550px then background should be visible in 550px wide area and not the full page,
I don't get the logic here..
If you apply a color to the html, for example html { background-color: yellow; }, you'll see this is not the case at all. The <body> tag is special in that it is intended to encompass the entire contents of the HTML page. When you apply a background, then, the default is for it to paint the entire background page, unless htmls background has otherwise been set.
See this jsfiddle example. Like the other posters above, I highly recommend using a <div> element to wrap, size, and color your content.
This is described in the CSS2 specifications as so:
The background of the root element becomes the background of the canvas and covers the entire canvas, anchored (for 'background-position') at the same point as it would be if it was painted only for the root element itself. The root element does not paint this background again.
Why not wrap your content in a div, and set the properties to that?
<body>
<div class="content">
... content here
</div>
</body>
and apply the same classes to the div
.content
{
background-color:Olive;
width:550px;
font-family:Verdana;
}
You can use a container div that wraps your whole page and acts like a "fake" body. Then if you apply these style to this div your problem will be solved.
css
#wrapper {
width: 550px;
margin: 0 auto;
text-align: left;
}
HTML:
<body>
<div id="wrapper">
Piece of text inside a 550px width div centered on the page
</div>
</body>
You should try this http://jsfiddle.net/ajaypatel_aj/8tfKc/
HTML
<div id="wrapper">Test me!</div>
CSS
*{
margin:0;
padding:0;
}
body{
text-align:center; /*For IE6 Shenanigans*/
font-family:Verdana;
}
#wrapper{
width:550px;
margin:0 auto;
text-align:left;
background-color:Olive;
}
Answer is simple applied body color will set to whole page you must have to use div .
This is what you are looking for.
<html>
<head>
<title>
Your title goes here.
</title>
</head>
<style type="text/css">
#test
{
background-color:Olive;
width:550px;
font-family:Verdana;
}
</style>
<body>
<div id='test'>
Hello
</div>
</body>
Another answer is:
<html>
<head>
<title>
Your title goes here.
</title>
</head>
<style type="text/css">
html
{
background-color:white;
}
body
{
background-color:Olive;
width:550px;
font-family:Verdana;
}
</style>
<body>
Hello
</body>
</html>
Im not too great at CSS but hopefully someone on here can help. I have the following mockup. (i have stripped out my content to make it easy to view)
<body>
<div id="container">
<div id="header"></div>
<div id="body">
<div id="navBar"></div>
<div id="mainContent"></div>
</div>
<div id="footer"></div>
</div>
</body>
my CSS is as follows:
html,
body {
margin:0;
padding:0;
height:100%;
}
#container {
min-height:100%;
position:relative;
}
#header {
background:#ff0;
padding:10px;
}
#body {
padding:10px;
padding-bottom:60px; /* Height of the footer */
}
#footer {
position:absolute;
bottom:0;
width:100%;
height:60px; /* Height of the footer */
background:#6cf;
}
now im unsure as to how to get the "navBar" to be the page height. I've tried adding height: 100% but that doesnt work.
Thanks,
Matt
Giving an element height: 100% will give it a height equal to that of its containing element, which in your case is #body. Since body in your example is only as big as it needs to be to hold its content, #navBar will be 100% of that height.
To fix this, you can make #container and #body height:100% to make them as tall as tho body tag, which takes up the whole page:
#container {
height:100%
}
#body{
height:100%;
}
In the interest of completeness, you could also set the top and bottom of #navBar:
position: absolute;
top: 20px;
bottom: 60px; /* height of footer */
To understand the difference, play around with This JS Fiddle. Mess around with the height and top, bottom, position properties to see how your changes affect the layout; just don't use both positioning methods at once!
Your issue appears to be that each parent DIV all the way up to the BODY tag must explicitely have a height of 100% for #navBar to have 100% height. This means you would also have to set the height of #body to 100% as well, since it is the parent container of #navBar.
Have a look at this site - I assume you want a two column layout - this site will show you how to do what you want. Hope it helps.