SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Guru navyfalcon's Avatar
    Join Date
    Jul 2007
    Location
    So California, Los Angeles county, USA
    Posts
    719
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)

    image width and height

    In html I use:
    <img src="Images/tuolumne-meadows1.jpg" width="756" height="162" align="bottom">

    I tried several ways in CSS; example:
    #header1 { text-align: center; border: 1px solid darkblue; background: url(../Images/tuolumne-meadows1.jpg) no-repeat; width:756px; height:160px }

    all it did was change the size of the box (or area to put the picture in and no control over the size of the picture). I reduced the picture resolution for the biggest screen without loss of picture quality, but how do I control the picture size with CSS like in HTML so the changing of the screen size won't give picture quality loss ??
    The picture is on the index page, but now the page is in tables and I am trying to change to CSS.
    Thank you for your time and information
    falcon
    Many good Free Tutorials at:
    http://freetutorials.name

  2. #2
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,478
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    A quick and dirty way would be to use a percentage.

    Oh, and you don't need that align="bottom" attribute on your image either. Simply setting vertical-align: bottom; on all images in your stylesheet will do the same thing (while you're at it, killing all image borders would be a good idea too).

  3. #3
    SitePoint Guru navyfalcon's Avatar
    Join Date
    Jul 2007
    Location
    So California, Los Angeles county, USA
    Posts
    719
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)

    image width and height

    #header1 { text-align: center; border: 1px solid darkblue; background: url(../Images/tuolumne-meadows1.jpg) no-repeat; width:100%; height:20%; }

    I changed to percent and uploaded the css file and the index file. It doesn't seem to effect the picture ??
    The width had an effect on my computer but not on the site, the height had no effect. I uploader the picture and the changed css file. I changed back to the tables.
    This is the area that is of concern:

    #header1 {
    text-align: center;
    border: 1px solid darkblue;
    background: url(../Images/tuolumne-meadows1.jpg) no-repeat;
    Width: 100%; height: 20%;
    }
    #header1 b {
    display: block;
    min-height: 120px;
    background-repeat: no-repeat;
    font-weight: normal;
    }

    Thank you for your time and efforts
    falcon
    Many good Free Tutorials at:
    http://freetutorials.name

  4. #4
    SitePoint Zealot
    Join Date
    Mar 2006
    Location
    UK
    Posts
    103
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by navyfalcon View Post
    In html I use:
    <img src="Images/tuolumne-meadows1.jpg" width="756" height="162" align="bottom">

    I tried several ways in CSS; example:
    #header1 { text-align: center; border: 1px solid darkblue; background: url(../Images/tuolumne-meadows1.jpg) no-repeat; width:756px; height:160px }
    Looks like your trying to control the size of a background image with css?

    To just display an image and change its size use something like

    <img src="imageurl" class="myimage">

    .myimage
    {
    width: 756px;
    height 160px;
    }

    Not sure if thats what your after exactly?

  5. #5
    SitePoint Guru navyfalcon's Avatar
    Join Date
    Jul 2007
    Location
    So California, Los Angeles county, USA
    Posts
    719
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Mezzi View Post
    Looks like your trying to control the size of a background image with css?

    To just display an image and change its size use something like

    <img src="imageurl" class="myimage">

    .myimage
    {
    width: 756px;
    height 160px;
    }

    Not sure if thats what your after exactly?
    Yes, that is what I am trying to do.
    I will try it. Thank You
    falcon
    Many good Free Tutorials at:
    http://freetutorials.name


Bookmarks

Posting Permissions

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