Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Background image stretch y-axis only, keep repeat-x

I have an image set as a background image of a div. The DIV size is changing and inside their is the image which is a gradient.

CSS:

#scroller_shadow{     background-image:url(../img/ui/shadow.png);     background-repeat:repeat-x;        background-position:top; } 

I need a cross-browser solution for making the image fit the height of the div in the y-axis only, keeping the repeat-x. The DIV is being resized dynamically via JQuery.

Their might be a cross-browser option using JQuery. I don't mind using scripts to achieve that in order to get cross-browser support (IE7+). I don't want to stretch the image because it loses the intensity when you stretch the image on the x-axis, making a semi-transparent png image almost transparent.

Thanks.

like image 716
Idan Shechter Avatar asked Mar 01 '13 15:03

Idan Shechter


People also ask

Can you repeat background image only vertically?

The background-repeat CSS property sets how background images are repeated. A background image can be repeated along the horizontal and vertical axes, or not repeated at all.

What will the repeat y background-repeat value do?

repeat-y: This property is used to set the background image repeated only vertically.

How do I stop background image repetition?

To make a background image not repeat in HTML, specify no-repeat in the background-repeat property or the background shorthand property. The background image is set to 'no-repeat' using the 'background-repeat' property. The above example uses the background-repeat property to set the image to no-repeat .

Which of the following can help repeat background image just once horizontally and vertically?

The background-repeat property in CSS is used to repeat the background image both horizontally and vertically. It also decides whether the background-image will be repeated or not. Background-repeat: This property is used to repeat the background image both horizontally and vertically.


1 Answers

I had this problem too. It's easy in most browsers, but IE8 and below it's tricky.

Solution for modern (anything not IE8 and below) browsers:

#scroller_shadow {     background: url(../img/ui/shadow.png) center repeat-x;     background-size: auto 100%; } 

There are jQuery plugins that can mimic background-size for IE8 and below, specifically backgroundSize.js but it doesn't work if you want it to repeat.

Anyways thus begins my terrible hack:

<div id="scroller_shadow">     <div id="scroller_shadow_tile">         <img src="./img/ui/shadow.png" alt="" >         <img src="./img/ui/shadow.png" alt="" >         <img src="./img/ui/shadow.png" alt="" >         ...         <img src="./img/ui/shadow.png" alt="" >     </div> </div> 

Make sure to include enough <img>'s to cover the area needed.

CSS:

#scroller_shadow {     width: 500px; /* whatever your width is */     height: 100px; /* whatever your height is */     overflow: hidden; }  #scroller_shadow_tile {     /* Something sufficiently large, you only to make it unreasonably wide if the width of the parent is dynamic. */     width: 9999px;     height: 100%; }  #scroller_shadow_tile img {     height: 100%;     float: left;     width: auto; } 

Anyways, the idea is to create the stretch effect from the images.

JSFiddle.

like image 125
Bella Avatar answered Oct 21 '22 13:10

Bella