CODEWITHSUNDEEP
htmlcss
alias51
alias51

Reputation: 8618

How to tile background image right to left

I have the following background image: enter image description here

I want to use this as a background for a div, but to be placed at the bottom of the div and only to tile left to right, and not top to bottom. In addition, I want the background colour to the div to be #e4e5e6, so the colour shows through where the transparent blocks are.

Here is my start:

HTML

<div class="tiles"></div>

CSS

 .tiles {
   width:100%;
   height:400px;
   background-color: #e4e5e6;
   background: url('tiles-bg.png') bottom left fixed ;
   background-repeat: repeat-x;
 }

However, this approach centers the image in the center and still tiles top to bottom. It also fails to show the background color.

Upvotes: 0

Views: 1850

Answers (2)

Sebsemillia
Sebsemillia

Reputation: 9476

Try putting all background related properties into one declaration, like this:

.tiles {   
   width: 100%;
   height: 400px;
   background: #e4e5e6  url('tiles-bg.png') bottom left repeat-x;
 }

Working Fiddle

Upvotes: 1

Aziz
Aziz

Reputation: 171

for background propities, you should use somthing like this: 

background: #e4e5e6 url('tiles-bg.png') bottom left fixed repeat-x;

You see, propeties "background" - is general, and when you use background-color, then after background, you turn off the property for background-color.

Upvotes: 0

Related Questions