# Resize image with CSS, without CSS3?



## OnePostWonder (Feb 20, 2013)

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.


----------



## Disparia (Feb 20, 2013)

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


----------



## Bot (Feb 20, 2013)

you can also define the height and/or width for the image itself

```
<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)

Thank you both for your replies.



Jizzler said:


> 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.


```
<div id="headContainer"
<h1></h1>
</div>
```


```
#headContainer {
border: 5px solid #000000;
margin: 5px;
padding: 5px;

}

h1 {
/*
width: 200px;
height: 200px;
*/
background: #000000 url("image.png") no-repeat;

}
```


----------



## Disparia (Feb 21, 2013)

An example without explicit height, if the img is next to your content:


```
#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>
```







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)

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)

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


----------



## digibucc (Feb 23, 2013)

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)

I posted some code in post #4, but here's more if it's needed.

*CSS:*

```
#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:*

```
<body>
<div id="center">
	<div id="headContainer">
		<h1></h1>
	</div>
	<div id="linkContainer">
	</div>
</div>
</body>
```

Thanks everyone for helping.


----------



## OnePostWonder (Feb 24, 2013)

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)

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)

digibucc said:


> 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.



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)

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


----------

