Page 1 of 2 12 Last
  • Jump to page:
    #1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2012
    Posts
    7
    Rep Power
    0

    Resize an image with HTML


    How can i resize an image with HTML? How to create a fixed background image on a web page?
  2. #2
  3. Code Monkey V. 0.9
    Devshed Regular (2000 - 2499 posts)

    Join Date
    Mar 2005
    Location
    A Land Down Under
    Posts
    2,117
    Rep Power
    1990
    Originally Posted by ooffrrttjaaj
    How can i resize an image with HTML?
    You can't truly resize an image with only HTML. You can set the images width and height to be different to what it really is using attributes, or CSS. As am example, you can scale a 200 x 100 pixel image to 100 x 50 pixels by doing this:
    Code:
    <img src="image.jpg" width="100" height="50" alt="My image" />
    Just remember to keep the same ratio on width and height or the image will be displayed distorted.

    Originally Posted by ooffrrttjaaj
    How to create a fixed background image on a web page?
    With CSS. There's an attribute of background-attachment that you can set to 'fixed' and it will stay where it is.
  4. #3
  5. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2012
    Location
    India
    Posts
    40
    Rep Power
    0

    Image with HTML


    type in notepad the html code upto </head>, while using body tag use background attribute <body background="path/img.jpg" height="100" width="50">
  6. #4
  7. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,127
    Rep Power
    4304
    Originally Posted by swapnil7
    type in notepad the html code upto </head>, while using body tag use background attribute <body background="path/img.jpg" height="100" width="50">
    The background attribute is obsolete and there have never been a height nor a width attribute for the body element.
    Spreading knowledge, one newbie at a time.

    Check out my blog. | Learn CSS. | PHP includes | X/HTML Validator | CSS validator | Common CSS Mistakes | Common JS Mistakes

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).
  8. #5
  9. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2012
    Posts
    1
    Rep Power
    0

    image attributes


    You can give image attributes width and height to img tag for scaling image like <img src="imagepath" width="100" height="100" />
  10. #6
  11. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2012
    Location
    Chennai
    Posts
    10
    Rep Power
    0
    To resize the image using <img src="PATH" width="200" height="124">
  12. #7
  13. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jun 2012
    Posts
    48
    Rep Power
    3
    Are you looking for a full-screen fixed background image? Check out this article? http://css-tricks.com/perfect-full-page-background-image/

    If you are simply looking to have a repeating background that is fixed, adding this to your stylesheet should help:

    Code:
    body {
        background-attachment:fixed;
    }
    Should do the trick.
  14. #8
  15. For POny!
    Devshed Newbie (0 - 499 posts)

    Join Date
    Apr 2012
    Location
    Amsterdam
    Posts
    416
    Rep Power
    115
    Originally Posted by ooffrrttjaaj
    How can i resize an image with HTML? How to create a fixed background image on a web page?
    ALthough its possible you really should not do this.
    2 reasons:
    #1 separate style from content
    #2 you are loading more info than needed if you size it down or you get crappy looking images if you make it larger.

    ->optimise you images for their use.
  16. #9
  17. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jun 2012
    Posts
    48
    Rep Power
    3
    Originally Posted by ashish1264
    You can give image attributes width and height to img tag for scaling image like <img src="imagepath" width="100" height="100" />
    Originally Posted by arunt
    To resize the image using <img src="PATH" width="200" height="124">
    These two have raised an interesting point, as well. Some would contend that you should never use the method they suggested; instead, you should always define the width/height via CSS, such as:

    Code:
    <img src="images/example.jpg" style="width: 100px; height: 100px;" />
    
    // or using an ID or class, of course
    Some people think there are very valid reasons for using the actual HTML attributes, though. Check out the top answer in this question, I think gWiz does a good job covering the topic.

    http://stackoverflow.com/questions/2...utes-or-in-css
  18. #10
  19. For POny!
    Devshed Newbie (0 - 499 posts)

    Join Date
    Apr 2012
    Location
    Amsterdam
    Posts
    416
    Rep Power
    115
    Its true that giving the dimensions in html can give a speed advantage. (although that is very minimal) Although I do not recommend using this to resize images.
    Last edited by aeternus; September 30th, 2012 at 08:05 AM.
  20. #11
  21. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Mar 2013
    Posts
    1
    Rep Power
    0
    Change the image background in HTML, take this code in consideration:
    <body bgcolor="#000000">
    <body bgcolor="rgb(0,0,0)">
    <body bgcolor="black">
  22. #12
  23. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Mar 2013
    Location
    Lahore, Pakistan
    Posts
    7
    Rep Power
    0
    This was nice post and people replied well. I am a begginer in HTML and CSS and in future I will be learning PHP Java script. So thanks for this post and replies to all peoplle.
  24. #13
  25. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,127
    Rep Power
    4304
    Originally Posted by aeternus
    Its true that giving the dimensions in html can give a speed advantage. (although that is very minimal)
    Perhaps "speed advantage" is not the best way to describe the benefit of specifying height and width on an <img>. It's more of a way to reduce the amount of shifting of a page's contents as it renders before being fully loaded. A slow loading image can cause a large amount of a page to shift when the page is "re-flowed".

    Originally Posted by VincentDICOM
    Change the image background in HTML, take this code in consideration:
    <body bgcolor="#000000">
    <body bgcolor="rgb(0,0,0)">
    <body bgcolor="black">
    Like the background attribute, the bgcolor attribute is also obsolete. You should use CSS instead.
    Spreading knowledge, one newbie at a time.

    Check out my blog. | Learn CSS. | PHP includes | X/HTML Validator | CSS validator | Common CSS Mistakes | Common JS Mistakes

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).
  26. #14
  27. No Profile Picture
    Permanently Banned
    Devshed Newbie (0 - 499 posts)

    Join Date
    Apr 2013
    Location
    Ludhiana
    Posts
    33
    Rep Power
    0
    You can define the size of the image you want to define within the tag itself or in its CSS. for example:

    <img src="#" width="50%" />

    or

    <img src="#" width="100px" height="50px">

    or in its CSS:

    img{
    width: 300px;
    height: 100px;
    }

    Where # is the path of the image. While defining the size of an image, you can use pixels or percentage. If you define the size of any one of the width or height, the other will automatically be re-sized in fixed proportion. If you would like the size of both to be different, simply define them directly.

    To set the background image to be fixed, you can use the background-attachment CSS attribute and set it to be fixed.
  28. #15
  29. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Apr 2013
    Posts
    5
    Rep Power
    0
    Hello ooffrrttjaaj,

    Setting the height and width via HTML (or CSS) only changes the way the image is displayed, it is not a true resize. The browser will still load the image at its full, unmodified size and then fit it to the size specified. It is best to create the image at the size you plan to use it using image editing software.

    If you insist on editing an image via HTML, however you would do so in the img tag itself like this:

    Code:
    <img src="image-name.png" height="800" width="600">
    For a background image in particular, you want to do that in the CSS file:

    Code:
    body
    { 
    background-image:url('image.png');
    background-size:800px 600px;
    }
    For your fixed background image, you want to have it set in your CSS file. Set the following code (background-attachment:fixed;) in the particular class you assigned for your background image:
    Code:
    body
    { 
    background-image:url('image.png');
    background-size:800px 600px;
    background-attachment:fixed;
    }
Page 1 of 2 12 Last
  • Jump to page:

IMN logo majestic logo threadwatch logo seochat tools logo