Welcome Guest!

If you do not have an account yet on The Web Squeeze forums, please Register! It’s FREE and there are many benefits:

  • Receive Fast Advice
  • Learn Programming Languages
  • Get Professional Website Reviews
  • Quick Troubleshooting Assistance

> Background Question

This is a discussion on Background Question, within the CSS section. This forum and the thread "Background Question" are both part of the Designing Your Website category.

 
 Reply to this topicStart new topic
> Background Question
shammy2007
post Feb 17 2008, 04:17 PM
Post #1


New Squeeze
*

Posts: 7
Joined: 16-February 08
Ive got my CSS designed and so far its working fine. I know how to change the background color and all that.
But im having trouble making the background and imported image that i made.

What part of code do i need to add?. here is what i have already for the body.

body {
margin: 20px 0;
background: #CF21F7 ;

I just want to add a background image, instead of having just a plain color.

would i add the following?.

background-image: url('example.jpg')

or have i maybe just answered my own question?.
Go to the top of the page
 
+Quote Post
Rakuli
post Feb 17 2008, 04:38 PM
Post #2


Squeeze Machine
Group Icon

Posts: 766
Joined: 13-February 08
From: Catching the squeezed drips downunder.
Yep! You answered you own question smile.gif

To pre-empt some further questions you may wish to modify the background

CODE
/* Change the position */

background-position: top left; /* You can use top left center or bottom as well as values for top and left */
background-repeat: no-repeat | repeat-x | repeat-y | repeat; /* defines whether it will repeat horizontally, vertically both or none */
background-attachment: scroll | fixed; /* defines whether the background scrolls with the page or remains fixed in place */


--------------------
Luke Dingle . com

Turn Over a Playful Leaf on Web Design -- read about the javascript cat
Go to the top of the page
 
+Quote Post
welshstew
post Feb 18 2008, 05:09 AM
Post #3


Squeezing
***

Posts: 82
Joined: 14-February 08
From: inside the outside
you can also concatenate these into one line
CODE
background:url('/images/template/header.gif') 0 0 no-repeat;


This post has been edited by welshstew: Feb 18 2008, 05:10 AM


--------------------
WelshStew
tboards uk | xtreme wales
Go to the top of the page
 
+Quote Post
Stuart
post Feb 18 2008, 10:53 AM
Post #4


Squeezing
***

Posts: 58
Joined: 13-February 08
From: Squeezin' at the juice bar
All you need is this:
CODE
body {
margin: 20px 0;
background: #CF21F7 url('image.gif') top left no-repeat;
}

Cheers!


--------------------
Stuart :: Squeeze it up!

QUOTE
Macs can squeeze the juice out of Windows!
Go to the top of the page
 
+Quote Post
Monie
post Feb 20 2008, 02:58 AM
Post #5


Squeeze Machine
*****

Posts: 733
Joined: 13-February 08
From: Borneo
All of that is the shortcut version of what Rakuli has posted above ^


--------------------
Go to the top of the page
 
+Quote Post
thesealportaltea...
post Feb 20 2008, 09:03 AM
Post #6


Rapid Squeezer
****

Posts: 218
Joined: 14-February 08
From: Currently loacted in bustle of vurtual servers hosted by GoDaddy.com.
True, but it simplifies. So I'd go with what Rakuli has posted.


--------------------
We are sorry but complaint.hell is not registered to Heaven Inc.
TheSealPortal.com - Yea, we are celebrating are 200th post at TWS. Everybody Party.
Go to the top of the page
 
+Quote Post
Daygon
post Feb 20 2008, 04:20 PM
Post #7


Rapid Squeezer
****

Posts: 120
Joined: 13-February 08
From: Houston, Texas
as you are learning, its probably best that you write your css the long way...

background-color: #00000;
background-image: url(image.jpg);
background-position: fixed;

something like that... then when you get used to it you can do it like so...

background: #000000 url(image.jpg) fixed;

and it makes less code for you to look through when fixing validation errors or any other errors


--------------------
Jonathon Harrelson
Portfolio: InterAction Media Inc
Available for work
Go to the top of the page
 
+Quote Post
craig
post Feb 21 2008, 11:25 AM
Post #8


Fresh Squeezed
**

Posts: 30
Joined: 13-February 08
position: fixed = bad

It's not supported by Explorer 6 and lower on Windows; nor by Explorer 7 in Quirks Mode. In Strict Mode Explorer 7 supports it fine though.


--------------------
Craig Hamnett
Fast, Cheap, Good... choose two
Go to the top of the page
 
+Quote Post
JustinStudios
post Feb 21 2008, 12:39 PM
Post #9


Rapid Squeezer
****

Posts: 171
Joined: 15-February 08
From: US of A
I had to learn by doing it the long way at first, but now I use shorthand. Took me about 2 days to learn shorthand after learning CSS, so I would worry about learning CSS first. Also a lot of good programs out there have auto-complete now which will help you remember what the css tags are.


--------------------
Currently Available for work: - XTHML, CSS, Flash, Actionscript, PHP, ASP, Ajax -
interested in movies? Read some of my reviews on my blog
Go to the top of the page
 
+Quote Post
Daygon
post Feb 22 2008, 12:31 AM
Post #10


Rapid Squeezer
****

Posts: 120
Joined: 13-February 08
From: Houston, Texas
dreamweaver 8 and cs3 are the best ones for auto complete... but yes you should learn your css and make notes on the stuff you're going to use the most in case you have a "brain fart" one day and forget... it happens to all of us atleast once... i think... me... well lets say more times than i have fingers and toes


--------------------
Jonathon Harrelson
Portfolio: InterAction Media Inc
Available for work
Go to the top of the page
 
+Quote Post
Mark
post Feb 22 2008, 01:19 AM
Post #11


Don deluzione
Group Icon

Posts: 1,175
Joined: 13-February 08
From: Canada eh?
QUOTE (Daygon @ Feb 21 2008, 11:31 PM) *
dreamweaver 8 and cs3 are the best ones for auto complete... but yes you should learn your css and make notes on the stuff you're going to use the most in case you have a "brain fart" one day and forget... it happens to all of us atleast once... i think... me... well lets say more times than i have fingers and toes

Whenever I have brainfarts, I close my nose and turn to TWS.. smile.gif


--------------------
My Portfolio, Blog, Project and Twitter.
Go to the top of the page
 
+Quote Post
Stuart
post Feb 22 2008, 11:09 AM
Post #12


Squeezing
***

Posts: 58
Joined: 13-February 08
From: Squeezin' at the juice bar
Yeah, stick with the basics, then move on to shorthand. It's like juggling, you need to start with the basic juggling moves, and then move on to learning tricks and whatnot. The tricks wont help you much, however, if you didn't start from the beginning and can't even do a basic juggle. Hope that makes sense biggrin.gif


--------------------
Stuart :: Squeeze it up!

QUOTE
Macs can squeeze the juice out of Windows!
Go to the top of the page
 
+Quote Post
« Next Oldest · CSS · Next Newest »
 
If you found The Web Squeeze to be helpful, please donate so we can keep this site FREE, FRESH, and fortified with Web Design & Development info!
 Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 

Collapse

> Similar Topics

    Topic Title Replies Topic Starter Views Last Action
No new   16 unitedcraig 510 20th February 2008 - 07:34 AM
Last post by: unitedcraig
No New Posts   5 shammy2007 411 17th February 2008 - 12:57 AM
Last post by: Jacob
No New Posts   13 Antti 358 18th February 2008 - 12:51 PM
Last post by: thesealportalteam
No New Posts   11 unitedcraig 486 20th February 2008 - 02:48 AM
Last post by: Monie
No New Posts   6 thesealportalteam 355 25th February 2008 - 02:30 PM
Last post by: thesealportalteam