another prob (css) - UK Web Hosting | Dedicated Server Windows and Linux VPS Forum

**Ben** · #1 (**permalink**) 18-11-2007, 15:23

I'm adding an image with the background-image property which will be right above the content box... ill show you a preview of it with the html bbcode (mind some graphics won't show up obviously)

HTML Code:

<html>
<head>
<title></title>
<style type="text/css">

div.body {
height: 33em;
margin: 3px 3px 3px 3px;
border-color: black;
border-style: solid;
border-width: 1px;
background-color: orange;
}

div.gradientbox {
height: 20px;
width: 1000px;
border-color: black;
border-style: solid;
border-width: 1px;
background: url("gradient.jpeg") repeat-x;
}

img#welcome {
background-image: url("welcome.jpeg");
background-repeat: no-repeat;
background-attachment: fixed;
}

div.box1 {
width: 200px;
height: 200px;
overflow: auto;
padding: 3px 3px 3px 3px;
margin-left: 2em;
padding 3px 3px 3px 3px;
border-color: black;
border-style: double;
border-width: 3px;
background-color: white;
}
</style>
</head>
<body>
<div class="body">
<div class="gradientbox">Text</div>
<img id="welcome">
<div class="box1">Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text</div></div>
</body>
</html>

So the problem is that the I have used the img#welcome id selector and then within the section I added - any help appreciated.

Code:








Text

Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text

Note: It wont show up correctly in the above frame but works fine in my browser.

**developmentxl** · #2 (**permalink**) 18-11-2007, 15:46

Hello again Ben,

Sorry if you already know any of this, thought I'd best start at the beginning!

There are two ways of displaying an image, using the IMG tag or using CSS to apply a background to an element.

It seems the two are getting mixed up here, to use the IMG tag simply use:

HTML Code:

<img src="welcome.jpeg" />

Or you could do this using CSS;

Notes:

I'm using an H1 tag here for accessibility reasons - all HTML should have a purpose when styles are turned off, this is a whole other story though!
Set the width and height to the dimensions of your image,
The text indent hides the text that will only be displayed when styles are turned off.

CSS

HTML Code:

h1#welcome {
text-indent: -9999px;
background-image: url("welcome.jpeg");
background-repeat: no-repeat;
background-attachment: fixed;
width: 100px;
height: 100px;
display: block;
}

HTML

HTML Code:

<h1 id="welcome">Welcome to my [url=http://www.eukhost.com/]website hosting[/url]</h1>