Background image shortens sentence length

Question

I am using only html coding in the passages and some basic CSS coding. I am using this very basic code:

.street {
background: [img[Images/Street.jpg]] fixed;
position: absolute;
background-size: cover;
}

The text in the passage usually has quite a large width, so you can read everything without any scrolling. But after using this background image, my text in the passage only shows between 2-6 words per line. This means I have to keep scrolling down a lot which is not good. I was wondering if anyone know how to fix this?

Answer 1

Are you using tags for styling? If so, change the selector from .street to body.street and see if that helps. Also, using the position: absolute there probably isn't doing what you think or want, though without seeing the html of the passage, its hard to tell.

Comments

Thanks, didn't realise I needed to use body and removing absolute position both worked.

Answer 2

First off (I don't actually care but others will remind you of it): If you are posting a code sample, please use the code snippet button in the toolbar. It preserves indentation in your code and makes it easier to read. It's the first button on the left of the toolbar, so you can't miss it.

Now to your problem:

you used the shorthand "background" property without naming every value, maybe that could be the problem.

Other than that you could try to set "background-size" to "100% 100%". It will probably skew your picture, but maybe it's worth a try.

 

I hope this helped.