Menu
I need some help.
Here's what I'm getting right now: img ref
I need the gradient to stretch itself vertically using CSS.
Here's the code for my CSS + HTML.
<html>
<head>
<title>Test Site 1 - Color Palettes and Scheme Test</title>
<link rel="stylesheet" href="TestSiteCSS.css" type="text/css">
</head>
<body>
<div class="Content">
<img src="Logo.png" alt="Logo MiCompra" />
<H1>Bienvenidos a MiCompra!</H1>
<p>Bienvenidos a MiCompra. Compre lo que quiera, cuando quiera.</p>
<p>Bienvenidos a MiCompra. Compre lo que quiera, cuando quiera.</p>
<p>Bienvenidos a MiCompra. Compre lo que quiera, cuando quiera.</p>
<p>Bienvenidos a MiCompra. Compre lo que quiera, cuando quiera.</p>
<p>Bienvenidos a MiCompra. Compre lo que quiera, cuando quiera.</p>
<p>Bienvenidos a MiCompra. Compre lo que quiera, cuando quiera.</p>
<p>Bienvenidos a MiCompra. Compre lo que quiera, cuando quiera.</p>
<p>Bienvenidos a MiCompra. Compre lo que quiera, cuando quiera.</p>
<p>Bienvenidos a MiCompra. Compre lo que quiera, cuando quiera.</p>
<p>Bienvenidos a MiCompra. Compre lo que quiera, cuando quiera.</p>
<p>Bienvenidos a MiCompra. Compre lo que quiera, cuando quiera.</p>
<p>Bienvenidos a MiCompra. Compre lo que quiera, cuando quiera.</p>
<p>Bienvenidos a MiCompra. Compre lo que quiera, cuando quiera.</p>
<p>Bienvenidos a MiCompra. Compre lo que quiera, cuando quiera.</p>
<p>Bienvenidos a MiCompra. Compre lo que quiera, cuando quiera.</p>
<p>Bienvenidos a MiCompra. Compre lo que quiera, cuando quiera.</p>
<p>Bienvenidos a MiCompra. Compre lo que quiera, cuando quiera.</p>
</div>
</body>
</html>
/Separete CSS file/
body
{
background-image: url("TestPatternClouds.png");
background-repeat: repeat;
margin: auto;
width: 780px; /* or other value */
}
.Content
{
margin: auto;
width: 780px; /* or other value */
/*background-color: #4AD0EB;*/
background-image: url("TestContentBackground.png");
back
}
417
You can't stretch it. What you can do, though, is change its background-repeat to repeat-x and set a background colour equal to the color of the bottom of the image. This'll display the gradient only once vertically, then display a solid colour with no seam between the two
181
The CSS3 background-size property will allow you to specify a percentage for a background image's height, but until it's widely supported there's no way to do this directly.
ceejayoz's suggestion is probably your best bet; and if you use a really tall gradient the effect won't be all that noticeable (I've used the same technique on several pages I've designed).
36
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
