Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Page 1 of 2 1 2 LastLast
Results 1 to 10 of 13
  1. #1
    Junior Member stelvis's Avatar
    Join Date
    May 2004
    Location
    Gulset, Skien, Norway
    Posts
    19
    Member #
    6102
    Im using css without tables, and i am wondering how to insert images with just css. Anyone?
    Less is more!
    My site:
    http://pedersen.port5.com/

  2.  

  3. #2
    Senior Member karinne's Avatar
    Join Date
    Dec 2003
    Location
    Aylmer QC Canada
    Posts
    1,607
    Member #
    4335
    Liked
    8 times
    as a background or just an image!?

    just an image it's same way as it always been... with html!? <img src="image.gif" />
    [a web design portfolio - Currently NOT AVAILABLE for work | web design | Re-coding | PSD-to-HTML]
    I'm also on: virb - facebook - twitter - flickr - del.icio.us

  4. #3
    Senior Member Trico's Avatar
    Join Date
    Feb 2004
    Location
    Nottingham, UK
    Posts
    894
    Member #
    5081
    Code:
    <div style="background: url('images/picture.gif') no-repeat;">&nbsp;</div>
    Or


    Code:
    ...<head>
    <style type="text/css">
    .image { background: url('images/picture.gif') no-repeat; }
    </style>
    </head>...
    
    <div class="image">&nbsp;</div>

  5. #4
    Senior Member karinne's Avatar
    Join Date
    Dec 2003
    Location
    Aylmer QC Canada
    Posts
    1,607
    Member #
    4335
    Liked
    8 times
    ^ if you know the width and height of your image, you can put them in the css and you wouldn't have to put &nbsp; so... for example, if you image as : width of 235px and height of 95px

    Code:
    <div style="background: url('images/picture.gif') no-repeat; width: 235px; height: 95px;"></div>
    or

    Code:
    ...<head>
    <style type="text/css">
    .image {
      background: url('images/picture.gif') no-repeat;
      width: 235px;
      height: 95px;
    }
    </style>
    </head>...
    
    <div class="image"></div>
    [a web design portfolio - Currently NOT AVAILABLE for work | web design | Re-coding | PSD-to-HTML]
    I'm also on: virb - facebook - twitter - flickr - del.icio.us

  6. #5
    Senior Member glyakk's Avatar
    Join Date
    Nov 2003
    Location
    USA
    Posts
    1,263
    Member #
    3828
    Liked
    6 times
    FYI:
    A big problem with using images as a background through css is you cannot specify alternate text.

    However a great advantage is it does make your images that much harder to 'steal'.


  7. #6
    Senior Member karinne's Avatar
    Join Date
    Dec 2003
    Location
    Aylmer QC Canada
    Posts
    1,607
    Member #
    4335
    Liked
    8 times
    Quote Originally Posted by glyakk
    FYI:
    A big problem with using images as a background through css is you cannot specify alternate text.
    it was like that with html background attribute as well!? wehy should that be a concern now with css?
    [a web design portfolio - Currently NOT AVAILABLE for work | web design | Re-coding | PSD-to-HTML]
    I'm also on: virb - facebook - twitter - flickr - del.icio.us

  8. #7
    Senior Member glyakk's Avatar
    Join Date
    Nov 2003
    Location
    USA
    Posts
    1,263
    Member #
    3828
    Liked
    6 times
    Because with css you can embed a background image into almost anything, so more images are getting embedded into various elements that would normally not hold an image. So with css you get more images that are 'hidden' from text browsers, screen readers, etc.. because there is no way to specify alternate text for images used as ackgrounds. dont get me wrong I think the ability to specify background images is great, I use it all the time. I just wish you could specify alternate text.

    With html, only a few elements(depending on browser) could accept images as backgrounds. And that was normally reserved for main background images, and such. So that meant most images would have be included in the HTML, witch ment they could have alternate text, even though many didn't.

    So my approach is this.. if an image has to do with the style of the site, and/or will not take away content value from the site if it were not there, if I can, I use it as a background. But if the Image is important to the content, I will include it in the html so I can specify alternate text, and generally allow my users to be able to interact with the image better.

    My point was to inform that this is the case and for people reading this to keep it in mind when they are desiging their sites.


  9. #8
    Senior Member karinne's Avatar
    Join Date
    Dec 2003
    Location
    Aylmer QC Canada
    Posts
    1,607
    Member #
    4335
    Liked
    8 times
    well... if people are concened with screen reader and such you can still add text to the image and add a display: none style to it.

    that's what i did with my banner here the h1 has a display: none property.
    [a web design portfolio - Currently NOT AVAILABLE for work | web design | Re-coding | PSD-to-HTML]
    I'm also on: virb - facebook - twitter - flickr - del.icio.us

  10. #9
    Senior Member glyakk's Avatar
    Join Date
    Nov 2003
    Location
    USA
    Posts
    1,263
    Member #
    3828
    Liked
    6 times
    Because that is not proper use of that element/property.

    Why not use an element that is still fully supported by web standards? <IMG> not like the <FONT> tag. I feel that if you are not taking advantage of the tags made avaliable to you, and trying to get one thing to act as a replacement for another, then you are doing the same thing as people who used table cells instead of <H>,<P>,<UL>,etc.. tags.

    I am not speaking to you specifically this is just a general statment. If you are going to tote web standards then you have to practice webstandards.. it is not enough to adopt some and not others and say you abide by them.

    Having said that, I do not fully abide by web standards. Yes I fully stand behind them, and use them in every project I create. But I find it difficult to abide by the rules all the time, and will sometimes ignore them to accomidate what I am working on if I cannot find a way to do it with web standards. I only stated that as an acidemic argument, not a practical way to accomplish your work.


  11. #10
    Senior Member karinne's Avatar
    Join Date
    Dec 2003
    Location
    Aylmer QC Canada
    Posts
    1,607
    Member #
    4335
    Liked
    8 times
    what!?! did i miss something!? i don't understand what you're trying to say... sorry
    [a web design portfolio - Currently NOT AVAILABLE for work | web design | Re-coding | PSD-to-HTML]
    I'm also on: virb - facebook - twitter - flickr - del.icio.us


Page 1 of 2 1 2 LastLast

Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 09:14 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com