Background Image Help

HTML & CSS
1

Hi,

I have a website www.97centhosting.com with some clouds as the background image.

Each page is a different length, how do I get the background image to look the same on every page and on everyone’s screen resolution? Do I have to resize the image to different pixels to make it work?

Right now the CSS is this…

body {
        background-image: url('../img/background.png') no-repeat;
    background-size: cover;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

Thanks for the help!

2

I can only see one page.

Nevertheless, you can use something other than background-size: cover … for example, background-size: 100% auto;. But then you need to work out what to do at the bottom when it needs to repeat. I would fade the rays to a solid color so that you could merge into a background color.

3

How big should the image big in height and width so it fits in width to everyones screen resolution?

4

That approach won’t work. There are way too many devices out there, all with different sizes, so there’s no way you can chase them all down. You need to think about it differently, such as what I suggested.

1 Like
5

Whats the CSS for making it just display the background image without repeating it again but still keep the width 100%?

Thanks

6

You need to add no-repeat to your background declaration. Modify your code to this:

body {
background: url('../img/background.png') no-repeat;
background-size: 100% auto;
}

You had no-repeat in your original code, but it was attached to the background-image property, which doesn’t work. It either needs to be a part of the background shorthand property (as I’ve done here) or as the value of the background-repeat property. E.g.

body {
background-image: url('../img/background.png');
background-repeat: no-repeat;
background-size: 100% auto;
}
7

How do you get a background color where the image doesn’t repeat anymore?

Thanks

8

Like this:

body {
  background: #a1c8e0 url('../img/background.png') no-repeat;
  background-size: 100% auto;
}

I just chose a color from the image randomly—#a1c8e0—but you can adjust to suit. Ideally, open the image in Photoshop and fade the rays into that color so that the transition from image to bg color isn’t obvious.

EDIT: I also recommend you remove the tiny white text from the bottom right of the image.

9

Thank you!

1 Like
10

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.