Resize image with CSS, without CSS3?

OnePostWonder · Feb 20, 2013, 10:22 PM

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

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>

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

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, 11:27 AM

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

Feb 20, 2013, 10:22 PM	#1
OnePostWonder Join Date: Dec 2008 Posts: 491 (0.30/day) Thanks: 61 Thanked 90 Times in 71 Posts System Specs	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.

System Name:	New / Breakin' the Lol
Processor:	i5 2500k / Athlon64 X2 4200+ (65W)
Motherboard:	P8Z68-V PRO/GEN3 / Asus M2N4-SLI
Cooling:	/ Air (1 x 250mm, 2 x 120mm, 1 x 90mm)
Memory:	DDR3-1600 (8GB) / Crucial Ballistix Tracer PC2-6400 (2gb)
Video Card:	/ Visiontek 4870
Hard Disk:	HD103SJ /
CRT/LCD Model:	Viewsonic 22" VX2240W
Case:	Xigmatek Midgard II / Thermaltake VA8003SWA
PSU:	PC Power & Cooling Silencer 750W

Processor:	AMD FX-8120
Motherboard:	ASRock Fatal1ty 990FX Professional
Cooling:	Scythe Ninja 3
Memory:	G.Skill DDR3-1866 8GB x 2
Video Card:	Gigabyte GTX 660 2GB
Hard Disk:	Crucial M4 128GB, WD 640GB x 4, 2TB Seagate
Optical Drive:	Asus SATA DVD-RW
CRT/LCD Model:	Asus 24" HD+ (1920x1200)
Case:	Lian Li PC-A17B
Sound Card:	Onboard
PSU:	OCZ GameXtreme 700w
Software:	Windows 7 Ultimate

Feb 20, 2013, 10:48 PM	#3
Bot Join Date: Apr 2009 Location: LACA Posts: 533 (0.35/day) Thanks: 56 Thanked 103 Times in 82 Posts System Specs	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%" __________________ [ BoT's Inventory - For Sale Thread ] Codisha \| NanoLeap \| PiTime \| Reviews \| Heat

System Name:	BoTBlue
Processor:	Intel i7-3770
Motherboard:	Intel DQ77MK
Cooling:	Corsair H80
Memory:	Samsung 4x4Gb
Video Card:	ASUS GTX 470
Hard Disk:	OCZ Vertex LE
Optical Drive:	Samsung
CRT/LCD Model:	Aver
Case:	AthenaTech
PSU:	Corsair 850w
Software:	Win 7 Pro x64

Feb 20, 2013, 10:33 PM	#2
Jizzler Join Date: Aug 2007 Location: Geneva, FL, USA Posts: 3,010 (1.41/day) Thanks: 567 Thanked 606 Times in 487 Posts System Specs	Put a fixed height on the h1 tag? Browser won't expand the box for background image.

Feb 21, 2013, 02:30 PM	#5
Jizzler Join Date: Aug 2007 Location: Geneva, FL, USA Posts: 3,010 (1.41/day) Thanks: 567 Thanked 606 Times in 487 Posts System Specs	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> Now if it truly is a background image, where text or other content needs to go over it, I'd just specify the height.

Feb 23, 2013, 03:56 AM	#6
OnePostWonder Join Date: Dec 2008 Posts: 491 (0.30/day) Thanks: 61 Thanked 90 Times in 71 Posts System Specs	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.

Feb 23, 2013, 02:44 PM	#7
Bot Join Date: Apr 2009 Location: LACA Posts: 533 (0.35/day) Thanks: 56 Thanked 103 Times in 82 Posts System Specs	can you post some of the code that you are using right now? __________________ [ BoT's Inventory - For Sale Thread ] Codisha \| NanoLeap \| PiTime \| Reviews \| Heat

Feb 23, 2013, 03:13 PM	#8
digibucc Join Date: May 2009 Location: In the mountains :) Adirondacks in NY (US) Posts: 3,709 (2.49/day) Thanks: 4,547 Thanked 1,449 Times in 1,040 Posts System Specs	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. __________________ Donate to TPU TeamSpeak Server TPU TS: ts21.gameservers.com:9207 PSN / XBL / Steam = digibucc \| Origin / BF3 = digibuc

Processor:	i7 3820 / Phenom II 940
Motherboard:	GIGABYTE G1.ASSASSIN2 / M3A79-T Deluxe
Cooling:	Corsair Hydro H100i / Scythe II (HS only)
Memory:	G.SKILL Trident X Series 8GB (2 x 4GB) DDR3 1600mhz / 2GB DDR2 1066 (@800) Corsair Dominator
Video Card:	2x GB Radeon HD 7950s 3GB XFire / 5750
Hard Disk:	2x 80GB Intel X-25, 2x600gb SATA, 1x1tb 5400RPM storage /1x600GB, 3x500GB,1x160,1x120 SATA
Optical Drive:	24x cd/dvd burner
CRT/LCD Model:	1x 27" Yamakasi / Vizio 42" HDTV+22" Acer
Case:	Lian Li Lancool PC-K58 / Antec 900
Sound Card:	Creative XFI Onboard / HDMI from ATi Card
PSU:	PC Power & Cooling 750W / 610W
Software:	Windows 7 HP / PHPStorm / Gaming

Feb 24, 2013, 05:22 AM	#10
OnePostWonder Join Date: Dec 2008 Posts: 491 (0.30/day) Thanks: 61 Thanked 90 Times in 71 Posts System Specs	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

Feb 24, 2013, 03:57 PM	#11
digibucc Join Date: May 2009 Location: In the mountains :) Adirondacks in NY (US) Posts: 3,709 (2.49/day) Thanks: 4,547 Thanked 1,449 Times in 1,040 Posts System Specs	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. __________________ Donate to TPU TeamSpeak Server TPU TS: ts21.gameservers.com:9207 PSN / XBL / Steam = digibucc \| Origin / BF3 = digibuc

Mar 26, 2013, 11:27 AM	#13
digibucc Join Date: May 2009 Location: In the mountains :) Adirondacks in NY (US) Posts: 3,709 (2.49/day) Thanks: 4,547 Thanked 1,449 Times in 1,040 Posts System Specs	yeah especially google, don't try and trick google because they are smart and they'll catch you. __________________ Donate to TPU TeamSpeak Server TPU TS: ts21.gameservers.com:9207 PSN / XBL / Steam = digibucc \| Origin / BF3 = digibuc

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

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
HTML/CSS - Background Image vs. Color?	OnePostWonder	Programming & Webmastering	15	Feb 20, 2013 10:09 PM
Stuck with css coding	freaksavior	Programming & Webmastering	16	Oct 6, 2011 06:19 PM
Why does saving an image without changing anything in Paint reduce size drastically?	Black Panther	General Software	20	Jul 4, 2011 04:04 PM
Help with CSS needed	silkstone	Games	7	Jan 22, 2011 12:49 PM
The cheapest way to connect an PS2 to an LCD monitor without losing image quality.	kid41212003	Games	3	Aug 24, 2009 04:01 PM