HTML Background

Question

I'm trying to make my webpage. I made a layout using Photoshop so effectively, it is a PNG file.

My question is - How do I integrate this into the website using HTML/CSS? I tried editing the css which kind of worked.

body {
background-image:url('URLAddressHere');
}

However, when I enlarge the window, etc, etc... the image just gets ruined. Is there a way for the background to scale properly with page size? Also, I want it to stay uniform (i.e. it does not repeat) Or am I just doing it wrong? How am I meant to implement this 'image' which essentially has my menu, etc.

Thanks

use a "div" to wrap background image and outside this "div" use a color or repeated image. — Mosijava, Mar 24 '12 at 09:04
http://stackoverflow.com/questions/376253/stretch-and-scale-css-background http://stackoverflow.com/questions/1150163/stretch-and-scale-a-css-image-background-with-css-only http://css-tricks.com/how-to-resizeable-background-image/ — hkulekci, Mar 24 '12 at 09:06

score 0 · Answer 1 · edited Mar 29 '12 at 13:02

0

Try this:

body {
    background-image:url('URLAddressHere');
    background-repeat:no-repeat;
}

edited Mar 29 '12 at 13:02

Barry Kaye

7,682
6
42
64

answered Mar 24 '12 at 09:04

Josh

2,835
1
21
33

score 0 · Answer 2 · answered Mar 24 '12 at 09:04

0

What you're looking for is a css3 property called background-size. This will resize the background depending on the width and height of the browser. I have linked a few resources below. You will also need to turn repeat off. Enjoy

http://www.css3.info/preview/background-size/

So for your class you may want to add:

background-repeat: no-repeat;
background-size: cover;

answered Mar 24 '12 at 09:04

nickw444

948
2
9
18

That will make things pretty ugly as soon as the image is enlarged. – ThiefMaster Mar 24 '12 at 09:19
> get higher res image. (worlds worst optimisation). – nickw444 Mar 24 '12 at 09:25

score 0 · Answer 3 · answered Mar 24 '12 at 09:18

I think you'll want something like this....

html {
    background: url(images/bg.jpg) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/bg.jpg', sizingMethod='scale');
    -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/bg.jpg', sizingMethod='scale')";
}

score -3 · Answer 4 · edited May 05 '21 at 16:19

-3

<body style="background-color:powderblue;">

Is this what you are looking for?

edited May 05 '21 at 16:19

Eric Aya

69,473
35
181
253

answered May 05 '21 at 16:10

issagml

1

The question is about scaling the image correctly which is not reflected in your answer. Maybe you can update it? – Henridv May 06 '21 at 08:11

HTML Background

4 Answers4