Domov > HTML/CSS in dizajniranje spletnih strani > slika v ozadju in prilagoditev velikosti monitorja
stran 1 od 2 |< < 1 2 >|
slika v ozadju in prilagoditev velikosti monitorja
 
rubins 27. mar 2012 12:54:14 Pridružen od:
25. feb 2012
52 objav
 4 14 0
#1

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


všeč(0) ni všeč(0) spam(0)
Swarun Darko
 
 
technolog 27. mar 2012 13:31:49 Pridružen od:
14. nov 2011
598 objav
 768 300 22
#2

Tega ne moreš naredit z CSS background.



Rešitev je, da narediš <img> sliko in jo raztegneš & fiksiraš.


všeč(0) ni všeč(0) spam(0)
Z linuxom že 7 let. Pro web development.
 
 
matejzr 27. mar 2012 13:31:57 Pridružen od:
21. mar 2008
36 objav
 35 13 2
#3

Č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; ">
všeč(0) ni všeč(0) spam(0)
 
 
1qay1qay 27. mar 2012 17:15:12 Pridružen od:
12. avg 2010
2967 objav
 2430 194 84
#4

A misliš tole : http://www.elegantthemes.com/demo/?theme=Gleam ?


všeč(0) ni všeč(0) spam(0)
Delko www.delko.si [Moto akumulatorji] | [Polnilne baterije] | [GP baterije]
 
 
halo 27. mar 2012 18:13:02 Pridružen od:
16. maj 2010
92 objav
 17 3 1
#5

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>


všeč(1) ni všeč(0) spam(0)
 
 
DiTi 27. mar 2012 19:16:18 Pridružen od:
3. apr 2010
324 objav
 218 7 1
#6

če bo tako dolgo nalagalo kot na tej strani močno odsvetujem uporabo slike :)


všeč(0) ni všeč(0) spam(0)
DiTi. | Karin Kegel Photography | TimeTac
 
 
wssrpnc 27. mar 2012 22:36:16 Pridružen od:
22. feb 2011
1022 objav
 762 169 20
#7

Mislim, da je tale plugin kar rabiš.


všeč(0) ni všeč(0) spam(0)
 
 
rubins 28. mar 2012 09:22:59 Pridružen od:
25. feb 2012
52 objav
 4 14 0
#8

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; }


všeč(0) ni všeč(0) spam(0)
Swarun Darko
 
 
halo 28. mar 2012 10:41:48 Pridružen od:
16. maj 2010
92 objav
 17 3 1
#9

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>
všeč(0) ni všeč(0) spam(0)
 
 
rubins 28. mar 2012 13:29:09 Pridružen od:
25. feb 2012
52 objav
 4 14 0
#10

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)


všeč(0) ni všeč(0) spam(0)
Swarun Darko
 
 
Domov > HTML/CSS in dizajniranje spletnih strani > slika v ozadju in prilagoditev velikosti monitorja
stran 1 od 2 |< < 1 2 >|
 

🔒 Za odgovor na to temo se moraš prijaviti.

Prijavi se