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

Resize image with CSS, without CSS3?

Joined
Dec 27, 2008
Messages
587 (0.11/day)
System Name PC
Processor i5 2500k
Motherboard P8Z68-V PRO/GEN3
Cooling Fans
Memory DDR3-1600 (8GB)
Video Card(s) Sapphire Nitro+ RX 580
Storage HD103SJ
Display(s) XG2402
Case Xigmatek Midgard II
Power Supply PC Power & Cooling Silencer 750W
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.
 
Joined
Aug 10, 2007
Messages
4,267 (0.70/day)
Location
Sanford, FL, USA
Processor Intel i5-6600
Motherboard ASRock H170M-ITX
Cooling Cooler Master Geminii S524
Memory G.Skill DDR4-2133 16GB (8GB x 2)
Video Card(s) Gigabyte R9-380X 4GB
Storage Samsung 950 EVO 250GB (mSATA)
Display(s) LG 29UM69G-B 2560x1080 IPS
Case Lian Li PC-Q25
Audio Device(s) Realtek ALC892
Power Supply Seasonic SS-460FL2
Mouse Logitech G700s
Keyboard Logitech G110
Software Windows 10 Pro
Put a fixed height on the h1 tag? Browser won't expand the box for background image.
 

Bot

Joined
Apr 14, 2009
Messages
594 (0.11/day)
System Name BoTBlue
Processor Intel i7-3770
Motherboard Intel DQ77MK
Cooling Corsair H80
Memory Samsung 4x4Gb
Video Card(s) ASUS GTX 470
Storage OCZ Vertex LE
Display(s) Acer
Case AthenaTech
Power Supply Corsair 850w
Software Win 7 Pro x64
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%"
 
Joined
Dec 27, 2008
Messages
587 (0.11/day)
System Name PC
Processor i5 2500k
Motherboard P8Z68-V PRO/GEN3
Cooling Fans
Memory DDR3-1600 (8GB)
Video Card(s) Sapphire Nitro+ RX 580
Storage HD103SJ
Display(s) XG2402
Case Xigmatek Midgard II
Power Supply PC Power & Cooling Silencer 750W
Thank you both for your replies.

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;

}
 
Joined
Aug 10, 2007
Messages
4,267 (0.70/day)
Location
Sanford, FL, USA
Processor Intel i5-6600
Motherboard ASRock H170M-ITX
Cooling Cooler Master Geminii S524
Memory G.Skill DDR4-2133 16GB (8GB x 2)
Video Card(s) Gigabyte R9-380X 4GB
Storage Samsung 950 EVO 250GB (mSATA)
Display(s) LG 29UM69G-B 2560x1080 IPS
Case Lian Li PC-Q25
Audio Device(s) Realtek ALC892
Power Supply Seasonic SS-460FL2
Mouse Logitech G700s
Keyboard Logitech G110
Software Windows 10 Pro
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.
 
Joined
Dec 27, 2008
Messages
587 (0.11/day)
System Name PC
Processor i5 2500k
Motherboard P8Z68-V PRO/GEN3
Cooling Fans
Memory DDR3-1600 (8GB)
Video Card(s) Sapphire Nitro+ RX 580
Storage HD103SJ
Display(s) XG2402
Case Xigmatek Midgard II
Power Supply PC Power & Cooling Silencer 750W
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

Joined
Apr 14, 2009
Messages
594 (0.11/day)
System Name BoTBlue
Processor Intel i7-3770
Motherboard Intel DQ77MK
Cooling Corsair H80
Memory Samsung 4x4Gb
Video Card(s) ASUS GTX 470
Storage OCZ Vertex LE
Display(s) Acer
Case AthenaTech
Power Supply Corsair 850w
Software Win 7 Pro x64
can you post some of the code that you are using right now?
 
Joined
May 21, 2009
Messages
4,966 (0.92/day)
System Name i7-PC / HTPC / iMac
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 / 4GB DDR2 1066 (@800) Corsair Dominator
Video Card(s) GB Radeon HD 7950s 3GB / GB Radeon HD 7950s 3GB
Storage 2x 80GB Intel X-25, 2x600gb SATA, 1x1tb 5400RPM storage /1x600GB, 3x500GB,1x160,1x120 SATA
Display(s) 1x 27" Yamakasi / Vizio 42" HDTV
Case Lian Li Lancool PC-K58 / Antec 900
Audio Device(s) HT Omega Striker 7.1 / Onboard and HDMI from ATi Card
Power Supply PC Power & Cooling 750W / 610W
Software Ubuntu / Windows 8.1 Pro / OS X / PHPStorm / Gaming
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.
 
Joined
Dec 27, 2008
Messages
587 (0.11/day)
System Name PC
Processor i5 2500k
Motherboard P8Z68-V PRO/GEN3
Cooling Fans
Memory DDR3-1600 (8GB)
Video Card(s) Sapphire Nitro+ RX 580
Storage HD103SJ
Display(s) XG2402
Case Xigmatek Midgard II
Power Supply PC Power & Cooling Silencer 750W
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.
 
Joined
Dec 27, 2008
Messages
587 (0.11/day)
System Name PC
Processor i5 2500k
Motherboard P8Z68-V PRO/GEN3
Cooling Fans
Memory DDR3-1600 (8GB)
Video Card(s) Sapphire Nitro+ RX 580
Storage HD103SJ
Display(s) XG2402
Case Xigmatek Midgard II
Power Supply PC Power & Cooling Silencer 750W
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
 
Joined
May 21, 2009
Messages
4,966 (0.92/day)
System Name i7-PC / HTPC / iMac
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 / 4GB DDR2 1066 (@800) Corsair Dominator
Video Card(s) GB Radeon HD 7950s 3GB / GB Radeon HD 7950s 3GB
Storage 2x 80GB Intel X-25, 2x600gb SATA, 1x1tb 5400RPM storage /1x600GB, 3x500GB,1x160,1x120 SATA
Display(s) 1x 27" Yamakasi / Vizio 42" HDTV
Case Lian Li Lancool PC-K58 / Antec 900
Audio Device(s) HT Omega Striker 7.1 / Onboard and HDMI from ATi Card
Power Supply PC Power & Cooling 750W / 610W
Software Ubuntu / Windows 8.1 Pro / OS X / PHPStorm / Gaming
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

New Member
Joined
Jan 16, 2013
Messages
17 (0.00/day)
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.
 
Joined
May 21, 2009
Messages
4,966 (0.92/day)
System Name i7-PC / HTPC / iMac
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 / 4GB DDR2 1066 (@800) Corsair Dominator
Video Card(s) GB Radeon HD 7950s 3GB / GB Radeon HD 7950s 3GB
Storage 2x 80GB Intel X-25, 2x600gb SATA, 1x1tb 5400RPM storage /1x600GB, 3x500GB,1x160,1x120 SATA
Display(s) 1x 27" Yamakasi / Vizio 42" HDTV
Case Lian Li Lancool PC-K58 / Antec 900
Audio Device(s) HT Omega Striker 7.1 / Onboard and HDMI from ATi Card
Power Supply PC Power & Cooling 750W / 610W
Software Ubuntu / Windows 8.1 Pro / OS X / PHPStorm / Gaming
yeah especially google, don't try and trick google because they are smart and they'll catch you.
 
Top