How do you use images as backgrounds in a layer?

  • jlknauff
  • Expert
  • Expert
  • User avatar
  • Posts: 502
  • Loc: Florida

Post 3+ Months Ago

I'm trying to rebuild my pages with css and I have one thing left to make it 100% valid-using a bg image in a layer is htrowing an error:

Property layer-background-image doesn't exist : url(img/cata-bg-g.jpg)

Does anyone know of a way to do this that is valid css? I know I can just put the img in a layer (vs using it as a bg) and throw another layer ober top of it, but I don't think it is very efficient. The page is at http://www.vsssleep.com/vss.htm

Another thing I want to try to do is let users change text size like in http://www.inc.com (buttons to do that are near the top right corner). Anyone know how this works?
  • Anonymous
  • Bot
  • No Avatar
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post 3+ Months Ago

  • rtm223
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 1855
  • Loc: Uk

Post 3+ Months Ago

jlknauff wrote:
I'm trying to rebuild my pages with css and I have one thing left to make it 100% valid-using a bg image in a layer is htrowing an error:

Property layer-background-image doesn't exist : url(img/cata-bg-g.jpg)

Do you mean in a div? I can't see that bit of code anywhere.
Code: [ Select ]
background-image:url(img/cata-bg-g.jpg);

should be fine :?

Quote:
Does anyone know of a way to do this that is valid css? I know I can just put the img in a layer (vs using it as a bg) and throw another layer ober top of it, but I don't think it is very efficient.

yeah, what I said above :lol:
and you are right it's not efficient.

Quote:
Another thing I want to try to do is let users change text size like in http://www.inc.com (buttons to do that are near the top right corner). Anyone know how this works?


This would be done using javascript But, the best way to let someone change your font - sizes is to change:

Code: [ Select ]
p.one {font: 9pt Arial, Helvetica, sans-serif;
}
  1. p.one {font: 9pt Arial, Helvetica, sans-serif;
  2. }


to

Code: [ Select ]
p.one {font: 80% Arial, Helvetica, sans-serif;
}
  1. p.one {font: 80% Arial, Helvetica, sans-serif;
  2. }


I like 80% but change it to whatever. that way, someone with bad eyesight can just change it themselves (which they will prabably have changed in their default preferences. Also, handy shortcut is ctrl-mousewheel to test variable text sizes.

Never use px to specify font sizes. Use pt only for print styles, pt's don't go to well on the screen.


The javascript version would probably use a percentage size on the body, then other percentages on the inner elements. Then alter the body only in javascript. The other elements will then inherit accordingly.

Bear in mind that if you have nested elements, the percentages will be cumulative. eg:

Code: [ Select ]
div{font-size:80%}

....................
<div>
  Hello
  <div>
    this is
    <div>
       a demonstration
    </div>
  </div>
</div>
  1. div{font-size:80%}
  2. ....................
  3. <div>
  4.   Hello
  5.   <div>
  6.     this is
  7.     <div>
  8.        a demonstration
  9.     </div>
  10.   </div>
  11. </div>


the word "hello" would be at 80%, "this is" at 64% and "a demonstration" would be at *thinks* 51.2%

BTW, the PM you sent me - I wil get round to it properly after my exam. TBH you will learn more by soldiering on :D but yeah I will get round to giving you some pointers next week.
  • jlknauff
  • Expert
  • Expert
  • User avatar
  • Posts: 502
  • Loc: Florida

Post 3+ Months Ago

Cool, thanks.

the code from the div is as follows

Code: [ Select ]
<div id="sleephealthhead" style="position:absolute; width:210px; height:25px; z-index:1; left: 154px; top: 380px; background-image: url(img/cata-bg-g.jpg); layer-background-image: url(img/cata-bg-g.jpg); border: 1px none #000000;">
 <p class="head1">Sleep &amp; Your Health</p>
</div>
  1. <div id="sleephealthhead" style="position:absolute; width:210px; height:25px; z-index:1; left: 154px; top: 380px; background-image: url(img/cata-bg-g.jpg); layer-background-image: url(img/cata-bg-g.jpg); border: 1px none #000000;">
  2.  <p class="head1">Sleep &amp; Your Health</p>
  3. </div>


the line from the last post:

Property layer-background-image doesn't exist : url(img/cata-bg-g.jpg)

was what came from W3C's validation tool.
  • rtm223
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 1855
  • Loc: Uk

Post 3+ Months Ago

jlknauff wrote:
Cool, thanks.

the code from the div is as follows

Code: [ Select ]
<div id="sleephealthhead" style="position:absolute; width:210px; height:25px; z-index:1; left: 154px; top: 380px; background-image: url(img/cata-bg-g.jpg); layer-background-image: url(img/cata-bg-g.jpg); border: 1px none #000000;">
 <p class="head1">Sleep &amp; Your Health</p>
</div>
  1. <div id="sleephealthhead" style="position:absolute; width:210px; height:25px; z-index:1; left: 154px; top: 380px; background-image: url(img/cata-bg-g.jpg); layer-background-image: url(img/cata-bg-g.jpg); border: 1px none #000000;">
  2.  <p class="head1">Sleep &amp; Your Health</p>
  3. </div>


the line from the last post:

Property layer-background-image doesn't exist : url(img/cata-bg-g.jpg)

was what came from W3C's validation tool.


Then nix it, just go for:
Code: [ Select ]
<div id="sleephealthhead" style="position:absolute; width:210px; height:25px; z-index:1; left: 154px; top: 380px; background-image: url(img/cata-bg-g.jpg); /*dodgey style removed*/ border: 1px none #000000;">
 <p class="head1">Sleep &amp; Your Health</p>
</div>
  1. <div id="sleephealthhead" style="position:absolute; width:210px; height:25px; z-index:1; left: 154px; top: 380px; background-image: url(img/cata-bg-g.jpg); /*dodgey style removed*/ border: 1px none #000000;">
  2.  <p class="head1">Sleep &amp; Your Health</p>
  3. </div>


Although I would remove the comment as well
  • jlknauff
  • Expert
  • Expert
  • User avatar
  • Posts: 502
  • Loc: Florida

Post 3+ Months Ago

Perfect! Thanks for your help.

Post Information

  • Total Posts in this topic: 5 posts
  • Users browsing this forum: No registered users and 67 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
cron
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.