| | |
Spread Image Across Page
Please support our HTML and CSS advertiser: PostgreSQL or MySQL? Compare and contrast the two most popular open source databases
Thread Solved |
OK, after a few hours and some Internet research I think I found a way to spread an image across my page. Let me know what you guys think.
My CSS:
#body {
background-image: url(my image url);
background-attachment: fixed;
}
1) I noticed that the image only fills in 3/4's of the page so what I did was put a few <br />'s so it would fill the page and walaa!! Is this bad practice? Would it work across different browsers?
2) Also, my image is 1024 x 731. How do I compress it and still have the same look, quality and the way it is viewed on the page?
3) I found that I like the look of some of the images that are oversized (meaning that only a portion of it is showing). Is there a way I can keep this look while compressing the image?
At your convenience,
Erek
My CSS:
#body {
background-image: url(my image url);
background-attachment: fixed;
}
1) I noticed that the image only fills in 3/4's of the page so what I did was put a few <br />'s so it would fill the page and walaa!! Is this bad practice? Would it work across different browsers?
2) Also, my image is 1024 x 731. How do I compress it and still have the same look, quality and the way it is viewed on the page?
3) I found that I like the look of some of the images that are oversized (meaning that only a portion of it is showing). Is there a way I can keep this look while compressing the image?
At your convenience,
Erek
Last edited by Erek4; Feb 17th, 2009 at 6:57 am.
Hi Erek,
Why would you have line breaks to position an image? Just use something along these lines;
That's the biggest issue with using lage images as backgrounds, use a photo editing application to find out what format and output quality sorts your purpose best.
As for your last question, if you just like that portion of the image showing, crop it accordingly and position it where you like it to be displayed.
All the best,
Why would you have line breaks to position an image? Just use something along these lines;
CSS Syntax (Toggle Plain Text)
#body { background: url(my image url) center center fixed; /*Other possible values include: top,right,bottom and left*/ }
That's the biggest issue with using lage images as backgrounds, use a photo editing application to find out what format and output quality sorts your purpose best.
As for your last question, if you just like that portion of the image showing, crop it accordingly and position it where you like it to be displayed.
All the best,
If this reply solved your problem, please add to my reputation and don't forget to mark this thread as solved.
Magneato, thanks for the tip and your patience, I will try this out. I will crop the image and size it accordingly and see how this works.
(Previously, I used the line break to lower the image to the bottom of the page, if I didn't it would show some white space at the bottom instead.)
The image format for my background is a jpg. from psdrockstar.com.
(Previously, I used the line break to lower the image to the bottom of the page, if I didn't it would show some white space at the bottom instead.)
The image format for my background is a jpg. from psdrockstar.com.
I did what you said by adding the followind in my css:
I cannot, however, spread the image across the page for some reason. Also, what is a good height and width for a background image in the css?
background: url(../../images/b2.jpg) center center fixed; I cannot, however, spread the image across the page for some reason. Also, what is a good height and width for a background image in the css?
Last edited by peter_budo; Feb 21st, 2009 at 4:32 am. Reason: Keep It Organized - For easy readability, always wrap programming code within posts in [code] (code blocks) and [icode] (inline code) tags.
[QUOTE=macneato;806593]Hi Erek,
Why would you have line breaks to position an image? Just use something along these lines;
I used the background: url() center center fixed;
I now need to spread the image from the center to the edges of the website (webpage). Is there an easy way to do this?
Erek
Why would you have line breaks to position an image? Just use something along these lines;
CSS Syntax (Toggle Plain Text)
#body { background: url(my image url) center center fixed; /*Other possible values include: top,right,bottom and left*/ }
I used the background: url() center center fixed;
I now need to spread the image from the center to the edges of the website (webpage). Is there an easy way to do this?
Erek
Here is a cool little link I found that may help you out.
http://www.htmlite.com/faq022.php
http://www.htmlite.com/faq022.php
Some of my work.
http://www.backroads-inc.com
http://www.pctradepost.net
http://www.movieboxes.net
[SIGPIC][/SIGPIC]
http://www.backroads-inc.com
http://www.pctradepost.net
http://www.movieboxes.net
[SIGPIC][/SIGPIC]
Glad to help
Some of my work.
http://www.backroads-inc.com
http://www.pctradepost.net
http://www.movieboxes.net
[SIGPIC][/SIGPIC]
http://www.backroads-inc.com
http://www.pctradepost.net
http://www.movieboxes.net
[SIGPIC][/SIGPIC]
![]() |
Similar Threads
- Why put up with the pain. Change browsers! (Web Browsers)
- How to SEO a large database driven site (Search Engine Optimization)
- help Optimizing code (Java)
- CSS layout problem in IE (HTML and CSS)
- bridge.dll and unable to download (Viruses, Spyware and other Nasties)
- Selectively Printing only Certain Divs (javascript/css question) (JavaScript / DHTML / AJAX)
- Content Breaking thru Borders (JavaScript / DHTML / AJAX)
Other Threads in the HTML and CSS Forum
- Previous Thread: css problems with left col/menu
- Next Thread: Help a School Teacher out with small CSS problem?
| Thread Tools | Search this Thread |
appointments asp background backgroundcolor beta browser bug calendar cart cgi code codeinjection corporateidentity css design development displayimageinsteadofflash dreamweaver emailmarketing epilepsy explorer firefox flash form format google griefers hackers hitcounter hover html ide ie7 ie8 iframe image images internet internetexplorer intranet iphone javascript jpeg layout macbook maps marketshare microsoft mozilla multimedia navigationbars news offshoreoutsourcingcompany opacity opera optimization pnginie6 positioning problem scroll seo shopping studio swf swf. textcolor timecolor titletags url urlseparatedwords visual visualization web webdevelopment webform website windows7





