So I'm new to HTML and CSS and I was trying to create a layout with a header, a centered column and a background made of an image behind that column but I just can't make it work.
This is the HTML code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd"><html>
<head>
<title>mylayout </title>
<link rel="stylesheet" type=text/css
href="style/my1stcss.css" />
</head>
<body>
<div id="box">
<div id="header"></div>
<div id="column"></div>
</div>
</body>
</html>
And this is the css stylesheet:
html, body {margin:0px; padding:0px
background-image:url (img.jpg)}
#box {
Height:auto ;
Width:100% ;
Margin-left:auto;
Margin-right:auto;
}
#header {
Height:150px;
Width:100%;
Background-color:red;
}
#column {
Height:600px ;
Width:50% ;
Margin-left:25% ;
Background-color:blue;
}
Where you see the white, behind that column I'd like to put an image.
First of all you need to write all your CSS properties in lowercase. Background-color isn't valid CSS, it must be background-color.
Next remove all empty spaces between your CSS values and always add an semicolon ; at the end. Otherwise your CSS won't take effect.
At last make sure that the path to the image is correct. If not, no image will be shown.
Here is an jsFiddle example of your provided code with a cute kitty as a background to give you an example of how it will work.
I always created such layouts, following some conventions. So if you woud like to create a centered "main-frame" with a header of fixed height than:
<body>
<div class="center">
<div class="main-frame"></div>
<div class="header"></div>
</div>
</body>
.center {
width: <must be set, can be percentage>;
margin: 0px auto;
}
.main-frame {
position: relative;
margin: <height of header> auto <height of footer> auto;
}
.header {
position: absolute;
top: 0px;
height: <height of header>;
}
The same approache for the footer. Please note that the main-frame appears before the header and footer in source, otherwise they lie behind the main-frame and are not clickable. One could also fix this by using the z-index, but I try to use this as less as possible to prevent confusion with z-indices.
Your desired background image can be attached to the "main-frame" using css in the usual way.
Related
This question already has answers here:
Applying a background to <html> and/or <body>
(2 answers)
Closed 4 years ago.
I have a simple markup with just a body with nothing in it, when I style the body like this:
body {
width: 200px;
height: 200px;
background-color: antiquewhite;
margin: auto;
}
In stead of just filling the body the whole screen is filled up with the background-color, it doesn't make any sense to me, is this some crazy CSS weirdness?
Refer to https://www.w3.org/TR/CSS2/colors.html#background
Basically, if the background of your HTML is not specified, it is "transparent". And it will use the background-color of the BODY if present.
I believe it will be easier to set a bgcolor for the HTML:
html{background-color: white;}
body {
width: 200px;
height: 200px;
background-color: black;
margin: auto;
}
Create a div in your body and style that.
#body{
margin:auto;
width:250px;
height:250px;
background-color:antiquewhite;
}
<html>
<body>
<div id="body">
</div>
</body>
</html>
The <body> element contains all the contents of an HTML document, such as: text, hyperlinks, images, tables, lists, etc.
If you want to change the color of the body you will change it for the whole screen, but if you want to change the background color only of a piece of your screen you can divide the body by using div elements, sections, etc.
This is an example of a structure:
header
{
height:50px;
background-color:red;
}
section
{
height:500px;
background-color:blue;
}
footer
{
height:50px;
background-color:green;
}
<body>
<header>
</header>
<section>
</section>
<footer>
</footer>
</body>
By calling <BODY> tag in the css file you are including the whole interface of your web browser. So, it is obvious that the whole screen will be filled with the selected color.
My suggestion would be that, it would be better if you can divide the body into header and footer or use div with a class or ID to adjust the portion you want to color.
Just add this snippet to your code in css file
html{
background-color:white;
}
I use center tag, but it seems that is not standard in HTML 5. I tried to use CSS instead but it doesn't work for me! I expect in this example the div tag be displayed in center but it won't.
<!doctype html>
<html>
<body style="text-align:center">
<div style="width:100px; height:30px; background-color:rgb(0,0,0)"></div>
</body>
</html>
And this is center tag version: (it works)
<!doctype html>
<html>
<body>
<center>
<div style="width:100px; height:30px; background-color:rgb(0,0,0)"></div>
</center>
</body>
</html>
You can use margin: auto for your div
div {
margin: auto;
width:100px;
height:30px;
background-color:rgb(0,0,0)
}
Also it's better to give your div an id or class name to target it more accurately if your HTML markup become more complex as well as using external CSS instead of inline styles like what you're doing now.
Fiddle Demo
You can use css:
.window{
position:absolute;
top:50%;
left:50%;
margin-top:-140px;
margin-left:-200px;
width:400px;
height:280px;
}
make sure you substract half of the width and height using margins. This way your div will be centered within the window the div is in.
The div tag which you want to put in center in your body must be :
.div-class {
margin: auto;
}
If you use margin top or bottom, you can do this way:
.div-class {
margin-left: auto;
margin-right: auto;
}
I am using an image (in an <img> tag) as a background. I want it to always be the furthest back object. But my paragraph isn't showing up because it is covered up by the image.
I know it has something to do with the z-index, but I can't get it working.
HTML
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>2013 YourFantasyFootball</title>
<link rel="stylesheet" type="text/css" href="css/css_reset.css" />
<link rel="stylesheet" type="text/css" href="css/mystyles.css" />
</head>
<body>
<img src="images/final2.gif" class="stretch" alt="" />
<p>This is the first paragraph in the body of your new HTML file!</p>
asdfas
</body>
</html>
CSS
body {
width: 100%;
height: 100%;
position: fixed;
left: 0px;
top: 0px;
z-index: -1; /* Ensure div tag stays behind content; -999 might work, too. */
}
.stretch {
width:100%;
height:100%;
z-index:-1;
}
p {
color:red;
}
It seems like the image should be fixed, not the body.
body,html {
height: 100%;
}
.stretch {
width:100%;
height:100%;
position: fixed;
top:0;
left:0;
z-index:-1;
}
http://jsfiddle.net/xYqsT/
The paragraph or content in front if it needs to have position: relative, otherwise anything with a z-index takes precedence.
You can do this in pure CSS, yes even for ancient browsers. This should cover IE5.5+:
body {
width: 100%;
height: 100%;
position: fixed;
left: 0px;
top: 0px;
background-image:url('images/final2.gif');
background-size:cover;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/final2.gif',sizingMethod='scale');
}
The filter is for IE8-. Taken from here, and original spec found here.
EDIT
Aspect ratio not preserved using the filter ... very true, it does not scale preserving ratio the same way that background-size:cover; does. This is a very good article, though, about different methods to use:
http://css-tricks.com/perfect-full-page-background-image/
They provide multiple CSS-only, as well as jQuery, methods. One is bound to provide what you want.
I can't recommend highly enough using backstretch.js. I've used it for a lot of projects as there is no real solution to preserving aspect ratio of an image in CSS. If you're only supporting IE9+ then by all means, PlantTheIdea's answer is the best. But for anyone that is coming here and needs to preserve aspect ration for IE8- and if they need to use an <img> instead of background-image then use this great little plugin.
You can use it as a total background with just one line:
$.backstretch('https://img.jpg');
Or you can set it as the background on any element:
$("#demo").backstretch("http://dl.dropbox.com/u/515046/www/garfield-interior.jpg");
You can also pass multiple images into the function and other parameters to create slideshows etc.
DEMO
you need to set the image as a background-image
body {
width: 100%;
height: 100%;
background: url('images/final2.gif') repeat;
}
you can use background-size to size the image appropriately (stretching it to 100%)
You might want to pop all your page content inside an element (or several elements), and give them a z-index higher than your background <img>.
E.g.
HTML
<body>
<img src="images/final2.gif" class="stretch" alt="" />
<main>
<p>This is the first paragraph in the body of your new HTML file!</p>
<!-- All page content goes in here. -->
</main>
</body>
</html>
CSS
main {
position:relative;/* So that it behaves as if it were position:static, but still gets a z-index */
z-index: 1;
}
I have plans to create carousel with a background that spans the width of the browser.
To do this I set margin:0; padding:0; in the body and set my div that spans the background to width:100%. I chose this because it contains another div that has a left, and right margin:auto; making the second div centred within the div spanning the browser.
I encountered a problem trying to add the background image to the div that spans the width of the browser. When I use background-repeat:repeat-x; it is still just a 550x1 px sliver on the far left of the browser. It does not repeat. I have figured this is due to the 100% width. If I let go of the 100% width I encounter a problem of the inner div being forced to the right or left, depending on the resolution of the monitor being used. I do not want this to happen.
Does anyone know of a way I can achieve/simulate 100% width and still use background-repeat:repeat-x;?
EDIT, i use 2 divs because i am applying silverlight, and would like to place it kindof artistically on the screen. here is my code, it might make more sence what i am doing then. and if you still believe 1 div is better than 2, tell me that im wrong, but here is the code. it is very simple because much will be done in silverlight, or at least i thought it would be somewhat simple, but that's how it goes.
HTML
<%# Page Language="C#" AutoEventWireup="true" CodeFile="Home.aspx.cs" Inherits="imd_data_Home" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Home</title>
<link href="styles/main.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id=NavContainer>
<div id="Navigation">
<img src="img_data/dem_Logo.png" id="Logo"/>
</div>
</div>
<div id="Carousel">
<div id="SilverlightContainer">
</div>
</div>
</body>
</html>
CSS
body
{
margin:0;
padding:0;
background-color:#000061;
}
#NavContainer
{
width:900px;
margin-left:auto;
margin-right:auto;
}
#Navigation
{
height:75px;
width:100%;
}
#Logo
{
float:left;
}
#Carousel
{
height:550px;
width:100%;
background-image:url('img_data/carousel_bar_01.png');
background-repeat:repeat-x;
}
#SilverlightContainer
{
height:550px;
width:900px;
margin-left:auto;
margin-right:auto;
}
You don't have to take two div's to achieve what you want.
Just take your background image in the body like
body{ background:url(image path here) repeat-x}
and give your div
certain width and give it a style like
div#yourID{margin:auto}
This will work for you just fine.
You simply need only one div, the one you want in the middle.
<div class="centered"></div>
You set the background on the body:
body {
min-height: 550px;
background: url(path/image.png) repeat-x;
background-size: 1px 550px;
}
And then you have the centered div:
.centered {
min-height: 150px; /* whatever values you wish for height and width */
width: 300px;
margin: 75px auto; /* whatever values you wish for top/ bottom margin */
}
You can see it live at http://dabblet.com/gist/2774626
Try this:
body {
width:100%;
height:100%;
background:url(your-image.jpg) repeat-x;
position:absolute;
}
Solved! The problem was that I was not putting in the right location for the image carousel_bar_01.png.
html:
<html>
<head>
<title>Home</title>
<link rel="stylesheet" type="text/css" href="qa.css" />
</head>
<body>
<div id="wrap"></div>
</body>
</html>
css:
body {
margin:0;
padding:0;
}
#wrap {
width:750px;
margin-right:auto;
margin-left:auto;
background:#008B00;
}
The html file is called qa.html, and the css file is called qa.css
The two files are in the same directory.
Um... How's the HTML supposed to show anything if there's no content?
[EDIT] To make it more specific and not sound like I'm complaining: put some content in the wrapper div, otherwise it's empty and thus with 0 height.
[EDIT 2]: According to the expected output you describe in the comment, you want the div to take up 100% height of the document. You need to specify this explicitly, ie body and #wrap need to have height:100%. Or even better, min-height.
The div will collapse upon itself if there is no content and no height set. Either put some text or content into the div, or set a min-height or height explicitly.
Edit: please put a doctype in your pages; it helps a lot with expected renderings.
a green div block that fills the middle 750 pixels of the page.
So,
html, body {
margin: 0;
padding: 0;
height: 100%;
}
#wrap {
width: 750px;
height: 100%;
margin: 0 auto;
background: #008B00;
}
?