homepage Welcome to WebmasterWorld Guest from 54.237.54.83
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Visit PubCon.com
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderator: open

CSS Forum

    
Background image - no scroll left-right, but up & down
RaymondB




msg:4420840
 12:10 pm on Feb 23, 2012 (gmt 0)

Hi, not sure what to ask about this, but here is the problem:

I have a BG image that is larger than most screens (1680 x 1050) - ok, i know that some people have that screen, but i don't. However, i would like to create a webpage that shows a scroll for up & down but NOT sideways - the reason being that on the left and right side, there is nothing of importance for smaller screens anyway. It is important however that people can scroll up and down. I do not want to see a scroll for left and right.

As an example, my laptop is: 1440 x 900, so i want the above image (1680 x 1050) to appear central but be able to scroll up and down, not left and right.

I hope i have explained it ok?

 

mslina2002




msg:4420846
 12:32 pm on Feb 23, 2012 (gmt 0)

Perhaps a search for "overflow-x:hidden" in your favorite search engine might help.

I guess there are various solutions using CSS, javascript, etc. and different browsers.

RaymondB




msg:4421006
 6:16 pm on Feb 23, 2012 (gmt 0)

Yes, i have tried that, dosn't work?

Let me repeat please:
I need the background image to be central in the "X" position no matter what screen resolution (NO scroll left and right) but be able to scroll up and down.

lucy24




msg:4421162
 12:35 am on Feb 24, 2012 (gmt 0)

Please explain exactly what you mean by "doesn't work".

We're not picking on you. Everyone gets told this. See, you know what you mean when you say "It doesn't work". But we don't. There are many ways for a thing not to work. Insert paraphrase from Tolstoy here.

What you're trying to do is set different rules for horizontal and vertical overflow. This can only be done in CSS3, where you can say "overflow-x" and "overflow-y" instead of a single "overflow". This, in turn, means that older browsers may require added lines saying something like

-moz-overflow-x
and
-webkit-overflow-x

... which will make the document not validate :( If it is in your power to do so*, ignore that detail.


* I've just lost a fight with the e-book folks on this issue.

Skier88




msg:4421163
 12:37 am on Feb 24, 2012 (gmt 0)

You can do that with the "background-position" property - just set the x value to 50%. Here's an example which uses the shorthand "background" property.

<!doctype html>
<html>
<head>
<meta charset='utf-8'>
<title>bg test</title>
<style type='text/css'>
* {margin:0; padding:0;}
body {min-height:1050px; background:#000 url
(http://i.imgur.com/j4y7L.jpg) 50% 0 no-repeat;}
p {width:700px; padding:20px; margin:20px auto;
background:rgba(255,255,255,.8);}
</style>
</head>
<body>
<p>Ipsum Lorem Lipsum Plorum</p>
</body>
</html>

[edited by: alt131 at 5:10 am (utc) on Feb 25, 2012]
[edit reason] Side Scroll [/edit]

RaymondB




msg:4421306
 12:13 pm on Feb 24, 2012 (gmt 0)

What i meant by "dosn't work" was that the "overflow-x:hidden" did nothing - it showed the up and down scroller (which i needed) but the background pic was just adjusted to the left, leaving the right... well, nothing.

Let me try these fine examples please - i will get back as soon as possible! Thanks for all the help!

RaymondB




msg:4421308
 12:38 pm on Feb 24, 2012 (gmt 0)

@Skier88 - Your code works! THANK YOU!

I would also like to thank ALL that have answered my post. I appologise for my bad english and way of explaining! I am so thankfull for all your support - thanks again! My head is aching for all the scratching!

alt131




msg:4421770
 9:31 pm on Feb 25, 2012 (gmt 0)

Hi RaymondB and a warm welcome to WebmasterWorld :),

Your English is fine - and thanks for acknowledging all the members who took the time to help. Even better you have a solution to save your head from more scratching!

Skier88




msg:4421883
 7:55 am on Feb 26, 2012 (gmt 0)

I'm glad I could help. I think that what mslina and lucy were getting at is a more general solution, which you would have to use for anything but a background image.

alt131, thanks for editing my post. But I can't seem to find a guideline for how wide I should be making the code I post - is 80 characters about right?

alt131




msg:4422166
 7:32 am on Feb 27, 2012 (gmt 0)

Hi Skier, good question, and I can't find any guidelines for post widths either - probably because most lines (bar those without white-space) will usually wrap. Occasional one fails even though there is white space - the one above is a good example - and I've been unable to establish a pattern or possible cause. I only make an adjustment if the thread has been pushed very wide and code samples are a challenge - again the above is a good example as it hasn't wrapped at ideal points.

So I wouldn't get too concerned about counting characters, or trying to insert hard returns to create precise line lengths, but yes, around 80 is probably a comfortable reading width.

lucy24




msg:4422191
 9:58 am on Feb 27, 2012 (gmt 0)

It's the "pre" tag. It does the same thing here that it does in "real" html: nothing wraps unless there's an explicit line break. Like this:

nn nn nn nn nn nn nn nn nn nn nn nn nn nn nn nn nn nn nn nn nn  
nn nn nn nn nn nn nn nn nn nn nn nn nn nn nn nn nn nn nn nn nn nn nn
nn nn nn nn nn nn nn nn nn nn nn nn nn nn nn nn nn nn nn nn nn nn nn
nn nn nn nn nn nn nn nn nn nn nn nn nn nn nn nn nn nn nn nn nn nn nn
nn nn nn nn nn nn nn nn


... which is why I always Preview posts about eleven times before hitting Submit.

And yes, I expect you to edit as soon as you've assimilated the full horror :)

[edited by: alt131 at 5:53 pm (utc) on Feb 27, 2012]
[edit reason] Eliminating Side Scroll eg - Lucy don't you have a magenta/cyan theme to style? ;) [/edit]

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved