1 reply [Last post]
thatmtnman
thatmtnman's picture
Offline
newbie
Last seen: 8 years 40 weeks ago
Timezone: GMT-7
Joined: 2013-03-12
Posts: 2
Points: 4

hello anyone, or perhaps even everyone....

About me: I am such a newbie, but am having such a great time learning about css its not even funny Wink

Problem: So here is my problem. I'm trying to place text over an image, and have the text wrap around various elements of the image. I've learned how to do that (or at least so far, everything looks like its working!). However, when the page is scrolled, the text moves (as it should) but the image stays where it is. Because the text that I worked so hard to position around various elements is now out of position, the text becomes illegible.

Suspected: I am using the 'cover' setting, because I want the entire page to be covered with the image. But if the image covers the entire page, then perhaps it can't scroll. Hmmmm...might be something to that...

Question: Is there a way to have both an image that covers the entire screen, and text that is cleverly placed around the image, and not have the text scroll independently of the image?

Thank you anyone and everyone for being patient with this, my very first post. Here's the code:

background: url("images/bckgrndimage.jpg") no-repeat scroll center center;
-webkit-background-size: 100%;
-moz-background-size: 100%;
-o-background-size: 100%;
background-size: 100%;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-color: #000;
height: 900px;

cheers

newbie

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 1 week 3 days ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5344
Points: 2965

hi thatmtnman, I assume that

hi thatmtnman,
I assume that you currently have the background on the body.
You could add a div that contains everything, set it's dimensions then the text should stay with the background.

You will need to specify absolute values for with and height, or you text will be messed up at different resolutions.
So that will mess up filling the full screen.
You should also look into @media queries so that you can handle different resolutions/ screens/ mobile devices etc.
I think you are taking on quite a challenge, many things that at first sound simple with CSS can become quite time consuming.