CODEWITHSUNDEEP
htmlcsswebhtml5boilerplate
gman
gman

Reputation: 19

Using CSS/HTML to build background?

Guys I have been trying lots of different options from cutting up to building in html/css. nothing seems to really work :(

How would you guys go about doing this ?

Link:- http://www.flickr.com/photos/gavinwynne/6902590869/

Upvotes: 0

Views: 505

Answers (2)

Kypros
Kypros

Reputation: 2986

One of the most common ways about doing it would be to cut the image in 3 pieces as shown in the below picture:

enter image description here

Where piece 1 would be shown first, then make piece 2 height equal to 1px and repeat it on the y axis through CSS and then put piece 3 at the bottom in order to "close" the container

Your html could be in the form of:

<div class="div_top"></div>

<div class="div_middle"> your content here </div>

<div class="div_bottom"></div>

Update

Css would be something similar to this :

 .div_top { 
      background-image:url('top_bg.jpg');
      background-repeat:no-repeat;
      width:800px;
  }

 .div_middle { 
      background-image:url('middle_bg.jpg');
      background-repeat:repeat-y;
      width:800px;
  }

 .div_bottom { 
      background-image:url('bottom_bg.jpg');
      background-repeat:no-repeat; 
      width:800px;
  }

You'd probably want to set a fixed height for your top and bottom divs, since they have no content and wont actually expand to show the background image.

Upvotes: 2

Brigand
Brigand

Reputation: 86240

The simplest way is to use a thick border and a inset box shadow. Browser support is somewhat limited, though. It basically comes down to IE9+ and modern browsers (ref).

demo

body {
    min-height: 300px;
    border: 24px solid #666;
    box-shadow:inset 0px 0px 30px rgba(0,0,0,.5);
    -webkit-box-shadow:inset 0px 0px 30px rgba(0,0,0,.5);
    -moz-box-shadow:inset 0px 0px 30px rgba(0,0,0,.5);
    padding: 35px;
}

demo screen shot

Upvotes: 2

Related Questions