Keep same background throughout my website

Question

I want to keep a static background for my website same through out all the pages. Meaning, the background should be same through out the applications . I tried doing

html {
    height: 300px;
    width: 300px;
    background: #f00 url(http://d1c739w2xm33i4.cloudfront.net/2.2/top_image.jpg);
    background-size: 100%;
    background-repeat: no-repeat;
}

But this assigns background only to selected area in my website.

How can I achieve this?

What about applying it to the `body {...}` ? (p.s. - setting the height and width to `300px` might also be part of the issue) — Darren, Nov 23 '15 at 06:37

score 1 · Answer 1 · answered Nov 23 '15 at 06:37

1

Change html to body

body
{
    height: 300px;
    width: 300px;
    background: #f00 url(http://d1c739w2xm33i4.cloudfront.net/2.2/top_image.jpg);
    background-size: 100%;
    background-repeat: no-repeat; 
}

answered Nov 23 '15 at 06:37

Happy Coding

2,517
1
13
24

score 1 · Answer 2 · edited Nov 23 '15 at 08:09

1

it should be body not html

body {
  height: 300px;
  width: 300px;
  background: #f00 url(http://d1c739w2xm33i4.cloudfront.net/2.2/top_image.jpg);
  background-size: 100%;
  background-repeat: no-repeat;
}

think about height and width once.

edited Nov 23 '15 at 08:09

Jonatas Walker

13,583
5
53
82

answered Nov 23 '15 at 06:38

Niranjan N Raju

12,047
4
22
41

score 1 · Answer 3 · answered Nov 23 '15 at 06:38

Try using

body{
     background: #f00 url(http://d1c739w2xm33i4.cloudfront.net/2.2/top_image.jpg);
     background-size: 100%;
     background-repeat: no-repeat;
}

And make sure that all your html pages link to your css file

<link rel="stylesheet" type="text/css" href="path_to_your_file.css" media="all"/>

score 1 · Accepted Answer · edited Nov 23 '15 at 08:10

1

Try this

body{
  height: 100%;
  width: 100%;
  background: #f00 url(http://d1c739w2xm33i4.cloudfront.net/2.2/top_image.jpg);
  background-size: 100%;
  background-repeat: no-repeat;
}

edited Nov 23 '15 at 08:10

Jonatas Walker

13,583
5
53
82

answered Nov 23 '15 at 06:44

Shravan Chaurasiya

109
5

score 1 · Answer 5 · edited Nov 23 '15 at 08:11

1

The issue is because you have assigned height and width in your css class.

edited Nov 23 '15 at 08:11

Jonatas Walker

13,583
5
53
82

answered Nov 23 '15 at 07:23

score 1 · Answer 6 · edited May 23 '17 at 12:23

1

Either use background-size: cover; or background-size: 100% 100%. And don't use height & widthattributes for .html selector. Apply the properties on .body selector. Please refer this for more knowledge.

edited May 23 '17 at 12:23

Community

1
1

answered Nov 23 '15 at 07:58

geeksal

4,856
3
24
47

Keep same background throughout my website

6 Answers6