943,631 Members | Top Members by Rank

Web Development > Web Design > HTML and CSS > Spread Image Across Page
Ad:
Permalink
Feb 17th, 2009
0

Spread Image Across Page

Expand Post »
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
Last edited by Erek4; Feb 17th, 2009 at 6:57 am.
Similar Threads
Reputation Points: 10
Solved Threads: 0
Light Poster
Erek4 is offline Offline
34 posts
since Feb 2009
Permalink
Feb 18th, 2009
1

Re: Spread Image Across Page

Hi Erek,

Why would you have line breaks to position an image? Just use something along these lines;

CSS Syntax (Toggle Plain Text)
  1. #body {
  2. background: url(my image url) center center fixed;
  3. /*Other possible values include: top,right,bottom and left*/
  4. }

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,
Reputation Points: 46
Solved Threads: 48
Posting Pro in Training
macneato is offline Offline
410 posts
since Jun 2007
Permalink
Feb 19th, 2009
0

Re: Spread Image Across Page

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.
Reputation Points: 10
Solved Threads: 0
Light Poster
Erek4 is offline Offline
34 posts
since Feb 2009
Permalink
Feb 21st, 2009
0

Re: Spread Image Across Page

I did what you said by adding the followind in my 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.
Reputation Points: 10
Solved Threads: 0
Light Poster
Erek4 is offline Offline
34 posts
since Feb 2009
Permalink
Feb 25th, 2009
0

Re: Spread Image Across Page

[QUOTE=macneato;806593]Hi Erek,

Why would you have line breaks to position an image? Just use something along these lines;

CSS Syntax (Toggle Plain Text)
  1. #body {
  2. background: url(my image url) center center fixed;
  3. /*Other possible values include: top,right,bottom and left*/
  4. }


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
Reputation Points: 10
Solved Threads: 0
Light Poster
Erek4 is offline Offline
34 posts
since Feb 2009
Permalink
Feb 26th, 2009
0

Re: Spread Image Across Page

Here is a cool little link I found that may help you out.
http://www.htmlite.com/faq022.php
Reputation Points: 14
Solved Threads: 2
Light Poster
efaith77 is offline Offline
25 posts
since Sep 2006
Permalink
Feb 28th, 2009
0

Re: Spread Image Across Page

James this is great! I will implement this into my site.
Thanks a lot!!!
Erek
Reputation Points: 10
Solved Threads: 0
Light Poster
Erek4 is offline Offline
34 posts
since Feb 2009
Permalink
Feb 28th, 2009
0

Re: Spread Image Across Page

Glad to help
Reputation Points: 14
Solved Threads: 2
Light Poster
efaith77 is offline Offline
25 posts
since Sep 2006

This thread is solved

Either the thread starter or a moderator has marked this thread as solved. You can most likely trust the responses and answers given. There is most likely no reason for any further responses to be posted here. If you have a related question, please start a new thread in this forum instead.

This thread is more than three months old

No one has posted to this discussion for at least three months. Please let old threads die and do not reply to them unless you feel you have something new and valuable to contribute that absolutely must be added to make the discussion complete. Otherwise, please start a new thread in this forum instead.
Message:
Previous Thread in HTML and CSS Forum Timeline: css problems with left col/menu
Next Thread in HTML and CSS Forum Timeline: Help a School Teacher out with small CSS problem?





About Us | Contact Us | Advertise | Acceptable Use Policy
Forum Index | Build Custom RSS Feed


Follow us on Twitter


© 2011 DaniWeb® LLC