Results 1 to 2 of 2

Thread: How to resize the image in order to fit the parent div

  1. #1
    Join Date
    May 2017
    Posts
    1
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default How to resize the image in order to fit the parent div

    Hi. I want to ask about resize image. I use image by before pseudo
    HTML Code:
    h2::before {
    content: url("image.png")
    }
    But the image is bigger than its parent div tag. And if i use the
    HTML Code:
    autoflow:auto;
    then a scrollbar appears . I tried resize image by using width and height but nothing happens.

  2. #2
    Join Date
    Nov 2006
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,072
    Thanks
    1
    Thanked 203 Times in 199 Posts

    Default

    Hi there meomeoconmeo,

    and a warm welcome to these forums.

    I would suggest that you try it like this...


    Code:
    
    <style media="screen">
    h2 {
        background-image: url(image.png);
        background-size: auto 100%;
        background-repeat: no-repeat;
        text-indent: 2em; /* adust this value to suit */
     }
    </style>
    If you do not want the "background-image" to be 100% of the "h2 element's"
    height then you may need to use "background-position" values as well.

    coothead
    ~ the original bald headed old fart ~

  3. The Following User Says Thank You to coothead For This Useful Post:

    meomeoconmeo (06-14-2017)

Similar Threads

  1. resize area map with image resize
    By gib65 in forum HTML
    Replies: 2
    Last Post: 12-01-2015, 02:10 PM
  2. Container & Image resize on browser resize
    By mickkmg in forum JavaScript
    Replies: 0
    Last Post: 06-11-2012, 11:59 AM
  3. Replies: 3
    Last Post: 02-21-2012, 11:03 AM
  4. Replies: 2
    Last Post: 01-23-2010, 12:25 AM
  5. How to reference parent layer of image?
    By toastie in forum JavaScript
    Replies: 7
    Last Post: 01-29-2005, 11:30 AM

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
  •