CollinsGA
04-18-2012, 06:46 PM
Hi there,
I am creating a website for a festival:http://arcan3.co.uk/coldharbour
The background consists of a large photo. I wanted this to fit the whole browser, whatever the size eg. on small laptop screens to big desktops to phone browsers etc.
My friend gave me the following code which successfully made the photo resize to the browser until a min height and width:
#ch_main{
width: 100%;
min-height:1000px;
margin: 0px 0px;
padding: 0px 0px 0px 0px;
background: url(http://arcan3.co.uk/images/coldharbour/finishedbackalt.png) #000000 no-repeat top ;
background-size:100%;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://arcan3.co.uk/images/coldharbour/finishedbackalt.png', sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://arcan3.co.uk/images/coldharbour/finishedbackalt.png', sizingMethod='scale')";
min-width:1000px;
min-height:1000px;
}
As I said, this resizes the photo just fine. However, on the page currently (there is still much to be developed!!), there is a news feed, and a menu bar at the bottom which are have to be in very accurate positions. (The news feed bar should be at the top of the hay bails in the background, and the menu bar just at the bottom of the photo). When one for example makes the browser smaller, this all become out of line.
Would anyone be able to help me in making these elements lock into certain parts of the photo, no matter of the resizing?
Here some of the other coding you may find helpful:
Menu Bar:
.strawnav {
white-space:nowrap;
float:left;
width:100%;
height:100px;
border:none;
margin-top:0px;
background:url(http://arcan3.co.uk/images/coldharbour/strawmenurepeat.png) 120px top repeat-x;
text-transform: smallcaps;
word-spacing:80px;
line-height:42px;
font-size:3em;
font-weight:bold;
padding: 7px 0px 0px 0px;
text-align: center;
}
News Feed:
.ch_main_feed {
background: url(http://arcan3.co.uk/images/coldharbour/strawnewsnewsized.png) top no-repeat;
width: 300px;
height: 141px;
}
Thanks!:)
I am creating a website for a festival:http://arcan3.co.uk/coldharbour
The background consists of a large photo. I wanted this to fit the whole browser, whatever the size eg. on small laptop screens to big desktops to phone browsers etc.
My friend gave me the following code which successfully made the photo resize to the browser until a min height and width:
#ch_main{
width: 100%;
min-height:1000px;
margin: 0px 0px;
padding: 0px 0px 0px 0px;
background: url(http://arcan3.co.uk/images/coldharbour/finishedbackalt.png) #000000 no-repeat top ;
background-size:100%;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://arcan3.co.uk/images/coldharbour/finishedbackalt.png', sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://arcan3.co.uk/images/coldharbour/finishedbackalt.png', sizingMethod='scale')";
min-width:1000px;
min-height:1000px;
}
As I said, this resizes the photo just fine. However, on the page currently (there is still much to be developed!!), there is a news feed, and a menu bar at the bottom which are have to be in very accurate positions. (The news feed bar should be at the top of the hay bails in the background, and the menu bar just at the bottom of the photo). When one for example makes the browser smaller, this all become out of line.
Would anyone be able to help me in making these elements lock into certain parts of the photo, no matter of the resizing?
Here some of the other coding you may find helpful:
Menu Bar:
.strawnav {
white-space:nowrap;
float:left;
width:100%;
height:100px;
border:none;
margin-top:0px;
background:url(http://arcan3.co.uk/images/coldharbour/strawmenurepeat.png) 120px top repeat-x;
text-transform: smallcaps;
word-spacing:80px;
line-height:42px;
font-size:3em;
font-weight:bold;
padding: 7px 0px 0px 0px;
text-align: center;
}
News Feed:
.ch_main_feed {
background: url(http://arcan3.co.uk/images/coldharbour/strawnewsnewsized.png) top no-repeat;
width: 300px;
height: 141px;
}
Thanks!:)