1. Welcome to TechPowerUp Forums, Guest! Please check out our forum guidelines for info related to our community.

Resize image with CSS, without CSS3?

Discussion in 'Programming & Webmastering' started by OnePostWonder, Feb 20, 2013.

  1. OnePostWonder

    Joined:
    Dec 27, 2008
    Messages:
    582 (0.27/day)
    Thanks Received:
    107
    For compatibility reasons, I want to steer clear of of CSS3.

    I've defined the <h1> tag in the stylesheet to have a background image. I tried giving this a go in its own <div>, to no avail.

    The HTML has the <h1> tag nested in a <div> tag, but instead of the image displaying, it just collapses down to 5px, the padding of the header.

    These are two separate issues:

    1. The image isn't displaying
    2. I'd like for the image to fill the <h1> box, which in turn fills part of the header.

    I know I didn't write this in the most readable fashion, so if a copy-paste of the CSS and HTML is necessary, I can provide it.
     
  2. Jizzler

    Jizzler

    Joined:
    Aug 10, 2007
    Messages:
    3,430 (1.30/day)
    Thanks Received:
    639
    Location:
    Geneva, FL, USA
    Put a fixed height on the h1 tag? Browser won't expand the box for background image.
     
  3. Bot

    Bot

    Joined:
    Apr 14, 2009
    Messages:
    584 (0.29/day)
    Thanks Received:
    105
    you can also define the height and/or width for the image itself
    Code:
    <div>
     <h1>
      <img src="path/image.jpg" height="100px" width="400px"/>
     </h1>
    </div>
    
    edit: you can also use percentages like: height="100%"
     
    OnePostWonder says thanks.
  4. OnePostWonder

    Joined:
    Dec 27, 2008
    Messages:
    582 (0.27/day)
    Thanks Received:
    107
    Thank you both for your replies.

    I would've put a fixed height on <h1>, but I was hoping there would be a way to get it to conform to the size of the image.

    Code:
    <div id="headContainer"
    <h1></h1>
    </div>
    
    Code:
    #headContainer {
    border: 5px solid #000000;
    margin: 5px;
    padding: 5px;
    
    }
    
    h1 {
    /*
    width: 200px;
    height: 200px;
    */
    background: #000000 url("image.png") no-repeat;
    
    }
    
     
  5. Jizzler

    Jizzler

    Joined:
    Aug 10, 2007
    Messages:
    3,430 (1.30/day)
    Thanks Received:
    639
    Location:
    Geneva, FL, USA
    An example without explicit height, if the img is next to your content:

    Code:
    #head {
    	border:5px solid #000;
    	margin:5px;
    	padding:5px;
    }
    
    #head img, #head h1 {
    	display:inline-block;
    	vertical-align:middle;
    }
    
    <div id="head">
    	<img alt="" src="image.png"/>
    	<h1>Welcome to my page!</h1>
    </div>
    [​IMG]

    Now if it truly is a background image, where text or other content needs to go over it, I'd just specify the height.
     
    OnePostWonder says thanks.
  6. OnePostWonder

    Joined:
    Dec 27, 2008
    Messages:
    582 (0.27/day)
    Thanks Received:
    107
    It's not a background image, but in my reading, I was given the impression this was the only practical way to manipulate without making use of CSS3.

    Right now I'm mainly stuck on why the box collapses in and the image isn't visible. Doesn't the box automatically know it's there? It's nested in the div that is the box.
     
  7. Bot

    Bot

    Joined:
    Apr 14, 2009
    Messages:
    584 (0.29/day)
    Thanks Received:
    105
    can you post some of the code that you are using right now?
     
  8. digibucc

    digibucc

    Joined:
    May 21, 2009
    Messages:
    4,923 (2.49/day)
    Thanks Received:
    1,493
    i wouldn't muck with the h1 size if it's not necessary. i would include an additional div with a static height. inside that put the h1 and the image. you only need h1 if you are putting text there, if it's only the image forget the h1 and put the image directly in the sized div.
     
    OnePostWonder says thanks.
  9. OnePostWonder

    Joined:
    Dec 27, 2008
    Messages:
    582 (0.27/day)
    Thanks Received:
    107
    I posted some code in post #4, but here's more if it's needed.

    CSS:
    Code:
    #center {
    background: #FFFFFF;
    border: 10px solid #000000;
    width: 600px;
    height: 900px;
    margin: auto;
    
    }
    
    #headContainer {
    border: 5px solid #000000;
    margin: 5px;
    padding: 5px;
    
    }
    
    /*For logo in div*/
    #logo {
    background: #000000 url("image.png") no-repeat top center;
    width: 100%;
    height: 100%;
    }
    
    h1 {
    background: #000000 url("image.png") no-repeat;
    
    }
    
    #linkContainer {
    border: 5px solid #000000;
    margin: 5px;
    width: auto;
    height: 30px;
    
    }
    
    HTML:
    Code:
    <body>
    <div id="center">
    	<div id="headContainer">
    		<h1></h1>
    	</div>
    	<div id="linkContainer">
    	</div>
    </div>
    </body>
    
    Thanks everyone for helping.
     
  10. OnePostWonder

    Joined:
    Dec 27, 2008
    Messages:
    582 (0.27/day)
    Thanks Received:
    107
    This is pretty informative:

    CSS Wizardry

    After reading that, I'll probably end up using <img>. I think in some way I always saw this as the only proper solution.

    I do want to see if this can work though, and moreover I'd like to understand why <h1> doesn't recognize an image is there (which may be a limitation of the markup).

    In other words, not solved yet, but close!

    Additional reference: CSS Tricks
     
  11. digibucc

    digibucc

    Joined:
    May 21, 2009
    Messages:
    4,923 (2.49/day)
    Thanks Received:
    1,493
    well h1 is a designator for text headers, it was never meant to contain images. the only time i can think of that it MIGHT be necessary is for bullet point images, but you should do that with a ul anyway.

    h1 is for text, not images.
     
  12. dunnmelaniej New Member

    Joined:
    Jan 16, 2013
    Messages:
    17 (0.03/day)
    Thanks Received:
    5
    Yeah absolutely. But what I've figured out is that people try to do so for search engine benefits However as per my research search engine can have negative effects as well for the same as they can now figure out where these tags are required to be used and where not.
     
    digibucc says thanks.
  13. digibucc

    digibucc

    Joined:
    May 21, 2009
    Messages:
    4,923 (2.49/day)
    Thanks Received:
    1,493
    yeah especially google, don't try and trick google because they are smart and they'll catch you.
     

Currently Active Users Viewing This Thread: 1 (0 members and 1 guest)

Share This Page