PDA

View Full Version : How do I control image positions and scroll text in a div?


dre38w
05-03-2009, 05:34 AM
Hi! I am making a site for a friend and I have a couple questions.
I'm trying to get my background picture to be dead in the center of the page but keep it's aspect ratio. Have borders on the sides to fill in the left over spaces. And I want the image to stay on screen when the page is scrolled down or up. I'm going to have divs or some such box with text and a background image in the box. And when the text gets longer than the box I want the text to scroll and have the image stay in place. But when I put the background image into the div its bigger than my desired size of the div. I'm kinda stuck at the moment.
I've tried my best to problem solve but I'm running out of time for my deadline. If anyone knows of something let me know. Thanks guys!

DWcourse
05-03-2009, 05:44 AM
place the background image with css
body {
background: url(/images/content-bg.gif) no-repeat fixed;
}

dre38w
05-03-2009, 05:52 AM
place the background image with css
body {
background: url(/images/content-bg.gif) no-repeat fixed;
}

I've already tried that code before. Lol. It didn't work. The picture stretches off the screen when I preview it. The picture is around 2000x3000 or so. It's huge. Lol. And also I looked in the div properties and I couldn't seem to find where I place that image code so the picture in the div box is fixed in place.

Corrosive
05-03-2009, 07:25 AM
The picture stretches off the screen when I preview it. The picture is around 2000x3000 or so. It's huge.

Then make the image smaller.

dre38w
05-03-2009, 02:52 PM
Then make the image smaller.
Lol. Good solution. I'll try that and see what happens.

dre38w
05-03-2009, 03:20 PM
It worked for the most part. I had to add one piece of code to center it but I'm satisfied to say the least. Thanks guys. But the next thing is where to put that code for the background image in my div box? I don't really see a spot to type it in so it corresponds with the div itself.

Corrosive
05-03-2009, 03:39 PM
It worked for the most part. I had to add one piece of code to center it but I'm satisfied to say the least. Thanks guys. But the next thing is where to put that code for the background image in my div box? I don't really see a spot to type it in so it corresponds with the div itself.

The styles for your div are named in your style sheet and then you reference the div (either by ID or class) by naming it something like...

<div id="mystyle"></div> or <div class="mystyle"></div>

dre38w
05-03-2009, 03:50 PM
The styles for your div are named in your style sheet and then you reference the div (either by ID or class) by naming it something like...

<div id="mystyle"></div> or <div class="mystyle"></div>
Thanks. But I figured it out already. Lol. I just sized the image to fit my div size. Then put overflow to scroll and it worked just fine. I'm set for now. Thanks for the help though. =)

Rob_Che
05-04-2009, 09:23 PM
Then make the image smaller.

Thanks. But I figured it out already. Lol. I just sized the image to fit my div size.

Glad you figured it out by yourself... :)