techPowerUp! Forums - Resize image with CSS, without CSS3?

techPowerUp! Forums (http://www.techpowerup.com/forums/index.php)

- Programming & Webmastering (http://www.techpowerup.com/forums/forumdisplay.php?f=52)

- - Resize image with CSS, without CSS3? (http://www.techpowerup.com/forums/showthread.php?t=180458)

OnePostWonder

Feb 20, 2013 10:22 PM

Resize image with CSS, without CSS3?

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.

Jizzler

Feb 20, 2013 10:33 PM

Put a fixed height on the h1 tag? Browser won't expand the box for background image.

Bot	Feb 20, 2013 10:48 PM

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

Feb 21, 2013 02:28 AM

Thank you both for your replies.

Quote:

Originally Posted by Jizzler (Post 2850511)

Put a fixed height on the h1 tag? Browser won't expand the box for background image.

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;



}

Jizzler

Feb 21, 2013 02:30 PM

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>

http://img.techpowerup.org/130221/onepost-header.png

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

Feb 23, 2013 03:56 AM

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.

Bot	Feb 23, 2013 02:44 PM

can you post some of the code that you are using right now?

digibucc

Feb 23, 2013 03:13 PM

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

Feb 23, 2013 07:09 PM

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.

OnePostWonder

Feb 24, 2013 05:22 AM

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

digibucc

Feb 24, 2013 03:57 PM

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.

dunnmelaniej

Mar 26, 2013 06:52 AM

Quote:

Originally Posted by digibucc (Post 2853106)

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

Mar 26, 2013 11:27 AM

yeah especially google, don't try and trick google because they are smart and they'll catch you.

All times are GMT. The time now is 09:09 AM.