Urgently need much help with background image in CSS

  • ixtaba
  • Born
  • Born
  • User avatar
  • Posts: 3

Post 3+ Months Ago

I'm not very good at this, but I summarize, I have taken much time sick, because my mind is full I think of too many things, problems, unfortunately a my me affected much stress and is what I had become ill, I am sorry to say much but I don't have much experience and I have very little time to finish, I urge end for various reasons, is a design that I'm making a website, among several things that I like to know right now is on how to make a background image to 100% of the browser, I've read things on the subject and I hardly try to adapt to an external file, besides that I don't understand why they use certain things, as you can see I need explanation as if it were a girl, or an older adultThis is not my job nor is nothing, my school, never taught us this topic and good appreciation their assistance
  • demonmaestro
  • Gold Member
  • Gold Member
  • User avatar
  • Posts: 679
  • Loc: Conroe, Texas

Post 3+ Months Ago

welcome to the forum. so from what i can gather that you want a image to fill the screen no matter the size is correct?
  • ixtaba
  • Born
  • Born
  • User avatar
  • Posts: 3

Post 3+ Months Ago

Links are not allowed, but I found this page

www. CSSplay. co. UK /layouts /background. HTML

Only to that view the example

as time, regardless of the size of her paginates image covers all of the browser window, I tried to adapt the code to an external file, even I have not proven with the code internal, and it is that I have many things and I don't like to lose the location, either way I failed my work, also I have in my page a code that it simulates frames and a menu with images, all in css
  • sherma
  • Silver Member
  • Silver Member
  • User avatar
  • Posts: 127

Post 3+ Months Ago

Hi, it's a little difficult to know exactly how to help without seeing the page you're working with, but I will try. From your posts and the example page you provided, I will assume that you wish for the background image to:

1 - fill the entire browser of the view.
2 - remain stationary when the person scrolls down?

Depending on what else you're including in the page could make a difference, but the page you provided as an example is done this way:


Code: [ Select ]
<style type="text/css">

html, body {margin:0; padding:0; width:100%; height:100%; overflow:hidden; text-align:left;}
body {font-family:verdana, arial, sans-serif; font-size:76%;}
#background{position:absolute; z-index:1; width:100%; height:100%;}
#scroller {position:absolute; width:100%; height:100%; top:0; left:0; overflow:auto; z-index:2;}
#content {padding:5px 300px 20px 200px;}
p {line-height:1.8em; letter-spacing:0.1em; text-align:justify;}
#fixed {position:absolute; top:25px; left:10px; width:160px; z-index:10; color:#567; border:1px solid #000; padding:10px;}

</style>
  1. <style type="text/css">
  2. html, body {margin:0; padding:0; width:100%; height:100%; overflow:hidden; text-align:left;}
  3. body {font-family:verdana, arial, sans-serif; font-size:76%;}
  4. #background{position:absolute; z-index:1; width:100%; height:100%;}
  5. #scroller {position:absolute; width:100%; height:100%; top:0; left:0; overflow:auto; z-index:2;}
  6. #content {padding:5px 300px 20px 200px;}
  7. p {line-height:1.8em; letter-spacing:0.1em; text-align:justify;}
  8. #fixed {position:absolute; top:25px; left:10px; width:160px; z-index:10; color:#567; border:1px solid #000; padding:10px;}
  9. </style>


The important thing to remember is that both your background image and body be set at 100% x 100%.
  • ixtaba
  • Born
  • Born
  • User avatar
  • Posts: 3

Post 3+ Months Ago

sherma wrote:
Hi, its a little difficult to know exactly how to help without seeing the page you are working with, but I will try. From your posts and the example page you provided, I will assume that you wish for the background image to:

1 - fill the entire browser of the view.
2 remain stationary when the person scrolls down?

Depending on what else you are including in the page could make a difference, but the page you provided as an example is done this way:


Code: [ Select ]
<style type="text/css">

html, body {margin:0; padding:0; width:100%; height:100%; overflow:hidden; text-align:left;}
body {font-family:verdana, arial, sans-serif; font-size:76%;}
#background{position:absolute; z-index:1; width:100%; height:100%;}
#scroller {position:absolute; width:100%; height:100%; top:0; left:0; overflow:auto; z-index:2;}
#content {padding:5px 300px 20px 200px;}
p {line-height:1.8em; letter-spacing:0.1em; text-align:justify;}
#fixed {position:absolute; top:25px; left:10px; width:160px; z-index:10; color:#567; border:1px solid #000; padding:10px;}

</style>
  1. <style type="text/css">
  2. html, body {margin:0; padding:0; width:100%; height:100%; overflow:hidden; text-align:left;}
  3. body {font-family:verdana, arial, sans-serif; font-size:76%;}
  4. #background{position:absolute; z-index:1; width:100%; height:100%;}
  5. #scroller {position:absolute; width:100%; height:100%; top:0; left:0; overflow:auto; z-index:2;}
  6. #content {padding:5px 300px 20px 200px;}
  7. p {line-height:1.8em; letter-spacing:0.1em; text-align:justify;}
  8. #fixed {position:absolute; top:25px; left:10px; width:160px; z-index:10; color:#567; border:1px solid #000; padding:10px;}
  9. </style>


The important thing to remember is that both your background image and body be set at 100% x 100%.


Basically this is the idea, these forums I think translated automatically and not I had set, if not understood me something tell me to put it properly in English, to see that so understandable I can
  • sherma
  • Silver Member
  • Silver Member
  • User avatar
  • Posts: 127

Post 3+ Months Ago

That would probably help.

If you could even post the portion of the code you're having a problem with?

Post Information

  • Total Posts in this topic: 6 posts
  • Users browsing this forum: No registered users and 34 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
cron
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.