|
Post by Sarah on Jul 10, 2015 9:05:04 GMT
Hiya guys, Just in the process of making a new website for my breedclub and wanted to add a bit of fancy. Never a good idea I guess as I can't get it to work What I want is a fixed background with scrolling text ánd for the background to be resizable, like this one: css-tricks.com/examples/FullPageBackgroundImage/progressive.phpI used the code they offered and for some reason it works fine in IE (bleuhhh), but Firefox is giving me a headache. Can someone help me figure out this code? So far I've got: <html> <style type="text/css"> html, body { background: url(Background/BG Index.jpg) no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } </style> <head> <title></title> </head> <style type="text/css"> <!-- body { scrollbar-face-color:#847058; scrollbar-highlight-color:#c3b7a9; scrollbar-3dlight-color:#b3a18b; scrollbar-darkshadow-color:#473e35; scrollbar-shadow-color:#ab9b89; scrollbar-arrow-color:#c3b7a9; scrollbar-track-color:#d5ccc1; } --> </style> </body> </html>
|
|
|
Post by Lighthouse on Jul 11, 2015 18:46:56 GMT
Hi me deario, when I right click on your link, I get the option to Inspect Element (Q). Can you do that? (PaleMoon)
|
|
|
Post by Sarah on Jul 12, 2015 19:22:15 GMT
Yes and it looks interesting, but not really sure what I'm looking at :P
|
|
|
Post by Lighthouse on Jul 12, 2015 21:28:26 GMT
Looks to me like it is giving you the code (html).
|
|
|
Post by GuiltySpark on Jul 12, 2015 21:34:41 GMT
Not sure what's exactly being asked here but try this:
<!DOCTYPE html> <html>
<head> <meta charset="UTF-8"> <title>Full Page Background Image | Progressive</title> <style> * { margin: 0; padding: 0; } html { background: url(images/bg.jpg) no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } #page-wrap { width: 400px; margin: 50px auto; padding: 20px; background: white; -moz-box-shadow: 0 0 20px black; -webkit-box-shadow: 0 0 20px black; box-shadow: 0 0 20px black; } p { font: 15px/2 Georgia, Serif; margin: 0 0 30px 0; text-indent: 40px; } </style> </head>
<body>
<div id="page-wrap"> <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p> <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p> <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p> </div> <style type="text/css" style="display: none !important;"> * { margin: 0; padding: 0; } body { overflow-x: hidden; } #demo-top-bar { text-align: left; background: #222; position: relative; zoom: 1; width: 100% !important; z-index: 6000; padding: 20px 0 20px; } #demo-bar-inside { width: 960px; margin: 0 auto; position: relative; overflow: hidden; } #demo-bar-buttons { padding-top: 10px; float: right; } #demo-bar-buttons a { font-size: 12px; margin-left: 20px; color: white; margin: 2px 0; text-decoration: none; font: 14px "Lucida Grande", Sans-Serif !important; } #demo-bar-buttons a:hover, #demo-bar-buttons a:focus { text-decoration: underline; } #demo-bar-badge { display: inline-block; width: 302px; padding: 0 !important; margin: 0 !important; background-color: transparent !important; } #demo-bar-badge a { display: block; width: 100%; height: 38px; border-radius: 0; bottom: auto; margin: 0; background: url(/images/examples-logo.png) no-repeat; background-size: 100%; overflow: hidden; text-indent: -9999px; } #demo-bar-badge:before, #demo-bar-badge:after { display: none !important; } </style> </body>
</html>
|
|
|
Post by Sarah on Jul 13, 2015 6:30:45 GMT
Thanks, GS, tried that, but still end up with the same problems: in IE everything works fine, including my coloured scrollbars, but in FF no coloured scrollbars and the background image disappears. I cán see the background image in the link I posted, so FF ís capable of handling this type of code. So I want to know what I'm doing wrong LOL.
|
|
|
Post by GuiltySpark on Jul 13, 2015 11:35:54 GMT
After doing some digging it would appear that this is not possible in Moz through CSS, instead you would need to use jQueary. See more HERE
|
|
|
Post by Sarah on Jul 13, 2015 12:41:02 GMT
The scollbar is not the most important part Main goal is resizable fixed background with scrolling text (on a transparent textblock). Like this: senecanstoic.wix.com/nltcBtw. all the flashy movement on the top is NOT what I want to reproduce.
|
|
|
Post by Sarah on Jul 13, 2015 12:47:12 GMT
|
|
|
Post by GuiltySpark on Jul 13, 2015 12:51:21 GMT
Are you building this from scratch? Who is your host? Most hosting sites have their own drag and drop web builders now for ease of use, the CSS is automated. We may need to know what web creator you're using. This works in Iceweasel & Chrome & PaleMoon (minus the scrollbar colour) <!DOCTYPE html> <html>
<head> <meta charset="UTF-8"> <title>My Website</title> <style> * { margin: 0; padding: 0; } html { background: url(https://techstep123.co.uk/onewebstatic/f76d6b44fe-minimalistic-circuits-interface-cyan-_305-23.jpg) no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } #page-wrap { width: 400px; margin: 50px auto; padding: 20px; background: white; -moz-box-shadow: 0 0 20px black; -webkit-box-shadow: 0 0 20px black; box-shadow: 0 0 20px black; } p { font: 15px/2 Georgia, Serif; margin: 0 0 30px 0; text-indent: 40px; } </style> </head>
<body>
<div id="page-wrap"> <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p> <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p> <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p> </div> <style type="text/css" style="display: none !important;"> * { margin: 0; padding: 0; } body { overflow-x: hidden; } #demo-top-bar { text-align: left; background: #222; position: relative; zoom: 1; width: 100% !important; z-index: 6000; padding: 20px 0 20px; } #demo-bar-inside { width: 960px; margin: 0 auto; position: relative; overflow: hidden; } #demo-bar-buttons { padding-top: 10px; float: right; } #demo-bar-buttons a { font-size: 12px; margin-left: 20px; color: white; margin: 2px 0; text-decoration: none; font: 14px "Lucida Grande", Sans-Serif !important; } #demo-bar-buttons a:hover, #demo-bar-buttons a:focus { text-decoration: underline; } #demo-bar-badge { display: inline-block; width: 302px; padding: 0 !important; margin: 0 !important; background-color: transparent !important; } #demo-bar-badge a { display: block; width: 100%; height: 38px; border-radius: 0; bottom: auto; margin: 0; background: url(/images/examples-logo.png) no-repeat; background-size: 100%; overflow: hidden; text-indent: -9999px; } #demo-bar-badge:before, #demo-bar-badge:after { display: none !important; }
</style> </body>
</html>
csstext2 (4.24 KB)
|
|
|
Post by GuiltySpark on Jul 13, 2015 12:52:27 GMT
The resizeable background should be automatic as you add more body.
|
|
|
Post by Sarah on Jul 13, 2015 20:43:00 GMT
I work with Coffeecup Free HTML Editor (quite al old version). I don't know if there is an editor that comes with the host. Most of the time I code by hand. It's just weird that I've just the code provided by the link given above (I take it you have taken that code from the preview page they made) and it works in IE, but in FF I don't see the background when I put the code in my own website, but I do see the background in the previewpage that goes with the sample code. Can you see the backgroundpicture in FF? (on my website that is www.nedlakelandterrierclub.nl/TestResizable.html )
|
|
|
Post by Sarah on Jul 13, 2015 20:46:48 GMT
It should look like this But for me it looks like this
|
|
|
Post by Sarah on Jul 13, 2015 20:48:14 GMT
Mind you I still got to work on the transparency of the textblock in the middle, but I'll worry about that later
|
|
|
Post by GuiltySpark on Jul 13, 2015 21:25:50 GMT
In Iceweasel it appears the same as in your FF, just a dull beige background.
It looks like it's not picking up the full page bg image.
Do you have it downloaded? Is it an image that can be downloaded from somewhere to play with?
|
|