CODEWITHSUNDEEP
css
Gopal1216
Gopal1216

Reputation: 437

Web Page Background

In my project i'm using an image as the background of the body. I'm using the following code in css :-

body{
    /*background:#000;*/
    margin:0px;
    font-family:Tahoma, Geneva, sans-serif;
    font-size:14px;
    color:#000;
    background:url(../images/stripBG.jpg);
    background-repeat: repeat-x repeat-y;
}

This background image is strip which i'm repeating in x and y axis to make it appear all over the page. But when some content loads into my page, after certain height, the background is repeating again. observe the background observe the background repeating again

How can I make the background so that it is compatible with my dynamic content

Upvotes: 0

Views: 45

Answers (2)

Derek Story
Derek Story

Reputation: 9593

You could do something along the lines of this:

CSS

html, body {
    background: url(../images/stripBG.jpg) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    margin:0px;
    font-family:Tahoma, Geneva, sans-serif;
    font-size:14px;
}

JS Fiddle

Upvotes: 1

AKT
AKT

Reputation: 26

You have set repeat-y so it will repeat as content height increases.

try setting the body background color to the second color in the gradient, i think its #845800. then remove repeat-y

body{
    background:#845800;
    margin:0px;
    font-family:Tahoma, Geneva, sans-serif;
    font-size:14px;
    color:#000;
    background:url(../images/stripBG.jpg);
    background-repeat: repeat-x;
}

Upvotes: 0

Related Questions