CODEWITHSUNDEEP
cssimagebackground
Jess McKenzie
Jess McKenzie

Reputation: 8385

CSS background Image -> Using an image

I am using the image below but I am using it as it is and it is not taking up the 100% of the screen.

I have thought of the following options but I would appreciate some advice on what to do:

  1. Create a tile of the wood grain?
  2. Create a strip of the wood grain?

Current CSS

html{
    background: url('../img/Body_BG.png') repeat-x 0 0 scroll;
    background-color:#0C0C0C;
    height:100%;
    width:100%;
}

Image

enter image description here

Upvotes: 3

Views: 25178

Answers (3)

ThinkingStiff
ThinkingStiff

Reputation: 65341

Add background-size: 100% 100%; to html and change repeat-x to no-repeat.

Demo: http://jsfiddle.net/ThinkingStiff/jUr9E/

html{
    background: url('https://i.sstatic.net/jGlzr.png') no-repeat 0 0 scroll;
    background-color:#0C0C0C;
    background-size: 100% 100%;
    height:100%;
    width:100%;
}

Upvotes: 4

shaunsantacruz
shaunsantacruz

Reputation: 8930

First, remove the radial gradient on the source image. Then create a strip with a few slats so it looks natural when repeated. To reproduce the gradient, use a css3 radial gradient background. If legacy browser support is a requirement, include a transparent png for the gradient as a fallback.

Upvotes: 1

Milad Naseri
Milad Naseri

Reputation: 4118

Using a strip will give you the bandwidth gain while still conserving some measure of quality, while using a tile with x-y repeat will reduce quality and give you higher bandwidth preservation.

Upvotes: 2

Related Questions