Jump to content

how to use a website background in a style sheet


otuatail

Recommended Posts

I was hoping to place the website image in a style sheet rarther than each individual page.

The CSS an core html is this.

 

*** Html ***

<html>
<head>
<link rel="stylesheet" href="stylesheets/lowther.css" type="text/css">
</head>
<body>
<form>
<div id="logo">

<div>
</form>
</body>
</html>

 

*** CSS ***

 

.logo
{ 	position:absolute;
left:0px;top:0px;
background-image: url(../images/screen2.jpg);
}

 

Any help on this basic idea

 

Desmond.

 

What is it you are asking? Your basic concept about the image command is right.

 

It all depends on the image - designate height and width of the container at a minimum of the size of the image. If the image is 40 x 80 pixels, than that is the minimum height and width for the container.

 

Most common way to set a "logo" is to contain it within a header:

 

#header {
        float:left;
        margin:1em .5em; padding:.5em;
        width:100%;
}
/* always self-clear parent container floats with the :after pseudo element */
#header:after {
content: "."; 
display: block; 
height: 0; 
        clear: both; 
        visibility: hidden;
}
/* add the logo */         
#logo
{
float:left:
margin:.5em 1em; padding:0;
height:40px; width:80px;
background:#fff  url (../images/screen2.jpg) no-repeat 0 50%; 
}   

Change the background color to whatever the container background is (if other than parent or body), then add the url and image path, then repeat or no-repeat, then 0 50% (meaning to the left and middle of any elements to its right such as text h1 */

 

<html>
<head>
<link rel="stylesheet" href="stylesheets/lowther.css" type="text/css">
</head>
<body>
<div id="header">
<div id="logo"><div>
<h1>site name</h1>
<div>
</body>
</html>

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.