16 replies [Last post]
johnyct9760
johnyct9760's picture
Offline
Enthusiast
Michigan, USA
Last seen: 7 years 17 weeks ago
Michigan, USA
Timezone: GMT-5
Joined: 2008-01-22
Posts: 68
Points: 25

Can I assign a background image thats a JPEG using CSS? :shrug:

If so How do I do that could some one help me out with the code?

Also I would like the background pic (that’s like 1px wide by 1000px high) to repeat over the X axis. I know how to do that pretty simply in HTML but being new to CSS I would like to know to use CSS to do this.

Thx for the assist every one

John

d41
d41's picture
Offline
Enthusiast
Last seen: 10 years 40 weeks ago
Timezone: GMT-7
Joined: 2007-07-07
Posts: 98
Points: 0

#backgroundimage

#backgroundimage {
background-image: url(images/yourimage.jpg);
background-repeat: repeat-x;
}

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 6 years 30 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

Better

Better still:

#backgroundimage { background: #000 /* a background colour too */ url(images/yourimage.jpg) /* the actual image */ left top /* position the image */ repeat-x /* set the repeat */ }

(You obviously wouldn't have each one on a separate line; done purely for legibility.)

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

johnyct9760
johnyct9760's picture
Offline
Enthusiast
Michigan, USA
Last seen: 7 years 17 weeks ago
Michigan, USA
Timezone: GMT-5
Joined: 2008-01-22
Posts: 68
Points: 25

Thx U

Thx u guys your the greatest!

isedeasy
Offline
Enthusiast
Bristol
Last seen: 8 years 44 weeks ago
Bristol
Timezone: GMT+1
Joined: 2008-02-09
Posts: 74
Points: 12

if you want it to be the

if you want it to be the pages background then you can do...

body { background:#000 url(images/yourimage.jpg) repeat-x top left; margin:0px; /* removes the margin around your page */ padding:0px; /* removes the padding around your page */ }

"If a man is trying to hang himself from the tree in my yard but the knot keeps slipping and allowing him to fall before it kills him do you expect someone to go out and teach him to tie a better knot?" - Triumph

johnyct9760
johnyct9760's picture
Offline
Enthusiast
Michigan, USA
Last seen: 7 years 17 weeks ago
Michigan, USA
Timezone: GMT-5
Joined: 2008-01-22
Posts: 68
Points: 25

Stuck...

Ok I've been following the code every one has given me so far and I'm stuck right away :bigoops: here is the exact css code that I have so far:

#backgroundimage{
background:#red;
}

And its not turning the background color red so needless to say I can't really move on if this much is botched up I can't really move on to placing the background image. I think I have the link rel tag right cauce when I do a basic

body{
background:red;
}

The background turns red any ideas on whats going on? :shrug:

John

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 7 weeks 1 day ago
Joined: 2004-06-30
Posts: 9674
Points: 810

you don't need the

you don't need the octothorpe in your first example Wink

Verschwindende wrote:
  • CSS doesn't make pies

johnyct9760
johnyct9760's picture
Offline
Enthusiast
Michigan, USA
Last seen: 7 years 17 weeks ago
Michigan, USA
Timezone: GMT-5
Joined: 2008-01-22
Posts: 68
Points: 25

still not working...

Ok I got rid of the number sign (by the way I had no idea the prober name for that wsa a octothorpe, u learn somthing new every day) this is what I have and its still not working

background{
background-color:red;
}

Do I need to place a

body{
}

above it? or in the body part of the CSS code?

I know must be looking really stupid to be having this much trouble and this many questions about somthing so simple

johnyct9760
johnyct9760's picture
Offline
Enthusiast
Michigan, USA
Last seen: 7 years 17 weeks ago
Michigan, USA
Timezone: GMT-5
Joined: 2008-01-22
Posts: 68
Points: 25

Ok I think I got it

Ok I think I got it, its a bit simple.
All I had to put in the CSS file was this:

body{
background-image:url(index_bg.jpg);
}

and then I updated the HTML file and it was placed tiled and all that good stuff.

But i would still enjoy feed back on what other were telling me 2 do in and effort to learn more.

Thx for the love and help u guys RULE!

John Smile

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 7 weeks 1 day ago
Joined: 2004-06-30
Posts: 9674
Points: 810

#backgroundimage{background:#

#backgroundimage{ background:#red; }

is wrong

backgroundimage{ background:red; }

is wrong

#backgroundimage{ background:red; }

is right.

does that help?

Verschwindende wrote:
  • CSS doesn't make pies

johnyct9760
johnyct9760's picture
Offline
Enthusiast
Michigan, USA
Last seen: 7 years 17 weeks ago
Michigan, USA
Timezone: GMT-5
Joined: 2008-01-22
Posts: 68
Points: 25

Tryed it out and it dosen't seem to be working

ok so this is the current CSS code I have in my css file:

#backgroundimage{
background:red;
}

Copyed right from the "right" code above.

And it didn't change the background of the HTML file red

I know the:

is working just fine casue when I do

body{
background:red;
}

It works and the background turns red.

Do is need to assign the # a place in the html page like a tag?

Thx for you continuded help

John

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 6 years 30 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

All this posting snippets is

All this posting snippets is getting no-one anywhere. Can you either post a link to the page, or ALL your code - HTML & CSS?

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

johnyct9760
johnyct9760's picture
Offline
Enthusiast
Michigan, USA
Last seen: 7 years 17 weeks ago
Michigan, USA
Timezone: GMT-5
Joined: 2008-01-22
Posts: 68
Points: 25

Sure thing the HTML is pretty stright forward

Sure thing the HTML is pretty stright forward here's the link to check it out:

http://www.johncliffordtaylor.com/test2/

Its pretty much a blank page.

The CSS I currnely have in place is:

body{
background:red;
}

The one I'm trying to get working is:

#backgroundimage{
background:red;
}

John

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 6 years 30 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

johnyct9760 wrote: The one

johnyct9760 wrote:

The one I'm trying to get working is:

#backgroundimage{
background:red;
}

Can we see that one then please?

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

johnyct9760
johnyct9760's picture
Offline
Enthusiast
Michigan, USA
Last seen: 7 years 17 weeks ago
Michigan, USA
Timezone: GMT-5
Joined: 2008-01-22
Posts: 68
Points: 25

sure thing

I got the HTML file pointing to the CSS file that is currenlty not working for me the link is:

http://www.johncliffordtaylor.com/test2/

The name of the CSS file is:

donation.css

Hope it helps

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 6 years 30 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

Your page is empty. You

Your page is empty. You don't have an element with the ID backgroundimage in it. Even if you did, it still wouldn't show up without any content in it or some dimensions specified on it. What you should have is this:

test

Stuff goes here

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

johnyct9760
johnyct9760's picture
Offline
Enthusiast
Michigan, USA
Last seen: 7 years 17 weeks ago
Michigan, USA
Timezone: GMT-5
Joined: 2008-01-22
Posts: 68
Points: 25

sweet I think I got it!

Smile Smile Smile

I think I got it working!

http://www.johncliffordtaylor.com/test2/

Check it out. Once again thx u Sooooooooooooo much Tyssen and every one else for helping me out with this, we are about to learn about Div tags in school real soon.

Thx for all the help love and support!

John