www.webdeveloper.com
Page 1 of 2 12 LastLast
Results 1 to 15 of 18

Thread: Background Image?

  1. #1
    Join Date
    Nov 2006
    Posts
    593

    Background Image?

    Hello,

    I bought this image on the web and was wondering if I could use it as a background on a webpage?

    Would I have to use major css to control the way it would be laid out? Would that be hard?

    Thanks,

    Allie
    Attached Images Attached Images

  2. #2
    Join Date
    Jan 2005
    Location
    Frankfort, KY, USA
    Posts
    6,167
    You'd have to use a fixed layout, but it wouldn't be hard.
    FYI
    * My screen resolution is set at 1680x1050
    * I'm accessing your site through a T1 line
    * I'm probably viewing it using Firefox (unless browser is specified)

  3. #3
    Join Date
    Mar 2008
    Posts
    29
    To add it as a background, place the background: url([Image URL]) in the body part of your CSS document... to structure the content around the image, use <div> elements.

    Hope this helps!
    ~David

  4. #4
    Join Date
    Nov 2006
    Posts
    593
    Thank you....I will try.

  5. #5
    Join Date
    Mar 2008
    Posts
    29

    Positioning warning...

    Be warned though... with division elements, the positioning can be an absolute pain! Use the "position: " in CSS either all with "fixed" or nested elements with "relative" and "absolute"... Good luck!

    ~David

    P.S. I have tried and failed quite a few times before I got it right

  6. #6
    Join Date
    May 2005
    Location
    Gold Coast (MS)
    Posts
    2,207

    Thumbs up

    Quote Originally Posted by grimmylina
    Hello,

    I bought this image on the web and was wondering if I could use it as a background on a webpage?

    Would I have to use major css to control the way it would be laid out? Would that be hard?

    Thanks,

    Allie
    Nice image. I recommend trying to remove the link. You purchased this image so try to keep it from being ripped off. Maybe replace image with one that has a big diagonal word COPY across it.

    That would look nice as a bg image in the wrapper div with a nice margin in, maybe, some color you like.

    #wrapper { width: 90%; margin: 1% auto; background: #fff url(book.jpg) no-repeat center fixed; }


    <div id="wrapper>

    </div>

    You can set up the text to occupy each side of the book. Looks like you have a winner there.

    Ron

  7. #7
    Join Date
    Nov 2006
    Posts
    593
    Hi,

    Thanks for the advice!! It wasn't that expensive so I don't mind sharing.

    Would you do it like this?

    http://whitelawhotel.com/allie/


    I'm new at CSS. I think I know how to do the outside container but I'm not that good with how to place the inner content so I did a table within another container. Is that bad? I wasn't sure.

    Thanks!!

    Allie

  8. #8
    Join Date
    May 2005
    Location
    Gold Coast (MS)
    Posts
    2,207
    That looks good that way. Like the outer bg. I was thinking more of setting the text just like it is in a book, but that's ok there.

    Definitely would not have used table tags though. LOL You do have so coding errors: HTML

    You are going with a XHTML 1.0 Transitional doc type so coding is a lot tighter.

    Ron

  9. #9
    Join Date
    Nov 2006
    Posts
    593
    I think Dreamweaver puts in that XTML 1.0. Is that something I should take out?

    I will fix the coding errors.....Where can I learn table tags for CSS? Is that what you mean? I really want to do that. I feel kind of sketchy mixing a table with CSS.....Like one of them is right and the other one isn't. : (

  10. #10
    Join Date
    May 2005
    Location
    Gold Coast (MS)
    Posts
    2,207
    No problem with the doc type. You are getting some errors because the code is not to XHTML 1.0 Standards. You might try Strict: Doc Types.

    There are no "table tags for CSS". You can use CSS with your table tags, but tables have been out since 1990s for use as page layouts. Should be used for tabular data when needed. CSS is for your page presentation and is the best way to go to make a nice page layout.

    Some links for tutorials:
    http://www.w3schools.com/default.asp
    http://www.htmlcodetutorial.com/
    http://html.net/tutorials/css/introduction.asp
    http://www.csstutorial.net/

    As for CSS with tables. Instead of doing this:

    <table width="100%" height="100%" border="0" align="center" cellpadding="1">

    You could do this:

    <table style="width:100%; height:100%; border:0; text-align:center; padding:1px;" summary="">

    and similarly with the other tags you have including the divs. Would be better to set up an external CSS stylesheet and use class/selectors where needed to style your pages instead of the inline styling above. It's a beginning.

    Ron

  11. #11
    Join Date
    Nov 2006
    Posts
    593
    Could I ask you something..(and maybe this has been covered in a previous thread)?

    I read that the new Dreamweaver CS3 (I have MX and I don't see it as an option so I'm assuming it's the newer version) can convert tables into layers. Is that good?

    Thanks for the links. I'm going to read them right now.

  12. #12
    Join Date
    Mar 2008
    Posts
    29

    It can be...

    If the tables are for data... this will not be very useful, however if the table is to format your page (mainly graphics), this will be very beneficial.

    It is recommended by the W3C to not use tables, instead use style sheets (and layers):

    http://www.w3.org/TR/WAI-WEBCONTENT/...e-presentation

    Hope this helps
    ~David

  13. #13
    Join Date
    Jan 2005
    Location
    Frankfort, KY, USA
    Posts
    6,167
    Quote Originally Posted by grimmylina
    Could I ask you something..(and maybe this has been covered in a previous thread)?

    I read that the new Dreamweaver CS3 (I have MX and I don't see it as an option so I'm assuming it's the newer version) can convert tables into layers. Is that good?

    Thanks for the links. I'm going to read them right now.
    I have CS3, and can say that it's really no better than MX (which I used for years). It does have the "tables to divs" conversion, but the conversion creates absolutely positioned divs, which are problems within themselves, and no different than the "layers" feature within MX. It's best to use static positioning through floats than absolute, especially if you're new to CSS and wanting a multi-resolution compliance.

    Oh, BTW -- CS3 is an even BIGGER resource hog than MX. Unless you have a really good machine, I wouldn't recommend it.

    KDLA
    FYI
    * My screen resolution is set at 1680x1050
    * I'm accessing your site through a T1 line
    * I'm probably viewing it using Firefox (unless browser is specified)

  14. #14
    Join Date
    Nov 2006
    Posts
    593
    Hi David,

    Thanks, it does. I am trying to learn CSS. I already use it for styles, fonts, etc. but for things like tables it is new for me and a little confusing.

    And then I've been reading all those css vs. html articles so it can be a little overwhelming. And I didn't know about the Dreamwever thing until yesterday so maybe investing in an upgrade to CS3 wouldn't be a bad thing.

    So are layers part of CSS or are they something totally different?

    Allie

    * Hi KDLA,

    How do you use the layers feature on MX? I didn't see it anywhere. What is an absolutely positioned div? Is that when you don't want it to move from the position like this:

    http://www.catalinahotel.com/allie/enter.html
    Last edited by grimmylina; 04-10-2008 at 08:07 AM.

  15. #15
    Join Date
    Jan 2005
    Location
    Frankfort, KY, USA
    Posts
    6,167
    Absolute positioning: http://www.yourhtmlsource.com/styles...csslayout.html

    Layers: You create them in design view. I can't remember exactly what you click on to create them (since I never used them). (Many of DW's "behaviors" are also associated with layers.) What they are, are DW-generated absolutely positioned divs, usually produced by a drag-and-drop action.

    *edit: here ya go: http://www.entheosweb.com/dreamweaver/layers.asp
    FYI
    * My screen resolution is set at 1680x1050
    * I'm accessing your site through a T1 line
    * I'm probably viewing it using Firefox (unless browser is specified)

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles