Mobile Friendly Website

CSSPLAY

Doing it with style

100% background image COMMENTS

Welcome to my Comments Pages

Please note. I get a few hundred emails a week from visitors asking for help, or posing questions on how to modify my demos to suit their application and I read them all. Unfortunately I only have a limited amount of time to spend answering these questions.

So if I do not reply, please do not be offended, and if I do reply then you are one of the lucky ones.

If you are asking for permission to use any of my demonstration then please email me with your request stu{at}cssplay.co.uk.

Post a comment


Current posts

Nathan:-
This trick disables scrolling with the mousewheel held down on the computer, and I can't scroll at all on any of my mobile browsers (Windows/iPhone/Android). That's kind of jarring.
(31.01.2011, 20:35)

Yvonne Wheaton:-
I can't figure out what I am doing wrong. I spent yesterday trying to get this to work. My code via your idea

<head>
<style type="text/css">
html, body {margin:0; padding:0; width:100%; height:100%; overflow:hidden; text-align:left;}
body {font-family:timesnewroman, papyrus;}
#bkgrnd {position:fixed; top:0; left:0; width:100%; height:100%; z-index:1;}
#content { position:absolute; z-index:2;}
</style>

</HEAD>
<BODY>

<div>
<img src="images/fadedbkgrd.jpg" alt="background image" id="bkgrnd">
</div>

<div id="content">

My background still ends up on top. This is frustrating. I feel that I must be missing something obvious.
(11.02.2011, 15:27)

Yvonne Wheaton:-
Hey Stu,

Me again. One of your commentors said it doesn't work on IE/Vista, there in lies my problem. Hubby has IE/XP, doesn't work there either. Works fine with Firefox/XP. Bummer, it looks really good when it works. I liked the simplicy of the code. I will have to do something else.
(11.02.2011, 16:14)

officemanager2:-
I've followed this as close as possible, but I can't get anything in front of the background??

Any idea what I am missing? I'm thinking it is tied into the z index?
(03.10.2011, 23:37)

Michael:-
Implement a footer into this design, is that possible ?
(05.12.2011, 05:03)

Ahmed:-
Great help on the spot mate thanks. :D
(21.01.2012, 18:26)

Mark:-
Cute bunny. (I hear they're the tastiest.) Kidding folks, kidding.
(01.02.2012, 01:59)

Kate:-
This is some great CSS, thank you!

I would like to resolve a problem I have with using version 1 (for all browsers) in IE (8) - I can only scroll down (or up) the page when the mouse is hovering over my content area, which is 950px wide.

I'd like to be able to scroll with the mouse on any area of the screen - rather than having to click and drag on the scrollbar on the side of the screen).

I've tried playing around with some different div attributes and widths etc but can't seem to get it to work. Does anyone else have this problem or a solution for it?

Thanks!!
(07.02.2012, 04:15)

jim:-
THANKS A TON for this article on fixed background... I am a fan of urs ... I have used your css menu in probably all my websites.
(11.11.2012, 06:08)

Brendan:-
Thanks, brilliant!
(22.02.2013, 19:36)

10 of 161 comments (part 1). [ » ] [ * ]



Post

Your comment:

Your Name:

Stu's First Name - 3 letters (required)

Thanks to Alex for this script.

Please enter your comments for this site page.
Please note that all posts are moderated.

Posting rules

HTML is turned off
Maximum word length is 80 characters.
Messages limited to 1200 characters.
Web links should not include 'http://'

Support CSSPLAY

Your donations keep CSS PLAY running.
If your donation is for the use of a demo then please email me with the demo url after making your donation.


CUSTOM SEARCH

Facebook Twitter rss feed Facebook Fan Page