Rock
|
I have produced a Blogger template using Artisteer, but I think this question applies to other templates too.
How do you stretch a background image so that it fills any browser window?
You can see the problem here:
http://rock-vacirca.blogspot.com/
Rock
|
| |
Rock
|
No problem, got the solution now. The problem does not show on the above link now, as I have implemented the fix.
Rock
|
| |
Mark C
|
Hi Rock,
You should post how you fixed this issue here, so others can learn from it.
Mark.
|
| |
Rock
|
Quote Mark C:
Hi Rock,
You should post how you fixed this issue here, so others can learn from it.
Mark.
Sure.
You can see in the following code from my template the body part of the css, and the lines I commented out. Beneath that are the two new sections I added, #background, and .stretch
body { height: 100%; margin: 0 auto; padding: 0; /*background-color: #CCCCB8; */ /*background-image: url('http://i184.photobucket.com/albums/x27/wibs_photos/template-images/Page-BgTexture.jpg'); */ /*background-repeat: repeat; */ /*background-attachment: fixed; */ /*background-position: top left; */ } #background { width: 100%; height: 100%; position: fixed; left: 0px; top: 0px; z-index: -1; } .stretch { width:100%; height:100%;
Down in the html part of the template, immediately after the <body> tag, I inserted the following code:
</head> <body> <div id='background'> <img alt='' class='stretch' src='http://i184.photobucket.com/albums/x27/wibs_photos/template-images/Page-BgTexture.jpg'/> </div>
That did it. The graphic stretched to fill the screen, no matter what resolution I tested it at, and worked with my Firefox 9.0.1 and with IE8.
Rock
|
| |
Rock
|
Oops, copy/paste error. I missed the closing curly brace, }, should be:
.stretch { width:100%; height:100%;}
Actually, I think it looks clearer if I do not use the Code button in this forum:
body
{
height: 100%;
margin: 0 auto;
padding: 0;
/*background-color: #CCCCB8; */
/*background-image: url('http://i184.photobucket.com/albums/x27/wibs_photos/template-images/Page-BgTexture.jpg'); */
/*background-repeat: repeat; */
/*background-attachment: fixed; */
/*background-position: top left; */
}
#background {
width: 100%;
height: 100%;
position: fixed;
left: 0px;
top: 0px;
z-index: -1;
}
.stretch {
width:100%;
height:100%;
}
</head>
<body>
<div id='background'>
<img alt='' class='stretch' src='http://i184.photobucket.com/albums/x27/wibs_photos/template-images/Page-BgTexture.jpg'/>
</div>
Rock
|
| |
Peter S
|
Nice work Rock. Something that should defiantly be shared over at the User Tips forum :)
http://www.artisteer.com/?forum_id=17&p=forum_topics
|
| |
Peter S
|
lol stupid spellcheck - definitely*
|
| |
CarlitoZ E.
|
I was looking everywere for something like this, and very good instructions also
it works! thx
|
| |
SR Solutions
|
update:
Just add the following to your CSS:
background-size: 100%;
This should do just fine ;)
|
| |
patrick
|
Which .css file should be modified?
|
| |
patrick
|
Will this problem be solved when releasing the new version of Artisteer?
|
| |
Michel
|
background-size:cover;
|
| |
Shyam
|
I also implemented solution simply by adding:
background-size: 100%;
I added this at the end of the #art-main section of style.css
thanks SR
|
| |
Mario E.
|
My solution is different and it's based on the fact, that you can resize most elements as proportion of screen width and height.
1vw is calculated 1% number of pixels of visiters screen (window) width and
1vh is calculated 1% number of pixels of visiters screen (window) height
In my case I have used backround image in 16:9 ratio and I wanted my image to allways stretched 100% of the height. So numbers would be for height->100vh and for width->178vh. I went one step further to avoid left and right vertical stripes even in case of really wide screen(window) so I increased both numbers by 20% -> 120 and 213.
Add this in Artisteer File/Export/Options -> CSS Options Window:
#art-main {
background-size: calc(213vh) calc(120vh;
}
If you want that element relates to width, than use vw variable.
Remark: this css sintax is not working in Opera browser.
|
| |
Mario E.
|
Last parenthesis is missing, it should be:
#art-main {
background-size: calc(213vh) calc(120vh);
}
|
| |