CSS background Image -> Using an image

Question

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:

Create a tile of the wood grain?
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

ThinkingStiff · Accepted Answer · 2012-01-15 00:56:25Z

4

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%;
}

answered Jan 15, 2012 at 0:56

ThinkingStiff

65.4k31 gold badges148 silver badges241 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Milad Naseri · Accepted Answer · 2012-01-14 22:58:25Z

2

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.

answered Jan 14, 2012 at 22:58

Milad Naseri

4,1281 gold badge30 silver badges40 bronze badges

Comments

shaunsantacruz · Accepted Answer · 2012-01-15 00:50:16Z

1

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.

answered Jan 15, 2012 at 0:50

shaunsantacruz

8,9403 gold badges21 silver badges19 bronze badges

Collectives™ on Stack Overflow

CSS background Image -> Using an image

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related