Login | Register | FAQ
Anonymous

Background image photo to fit browser screen

+ Post a reply

Page 1 of 1


Background image photo to fit browser screen

by GronlundNewcomb » Thu Jan 12, 2012 6:55 pm

I am trying to put a 3000x2000 photograph as my background and I want it to fit the browser screen.

Right now I simply have this as my background line: <body background="background1.jpg">

It shows only the upper left hand corner of the image in my screen because it is not resizing to fit the browser. Any suggestions as to what I can do to fix this? Thank you.
User avatar

GronlundNewcomb

  • Posts: 8
  • Joined: Thu Jan 12, 2012 6:50 pm

Re: Background image photo to fit browser screen

by GronlundNewcomb » Thu Jan 12, 2012 7:54 pm

http://www.youtube.com/watch?v=6YlGJVqepLA

This video described it perfectly.
User avatar

GronlundNewcomb

  • Posts: 8
  • Joined: Thu Jan 12, 2012 6:50 pm

Re: Background image photo to fit browser screen

by atik » Fri Jan 13, 2012 3:42 pm

A large image means a large file size. So your page speed will be effected if you use it with resizing by the browser. So it would be better to resize it with any image editor like photoshop to fit it with your screen. But if there is a no other way but to resize your background image then you can use css3 background size property. The rule will be as follows
Code: Select all
body {
            background: url('images/image_1.jpg') no-repeat scroll;
            background-size: 100% 100%;
            min-height: 700px;
        }

You can edit your background size in px or % to fit your need.
For more info you can visit this page
http://www.w3schools.com/cssref/css3_pr_background-size.asp
User avatar

atik

  • Posts: 472
  • Joined: Mon Oct 17, 2011 4:55 pm

Re: Background image photo to fit browser screen

by steveelkins » Mon Feb 27, 2012 8:46 am

Would it help if you just resized the image to fit the browser?
User avatar

steveelkins

  • Posts: 12
  • Joined: Mon Feb 27, 2012 8:42 am
--
Is there a certain type of HTML I should be using when trying to create an e-commerce store that sells a survival seed bank supply? I want something that will help me to target gardeners that are interested in my product.


+ Post a reply

Page 1 of 1