How to make background image responsive in FrontPage

EventVwr · Feb 26, 2013

Anyone know how (using FrontPage) to make my background image shrink or expand to fit any screen or browser and without tiling?

<html>

<head>
<meta http-equiv="Content-Language" content="en-us">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Home</title>

</head>

<body background="oranges.jpg">

</body>

</html>

wmorri · Feb 27, 2013

There are a couple of ways to do this. They are both pretty simple.

<body background="orange.jpg" width="x" height="x">

or

with css:

#body.background { orange.jpg,
width="x"
height="x"
}

TeenScripts · Feb 28, 2013

you could also use the css: background-size property.

example:
background:url(orange.jpg);
background-size:80px 60px;
background-repeat:no-repeat;

EventVwr · Feb 28, 2013

wmorri said:
There are a couple of ways to do this. They are both pretty simple.

<body background="orange.jpg" width="x" height="x">

Is that just fixed pixels? I'm hoping that I can enter 100% in place of the X's. I guess I'll find out in a bit....

TeenScripts · Feb 28, 2013

Yes it's fixed, adding 100% usually causes problems later on, depending on the screen size of the people visiting your page, I would recommend either adding a fixed size or using the background size property.

MartyF81 · Feb 28, 2013

Fixed Width does not answer his question of the background being responsive to window size.

You can use the background size "cover" to accomplish this I believe.

Code:

background-image: url(yourimage.jpg);
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;

TeenScripts · Feb 28, 2013

TeenScripts said:
.........or using the background size property.

But yes adding cover might work.

How to make background image responsive in FrontPage

EventVwr

wmorri

TeenScripts

EventVwr

TeenScripts

MartyF81

TeenScripts

Top Contributors this Month