Learning about css & using a image for a menu background

HTML & CSS
1

I was hoping someone can point me in the right direction here. I am learning CSS and building a basic website to practice my skills; I have created a menu and would like to replace the background with an image (a gradient .gif file) I have created.

I have tried making the navigation header transparent and referencing the image but with no success.

To be honest I um unsure on where to place the reference to the image, if someone could please point me in the correct direction it would be appreciated.

2

Hi,

I think we’d need to see the html you have to give specific advice as I’m not quite clear why you need to set the header to transparent (which it will be by default anyway).

You can apply a background image to any block level element quite easily as long as the element has some intrinsic width and height in which to show the background.

If the element you are applying the image to only contains floated children then you would need to ensure that the floats are cleared otherwise the parent will have zero height and no background will show.

If you can detail which element you want an image applied to and provide some of your code we can give a more specific answer :slight_smile:

Applying a horizontal repeating background is as simple as – .test {background:url(images/gradient.gif) repeat-x 0 0}

However i’d need to see what you really want :slight_smile:

3

Hi Paul,

Many thanks for your reply (sorry for the delay)

I have included the HTML below,

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Website - Welcome</title>
<meta http-equiv="Content-Type"
content="text/html; charset=utf-8"/>
<link href="style1.css" rel="stylesheet" type="text/css" href="tabs.css"/>
<h1>Website</h1>
</head>
<div id="mainnavigation">
<ul id="nav">
<li><a href="index.html">welcome</a></li>
<li><a href="Page_1.html">page 1</a></li>
<li><a href="Page_2.html">page 2</a></li>
<li><a href="Page_3.html">page 3</a></li>
<li><a href="Page_4.html">page 4</a></li>
</ul>
</div> <!-- end of navigation div -->
<body>
<div id="content">
<p>Welcome to my test website.</p>
</div> <!--end of content field -->
</body>
</html>

And here is a copy of my stylesheet.css code

/*
CSS for test site
*/
#mainnavigation {
width: 1024px; 
height: 37px;
margin-left: auto; 
margin-right: auto;
text-align: right;
background-color: #cccccc;
background-image: url(menu_background.gif) no-repeat;
font-family: georgia, sans-serif;
font-weight: regular;
font-size: 14pt;
}

#mainnavigation ul {
list-style: none;
margin: 0;
padding: 2;
padding-top: 0em;
text-decoration: none;
background-color: ;
background-image: url(menu_background.gif);
}

#mainnavigation li {
display: inline;
}

#mainnavigation a:link {
color: #ffffff;
text-decoration: none;
}

#mainnavigation a:visited {
color: #ffffff;
text-decoration: none;
}

#mainnavigation a:hover {
color: #0033cc;
background-color: transparent;

}


h1 {
width: 1024px; 
margin-left: auto; 
margin-right: auto;
text-align: left; 
font-family: georgia, sans-serif;
font-size: 36pt;
font-weight: regular;
color: #cccccc;
margin-bottom: -0.25em 
}
p {
font-family: georgia, sans-serif;
font-weight: regular;
color: grey;
}

#content { 
width: 1024px; 
margin-left: auto; 
margin-right: auto; 
border: 0px solid #A6B2BC; 
background-color: #FFFFFF; 
color: #000000; 
padding: 0 20px 0 20px; 
text-align: left; 
}

Where the bar at the top is grey I wish to insert my image of the gradient background.

As this is my first venture into coding I’m sure there are some error’s and elements which can be done better, so your assistance (and understanding :confused:) is appreciated.

4

a link helps so we can visually see what it’s doing right now.

5

HI,

You are mixing your shorthand properties here.


    background-color: #cccccc;
    background-image: url(menu_background.gif) no-repeat;

background-image is a not a shorthand property and you can only apply the image to it and not other properties like repeat or position. You should use the shorthand "background " instead like so:


background:#ccc url(menu_background.gif) no-repeat 0 0;

I don’t know what your images look like so I don’t really know how you want them placed or repeated but the following code is now valid at least.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Website - Welcome</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<link href="style1.css" rel="stylesheet" type="text/css" />
<style type="text/css">
/*
CSS for test site
*/
#mainnavigation {
    width: 1024px;
    height: 37px;
    margin-left: auto;
    margin-right: auto;
    text-align: right;
    background:#ccc url(menu_background.gif) no-repeat;
    font-family: georgia, sans-serif;
    font-weight: normal;
    font-size: 14pt;
}
#mainnavigation ul {
    list-style: none;
    margin: 0;
    padding: 2px;
    padding-top: 0em;
    text-decoration: none;
    background:url(menu_background.gif);
}
#mainnavigation li {
    display: inline;
}
#mainnavigation a:link {
    color: #ffffff;
    text-decoration: none;
}
#mainnavigation a:visited {
    color: #ffffff;
    text-decoration: none;
}
#mainnavigation a:hover {
    color: #0033cc;
    background-color: transparent;
}
h1 {
    width: 1024px;
    margin-left: auto;
    margin-right: auto;
    text-align: left;
    font-family: georgia, sans-serif;
    font-size: 36pt;
    font-weight:normal;
    color: #cccccc;
    margin-bottom: -0.25em
}
p {
    font-family: georgia, sans-serif;
    color: gray;
}
#content {
    width: 1024px;
    margin-left: auto;
    margin-right: auto;
    border:none;
    background-color: #FFFFFF;
    color: #000000;
    padding: 0 20px 0 20px;
    text-align: left;
}
</style>
</head>
<body>
<h1>Website</h1>
<div id="mainnavigation">
    <ul id="nav">
        <li><a href="index.html">welcome</a></li>
        <li><a href="Page_1.html">page 1</a></li>
        <li><a href="Page_2.html">page 2</a></li>
        <li><a href="Page_3.html">page 3</a></li>
        <li><a href="Page_4.html">page 4</a></li>
    </ul>
</div>
<!-- end of navigation div -->
<div id="content">
    <p>Welcome to my test website.</p>
</div>
<!--end of content field -->
</body>
</html>

You had a number of error so run your css through the css validator and your html through the [URL=“http://jigsaw.w3.org/css-validator/#validate_by_input”]html validator regularly.

6

Hi Paul,

Sorry for the delay in responding and I hope you had a nice Easter.

Many thanks for your assistance with the code, As you can see I’m quite new at this and a have a few sitepoint books to guide me (although I may pick up some more PDF’s with the promo)

I can now see where I was going wrong and will add this to my notes.

I also appreciate the reminder about using the validators, I guess when learning it’s wiser to run code through them more frequently then usual until I’m more comfortable with the code.

Once again thanks for your assistance and making sitepoint a great support site!