Background image - no scroll left-right, but up & down - CSS forum at WebmasterWorld

Forum Moderators: not2easy

Message Too Old, No Replies

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

RaymondB

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

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

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

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

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

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

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

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

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

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

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]