slika v ozadju in prilagoditev velikosti monitorja
10 naročnikov
10 naročnikov
TUKAJ JE PRIMER, kar že nekaj časa iščem: http://bicycletouringpro.com/blog/
Če naredim lepo ozadje in nočem, da se slika ponavlja. Videl sem, da obstaja način, da se backrgound image samodejno prilega zaslonu, ne glede, če sem na 17 "ali 32" monitorju. Sicer slika mal izgubi na kvaliteti, ampak drugače moraš narediti sliko recimo 1920x1200pix in to je kar velik fajl, pa še na malih ekranih sploh ne vidijo kak si se trudil z ozadjem.
Rešitve sem (mogoče)našel:
http://css-tricks.com/how-to-resizeable-background-image/
ne vem pa kako to narediti z body-background css-jih wordpress teme.
Kakšen body background image dimensions plugin bi prav prišel.
Ima kdo kakšno idejo kako nastaviti style. Hvala
16 odgovorov
Tega ne moreš naredit z CSS background.
Rešitev je, da narediš <img> sliko in jo raztegneš & fiksiraš.
Če pogledaš html te strani imaš rešitev, ne rabiš nobenga plugina.
<img id="wpfullbg" src="http://bicycletouringpro.com/blog/wp-content/uploads/2012/03/bbg.jpg" style="left: 0px; width: 1903px; height: 955px; z-index: -2; top: 0px; position: fixed; opacity: 0.999999999; ">
ta stran ima vstavljeno sliko in dodano jquery scripto
slika:
<img id="wpfullbg" src="http://bicycletouringpro.com/blog/wp-content/uploads/2012/03/bbg.jpg" style="left: 0px; width: 1903px; height: 955px; z-index: -2; top: 0px; position: fixed; opacity: 0.999999999; ">
scripta:
<script type="text/javascript" language="javascript">
jQuery(function() {
fullbg();
jQuery(window).resize(fullbg);
setTimeout(fullbg, 500);
});
function fullbg() {
var imgw = jQuery('#wpfullbg').width();
var imgh = jQuery('#wpfullbg').height();
var vpw = jQuery(window).width();
var vph = jQuery(window).height();
var imgratio = imgw / imgh;
var viewportratio = vpw / vph;
var w = vpw;
var h = vph;
if( viewportratio > imgratio )
{
// screen is wider than picture -> increase the heigth of the picture;
h = w / imgratio;
}
else
{
w = h * imgratio;
}
jQuery('#wpfullbg').css(
{
'left': '0px',
'width': w,
'height': h,
'z-index': '-2',
'top' : '0px',
'position' : 'fixed',
'opacity' : '0.999999999'
}
);
}
</script>
matejzr:
Če pogledaš html te strani imaš rešitev, ne rabiš nobenga plugina.<img id="wpfullbg" src="http://bicycletouringpro.com/blog/wp-content/uploads/2012/03/bbg.jpg" style="left: 0px; width: 1903px; height: 955px; z-index: -2; top: 0px; position: fixed; opacity: 0.999999999; ">
IN KJE NAJ VSTAVIM TOLE KODO ČE IMAM TALE CSS za BODY?
body {
text-align: center;
line-height: 21px;
font-family: Tahoma, Arial, sans-serif;
font-size: 12px;
color: #27454E;
min-height: 25px;
background-color: #E2F8FD;
background-attachment: fixed;
background-image: url(images/headerbg2.jpg);
background-repeat: no-repeat;
background-position: center top;
}
body.home { background-image: url(images/headerbg.jpg) !important; }
poskusi takole
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" language="javascript">
jQuery(function() {
fullbg();
jQuery(window).resize(fullbg);
setTimeout(fullbg, 500);
});
function fullbg() {
var imgw = jQuery('#wpfullbg').width();
var imgh = jQuery('#wpfullbg').height();
var vpw = jQuery(window).width();
var vph = jQuery(window).height();
var imgratio = imgw / imgh;
var viewportratio = vpw / vph;
var w = vpw;
var h = vph;
if( viewportratio > imgratio )
{
// screen is wider than picture -> increase the heigth of the picture;
h = w / imgratio;
}
else
{
w = h * imgratio;
}
jQuery('#wpfullbg').css(
{
'left': '0px',
'width': w,
'height': h,
'z-index': '-2',
'top' : '0px',
'position' : 'fixed',
'opacity' : '0.999999999'
}
);
}
</script>
</head>
<body>
<img id="wpfullbg" src="http://bicycletouringpro.com/blog/wp-content/uploads/2012/03/bbg.jpg" style="left: 0px; width: 1903px; height: 955px; z-index: -2; top: 0px; position: fixed; opacity: 0.999999999; ">
Hello world
</body>
</html>
halo:
poskusi takole<html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> <script type="text/javascript" language="javascript"> jQuery(function() { fullbg(); jQuery(window).resize(fullbg); setTimeout(fullbg, 500); }); function fullbg() { var imgw = jQuery('#wpfullbg').width(); var imgh = jQuery('#wpfullbg').height(); var vpw = jQuery(window).width(); var vph = jQuery(window).height(); var imgratio = imgw / imgh; var viewportratio = vpw / vph; var w = vpw; var h = vph; if( viewportratio > imgratio ) { // screen is wider than picture -> increase the heigth of the picture; h = w / imgratio; } else { w = h * imgratio; } jQuery('#wpfullbg').css( { 'left': '0px', 'width': w, 'height': h, 'z-index': '-2', 'top' : '0px', 'position' : 'fixed', 'opacity' : '0.999999999' } ); } </script> </head> <body> <img id="wpfullbg" src="http://bicycletouringpro.com/blog/wp-content/uploads/2012/03/bbg.jpg" style="left: 0px; width: 1903px; height: 955px; z-index: -2; top: 0px; position: fixed; opacity: 0.999999999; "> Hello world </body> </html>
Hmm. In to bi naj "nekako" vstavil v header.php. (elegantthemes-Chameleon)
Drugače pa če želiš, jaz sem enkrat rešil tako. Da sem za različne resolucije nalagal različne css-je.
If screen.width <= 1600 (1600.css)
If screen.width <= 14400 (1440.css)
itd...
V css-ju pa sem imel samo različne dimenzije ozadja, kateri je bil prilagojen za določene dimenzije.
npr.
body {
background-image: url(../images/bg1600.jpg) !important;
}
Skripta cca. 7 vrstic.
Če rabiš sporoč, pa bom objavil.