[Solved] Background image within a column

13 replies [Last post]

Wed, 2007-01-17 09:35

mistermax

Offline

newbie

Last seen: 16 years 2 weeks ago

Joined: 2007-01-16

Posts: 5

Points: 0

Hi there- I'm new to these forums, so apologies if this is posted in the wrong place.

I'm trying to create a background image fof a column. This is my first go at CSS, so I'm working off a template I found that set a background colour, just changing the command.

the section of CSS looks like this...

#lh-col{
 position: absolute;
 top: 61px;
 left: 0px;
 width: 180px;
 border: 1px solid #333333;
 background-image: url('brick_tex.GIF')
 color: #F7A900;
 margin: 0;
 padding: 0;
 height: 500px;
 z-index: 1;
 }

and the displaying page calls it like this...

Left Column

The left col can be used for navigation links, search box etc.

Well Trust Forums.

However, the image isn't displayed in the background.

The image is contained in the same directory (just trying it locally in a folder before uplocaing it to site)as the html and css. I've also tried a leading slash on the filename?
mod edit/ posted code fixed for display. Please use <code> tags to display code.

Tags:

Beginners CSS Questions

Wed, 2007-01-17 09:57

ChristinaG

Offline

Regular

Northampton

Last seen: 14 years 50 weeks ago

Northampton

Joined: 2006-11-30

Posts: 29

Points: 0

As far as I'm aware, don't

As far as I'm aware, don't use the quote marks around your background image file name.
i.e. background-image: url (brick_tex.GIF)

Wed, 2007-01-17 10:01

Hugo

Offline

Moderator

London

Last seen: 8 years 3 weeks ago

London

Joined: 2004-06-06

Posts: 15668

Points: 2806

Better to use shorthand

Better to use shorthand 'background' property, and you're missing a closing semicolon

One thing before you follow the wrong path, read upon why not to use absolute positioning for main layout (sticky on the subject somewhere).

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Wed, 2007-01-17 11:21

mistermax

Offline

newbie

Last seen: 16 years 2 weeks ago

Joined: 2007-01-16

Posts: 5

Points: 0

I've tried both those

I've tried both those changes, so the presentation code looks like this:

#lh-col{
position: absolute;
top: 61px;
left: 0px;
width: 180px;
border: 1px solid #333333;
background: url(brick_tex.PNG)
color: #F7A900;
margin: 0;
padding: 0;
height: 500px;
z-index: 1;
}

but it still doesn't display?

(Thanks for the pointer on absolute positions, I'll look into it later on)

EDIT **** IGNORE ME! I'd forgotten the semi-colon on the line end...

Wed, 2007-01-17 15:47

thepineapplehead

Offline

Moderator

Last seen: 39 weeks 6 days ago

Timezone: GMT+1

Joined: 2004-06-30

Posts: 9683

Points: 819

So have you fixed the

So have you fixed the original problem?

Verschwindende wrote:

CSS doesn't make pies

Wed, 2007-01-17 19:49

ClevaTreva

Offline

Guru

A hilly place, UK

Last seen: 4 years 12 weeks ago

A hilly place, UK

Joined: 2004-02-05

Posts: 2902

Points: 0

Daft question deleted

Blah

Give your site a valid doctype | Uncollapsing Margins

Wed, 2007-01-17 20:41

mistermax

Offline

newbie

Last seen: 16 years 2 weeks ago

Joined: 2007-01-16

Posts: 5

Points: 0

I thought I had fixed it, I

I thought I had fixed it, I saw the background work.. but once only. I reloaded the page and it disappeared.

ClevaTreva - is that just a sig about doctype, or is that something I should do?

Wed, 2007-01-17 20:56

ClevaTreva

Offline

Guru

A hilly place, UK

Last seen: 4 years 12 weeks ago

A hilly place, UK

Joined: 2004-02-05

Posts: 2902

Points: 0

Its in my sig, but if you

Its in my sig, but if you don't have one, GET ONE NOW.

Either HTML 4.01 Strict or XHTML 1.0 Strict is my advice. I prefer XHTML, but that's just me.

Give your site a valid doctype | Uncollapsing Margins

Wed, 2007-01-17 21:40

thepineapplehead

Offline

Moderator

Last seen: 39 weeks 6 days ago

Timezone: GMT+1

Joined: 2004-06-30

Posts: 9683

Points: 819

Can you post all your code,

Can you post all your code, CSS and HTML please?

Verschwindende wrote:

CSS doesn't make pies

Wed, 2007-01-17 22:10

ClevaTreva

Offline

Guru

A hilly place, UK

Last seen: 4 years 12 weeks ago

A hilly place, UK

Joined: 2004-02-05

Posts: 2902

Points: 0

Hi Looking at the OP, the

Looking at the OP, the line of css with the background image in is missing the ending semi-colon

Give your site a valid doctype | Uncollapsing Margins

Wed, 2007-01-17 23:10

#10

Hugo

Offline

Moderator

London

Last seen: 8 years 3 weeks ago

London

Joined: 2004-06-06

Posts: 15668

Points: 2806

ClevaTreva wrote:Hi Looking

ClevaTreva wrote:

Hi

Looking at the OP, the line of css with the background image in is missing the ending semi-colon

three times thats been refered to, by the OP, yourself, and originally me! :rolleyes: people just don't really read posts do they?

and if we are dealing with a lack of DTD :curse:

Thu, 2007-01-18 12:02

#11

mistermax

Offline

newbie

Last seen: 16 years 2 weeks ago

Joined: 2007-01-16

Posts: 5

Points: 0

Here's the code...

okay, here we go...

/* Layout Stylesheet */

body{
padding:0;
margin: 0;
}

#lh-col{
position: absolute;
top: 61px;
left: 0px;
width: 180px;
border: 1px solid #333333;
background: url(brick_tex.PNG);
color: #F7A900;
margin: 0;
padding: 0;
height: 500px;
z-index: 1;
}

#rh-col{
position: absolute;
top: 61px;
right: 0px;
width: 180px;
border: 1px solid #333333;
background: #C1281A;
color: #333333;
margin: 0px;
padding: 0px;
height: 500px;
z-index: 1;
}

#hdr{
height:60px;
background:#eeeeee;
color:#333333;
margin:0;
padding:0;
border: solid #333333;
border-width: 1px 1px 0 1px;
}

#c-col{
position: relative;
margin: 0 181px 20px 181px;
border: 1px solid #333333;
background: #ffffff;
color: #333333;
padding: 20px;
z-index: 3;
}

/* Presentation Stylesheet */

h4 {
margin:0;
padding: 5px 0;
}

p:first-letter {
font-size: 90%;
font-weight: bold;
color:#FFA63A;
}

Max and Lesley Russell

Header Content Here

Our Home Page

Ver 0.1

This is the first page of our website.

Not much currently!

This will be a place to :

Store all our photos
Leave messages for family
Link to cool things

Filler Content

This is an initial format for our website, using CSS.

Left Column

The left col can be used for navigation links, search box etc.

Well Trust Forums.

Right Column

As already mentioned in the

As already mentioned in the edit on your first post, please use the code tags (third button from the right) when posting code.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

Fri, 2007-01-19 10:02

#13

mistermax

Offline

newbie

Last seen: 16 years 2 weeks ago

Joined: 2007-01-16

Posts: 5

Points: 0

will do in future, got it

will do in future, got it working using the advice here, ta!

[Solved] Background image within a column

Left Column

As far as I'm aware, don't

Better to use shorthand

I've tried both those

So have you fixed the

Daft question deleted

I thought I had fixed it, I

Its in my sig, but if you

Can you post all your code,

Hi Looking at the OP, the

ClevaTreva wrote:Hi Looking

Here's the code...

Our Home Page

Left Column

Right Column

As already mentioned in the

will do in future, got it

User login

Navigation