I am trying to add a background to my webpage by using a cascading style sheet in Dream Weaver CS5. I was fortunate enough to find this code:
html, body {height: 100%; width: 100%; padding: 0; margin: 0;}
#full-screen-background-image {z-index: -999; min-height: 100%; min-width: 1024px; width: 100%; height: auto; position: fixed; top: 0; left: 0;}
#wrapper {position: relative; width: 800px; min-height: 400px; margin: 100px auto; color: #333;}
Which is added to the style sheet, and this bit:
<body>
<img alt="full screen background image" src="/background.jpg" id="full-screen-background-image" />
<div id="wrapper">
<p>Content goes here...</p>
</div>
</body>
which is added to the HTML.
However whenever I try to add another element to the page, such as an image or text, the image appears directly below the background which I have set as if the code in the style sheet does not set a background at all.
Could someone possibly tell me what I could be doing wrong?
I think it's actually working fine because position:fixed; pulls the image out of the flow of the page. I think your culprit is actually the margin: 100px auto; rule on #wrapper.
I played with your CSS a bit and cleaned it up. Is this the desired outcome?
See on jsFiddle
html,
body {
height: 100%;
width: 100%;
padding: 0;
margin: 0;
}
#full-screen-background-image {
z-index: -999;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color:#F00;
}
#wrapper {
position: relative;
width: 800px;
/*margin: 100px auto; */
color: #333;
}
Alternatively if you don't need background scaling/stretching, you can use this:
body {
background-image: url(/background.jpg);
}
Related
I have seen some web design lessons that always start with a css like this:
body,html {
display: block;
width: 100%;
height: 100%;
padding: 0;
margin: 0;
}
I'm trying to figure out what's the point of declaring attributes like width, height or display for body and html that are, if I'm not wrong, by default in browsers.
I thought it would be to prevent and undefined return or similar when accessing the css with js, but the result is the same when the attributes are defined in the css than when left to default:
console.log($("BODY").css('width')); // Always returns the width of the body
I also thought it could be to start the inheritance in cascade elements, but a div inside the body inherits the value just the same.
Anybody knows a solid reason for this approach? any browser / device issue I have missed? future compatibility? plain pedantry?
I'm kind of curious about it.
I found a good reason to define the html and body width and height to 100%. Say you want to vertically align a relative positioned div, you need to put it into an absolute positioned container:
html,
body {
margin: 0;
padding: 0;
}
#container {
position: absolute;
width: 100%;
height: 100%;
}
#main {
background: lightgrey;
position: relative;
top: 50%;
transform: translateY(-50%);
width: 100px;
height: 100px;
text-align: center;
margin-left: auto;
margin-right: auto;
}
<div id="container">
<div id="main">
<h1>MY DIV</h1>
</div>
</div>
But, setting the body width and height to 100% you get an absolute positioned container that covers the whole window:
html,
body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
#main {
background: lightgrey;
position: relative;
top: 50%;
transform: translateY(-50%);
width: 100px;
height: 100px;
text-align: center;
margin-left: auto;
margin-right: auto;
}
<div id="main">
<h1>MY DIV</h1>
</div>
You get the same result, but it saves you a div element.
I need the div to be in the center of the page at all times whether user resizes webpage or not.
I have tried using:
margin: auto;
margin: 0 auto;
margin-left: auto; margin-right auto;
but neither of those three worked.
HTML:
<div id="grayinnerbackground">
</div>
CSS:
div#grayinnerbackground {
margin: auto;
width:1000px;
background-color: #D9D9D9;
height: 100%;
position: fixed;
z-index: -1;
}
Here is a fiddle for an example of what I'm talking about.
http://jsfiddle.net/ymvDJ/
Thanks.
If you do want the position to be fixed, add these rules and drop the usual margin trick:
left: 50%;
margin-left: -25px; // half the width of your element
See it here: http://jsfiddle.net/8DfnG/2/
You can use
position: fixed;
left: 50%;
width: 50px;
margin-left: -25px; /* width รท 2 */
Demo: http://jsfiddle.net/ymvDJ/3/
Use:
position: relative
If that still doesn't work you may need to add this as well:
display: block;
"position: fixed" means that no matter what it stays at a x and y coordinate.
You can try this
div#grayinnerbackground {
margin: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
width: 50px;
background-color: #D9D9D9;
height: 100%;
}
http://jsfiddle.net/g49Mb/
More about the working here: http://codepen.io/shshaw/full/gEiDt
This this HTML:
<div id="grayinnerbackground">
foo
</div>
CSS:
div#grayinnerbackground {
margin: auto;
width: 50px;
background-color: #ccc;
height: 100%;
}
I'm not entirely sure why it didn't work until I put text into the div, checking something now.
UPDATE
Sigh, ok, i'm tired. If the div is empty, and you have a height of 100%, it is going to be 100% the height of its parent, the <body> in this case. Since there is no other content, the <body> has a height of 0. Give the <div> an absolute height, and it will pop in:
div#grayinnerbackground {
margin: auto;
width: 50px;
background-color: #ccc;
height: 10px;
}
Remove position: fixed, change the width to 50px and make sure you have a 0 before auto in margin: auto.
Update:
To have the div be as high as the window, be sure to set the body and html to height: 100%; too:
body, html {
height: 100%:
}
Updated jsfiddle again
I am trying to get my footer to be at bottom of page, header at top of page and section in the middle of page. But all I get is the red footer displayed on top of page. The background wrapper should be gray but that doesn't work either. Please help. Thank you.
Here is the css:
body {
margin: 0 auto;
}
#wrapper {
position: relative;
background-color: gray;
height: 100%;
width: 100%;
}
header {
position: absolute;
top:0;
width: 100%;
height: 20px;
background-color: red;
}
section {
position: absolute;
width: 100%;
height: 100px;
margin-top: auto;
margin-bottom: auto;
}
footer {
position: absolute;
bottom: 0;
width: 100%;
height: 20px;
background-color: blue;
}
below is the body of the html:
<body>
<div id="wrapper">
<header>
</header>
<section>
</section>
<footer>
</footer>
</div>
</body>
Just add this to html/body:
html, body {
height: 100%;
}
You should have to use position: absolute;. It tends to mess up all of your spacing when used in parent elements like that. The section section will be placed right over the header section because it hasn't been positioned at all.
Try just giving the section a min height and removing the position attributes.
Hope this helps.
You were close. Replace the CSS definition for <body>:
html, body{
margin: 0 auto;
width: 100%;
height: 100%;
}
make this in following class in your code :
html {
height: 100%;
}
body{
margin: 0 auto;
height: 100%;
}
section{
position: absolute;
width: 100%;
height: 100px;
top:20px;
}
DEMO
Remove the position absolute from the header, footer and section. I think it might be it.
So, I've seen tons of questions about this, but I would like a personal example. I'm rather new to programming, so I may be a little stupid...
Anyway, I have two <div>s, one with id bg and the other with class player.
This is what it looks like:
The red box is the player, and the large image is the bg.
I need the player to start in the center of the bg.
The bg is 640px X 640px.
This is the code I have so far in my CSS file:
#bg {
width: 640px;
height: 640px;
top: 0;
left: 0;
}
.player {
position:relative;
background-color:#FF0000;
width: 32px;
height: 32px;
top: 0px;
left: 0px;
}
Try changing your stylesheet to:
#bg {
width: 640px;
height: 640px;
top: 0;
left: 0;
position: relative;
}
.player {
position: absolute;
background-color: #FF0000;
width: 32px;
height: 32px;
top: 320px;
left: 320px;
z-index: 1;
}
And your HTML should look like this:
<div id="bg">
<!-- your bd code here -->
<div class="player"></div>
</div>
position: relative is relative to where the object would be placed normally. In your example, it would normally come below the first div, so that's where it will stay. (In other words position: relative used with a positioning of 0 won't move the objet anywhere.)
You could add top: -320px; left: 320px. That would position it it the space of the first div. But maxksbd19's answer is probably the better solution for your ultimate goal.
I try and avoid absolute positioning as it does not adapt to the container size and a change to the container requires you to go through your css and change all the absolute values.
I would do the following
CSS:
#bg {
overflow: auto; /* stops the .player from from moving #bg down */
width: 640px;
height: 640px;
background-color: blue;
text-align: center; /* center child div in IE */
}
.player {
background-color: White;
width: 32px;
height: 32px;
margin: 0 auto; /* center div in parent for non IE browsers */
margin-top: 304px; /* 50% from top minus div size */
}
HTML:
<div id="bg">
<div class="player"></div>
</div>
Now you only have to keep track of the top margin of the child container.
I try <iframe> for the content and use position: fixed; for a music player player bar to keep it at the bottom of the page.
Demo: http://jsfiddle.net/ThinkingStiff/vhLeE/
HTML:
<iframe src="http://thinkingstiff.com"></iframe>
<div id="player">music player</div>
CSS:
body {
margin: 0;
height: 100%;
}
iframe {
border: 0;
display: block;
height: 100%;
width: 100%;
}
#player {
background-color: black;
bottom: 0;
color: white;
left: 0;
position: fixed;
height: 30px;
width: 100%;
}
Sadly this doesn't work well for IE or Firefix 9, it simply shows the content in a small height window: http://cl.ly/0y0T2I1R042c3G002H3y
how can I fix this ?
I've seen a similar problem before with things I've worked on, and fortunately the workaround is really simple -- IE and Firefox just need the html height to be set to 100% as well. So update the first element of your style to be:
html, body {
margin: 0;
height: 100%;
}
That should do the trick.
You should also consider dividing iframe and div heights in percentages. If you specify 100% for iframe, div might hide the scrollbars.
you may change it to
iframe {
border: 0;
display: block;
height: 97%;
width: 100%;
}
#player {
background-color: black;
bottom: 0;
color: white;
left: 0;
position: fixed;
height: 3%;
width: 100%;
}
http://jsfiddle.net/vhLeE/3/