How do I do this in CSS/HTML?

Question

I'm a beginner at web designing, and I've come across this problem: I wanted to have a header and a background. I put the header as body's background, and made another div, just after the first body tag, and wanted this element's background as the site's background, but next to the header, it wouldn't appear.
So I tried to put the site's background as the body's, but then the header won't appear. How should I achieve the (pretty simple) effect I want?
There must be a very simple explanation or a little detail I'm missing. Please help!
I hope I managed to put it coherently, if no, sorry.

Answer 1

Background Image Code:



For the body tag example:



body {

width: XXpx;

height: YYpx;

margin: 0 auto;

background: #fff url(image_name.jpg) no-repeat center scroll;

}



That is the proper CSS code for a non-tiled image where the contents scroll with the background image. Change "#fff" to preferred bg color. Change "scroll" to "fixed" if you want page contents to scroll over bg image. Be sure to set proper width/height to provide minimum page size to display bg image. Put the CSS as is on an external CSS file. If using embedded CSS, then place CSS between the style tags and place those style tags between the head tags of the page.



For a tiled image, change to:



body {

width: XXpx;

height: YYpx;

margin: 0 auto;

background: #fff url(image_name.jpg) repeat top left scroll;

}



Put that CSS on an external CSS file if you have more than one page. Put the CSS between the style tags and place them between the head tags if using it on one page. Style another tag other than the body tag if you are using a div wrap container. Should you want the contents of page to scroll over the background image, change "scroll" to "fixed".



Then for the page header div, just repeat the CSS, but use an id as the selector name. Example:



div#header {

width: XXpx;

height: YYpx;

margin: 0 auto;

background: #fff url(image_name.jpg) no-repeat center scroll;

}



Then right after the opening body tag, place this HTML:

Your header will be centered and used as a background for the div. Be sure to set the proper width and height so your images show properly.



Ron

Answer 2

Probably the most technically "clean" way to do this would be to create a set of CSS classes for elements that need to be certain colours. So, for example, you could have a class for elements where the text colour is that colour, a class for elements where the border is that colour, and so on. I would suggest naming the classes using some system that accounts for what attribute will receive the colour (e.g. text, border), along with the function of the colour within the design (such as "theme colour 1", "main text colour"). Don't name the classes after the name of the colour itself. That way, if you change the colour, you won't be confused by all the references to the old colour, or have to change them all. In your stylesheet, for these colour classes, you would simply have a rule which sets the colour. This would be the one and only chunk of code where you would define that colour. In the HTML, you would assign the appropriate class or classes to elements that need colouring. (Remember, one element can have many classes, and one class can apply to many elements.) Another effective method would be to define the stylesheet using something other than pure CSS, and then compile/process that it into actual CSS when it needs to be used on the website, either manually upon changing the stylesheet, or automatically using something server-side. This way, you could use variables even though CSS does not support variables.

Answer 3

Get back to the basic and it should be prettye simple:

According to the W3C, HTML should be for the semantic (content) and CSS for the styling (dress-up).



So, by these rules, your HTML should be something like this:

....

Than, to style this, you would need some CSS loooking like this:



Body{

background-image:("...\your-background-image.jpeg");

}

#header{

background-image:("...\your-header-image.jpeg");

margin: 0, auto; /* So the header can be centered accross the page */

}



Don't forget, the structure is from the HTML, the CSS is just for the styling.

Answer 4

I don't get it, why are you trying to put a "header" in your body? Wouldn't it be easier to make the body's background the background and the header in the div?

 

Something like that?

Answer 5

I not understand ¿why two backgrounds?, well...



You can put a Div for the header with width 100% and the height that you want (100px, for example) and give to this a background image.

Then, put a div with width 100% and height to 100% too, and put this the background image for the site.



#DivHeader {

width: 100%;

height: 100px;

background-image: url(image.jpg);

}

#DivMain {

width: 100%;

height: 100%;

background-image: url(other.jpg);

}



And in the body section:

Header content

Main content

Answer 6

Define your background with the background image.

Then define your header in the body, with an image or a background!

ie

CSS

body

{

background-image: url('bkg.jpg');

}

.head

{

background-image: ...

width: xxpx;

height: xxpx;

}



HTML

...