homepage Welcome to WebmasterWorld Guest from 54.204.73.126
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor 2014
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

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



 
Msg#: 4420838 posted 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

10+ Year Member



 
Msg#: 4420838 posted 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#: 4420838 posted 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

WebmasterWorld Senior Member lucy24 us a WebmasterWorld Top Contributor of All Time Top Contributors Of The Month



 
Msg#: 4420838 posted 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

5+ Year Member



 
Msg#: 4420838 posted 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#: 4420838 posted 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#: 4420838 posted 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

WebmasterWorld Senior Member 5+ Year Member



 
Msg#: 4420838 posted 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

5+ Year Member



 
Msg#: 4420838 posted 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

WebmasterWorld Senior Member 5+ Year Member



 
Msg#: 4420838 posted 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

WebmasterWorld Senior Member lucy24 us a WebmasterWorld Top Contributor of All Time Top Contributors Of The Month



 
Msg#: 4420838 posted 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