FAQtoid

***Smug Eric*** · Nov-29-2011, 01:18 PM #1

So I was working with someone on their site today who wanted to have a single image stretch to fit whatever browser window. After some tinkering I found a rather simple way to make this work. (until CSS 3 is implemented in all browsers that is)

In your CSS:

Code:

#bgImg {
  position:fixed;
  width:100%;
  height:100%;
  top:0;
  left:0;
  z-index:-1;
}

In the Body Tag:

Code:

<img src="www.imageurl.com/photo.jpg" id="bgImg" />

itsdouet · Dec-02-2011, 11:18 PM #2

Hi, how about the gray background behind the slideshow? I can't get rid of it. http://itsdouet.com

Thank you for your help!

urbancowboy0914 · Dec-02-2011, 11:20 PM #3

Quote:

Originally Posted by itsdouet

Hi, how about the gray background behind the slideshow? I can't get rid of it. http://itsdouet.com

Thank you for your help!

Check where you last posted this question. I have answered it for you.

LJ2b2c · Dec-07-2011, 08:17 AM #4

Eric,

I only wanted this on my home page and certain categories. I came up with this to make it work, but is there a cleaner or easier way to do this?

/* Background */
#bgImg {
position:fixed;
width:0%;
height:0%;
top:0;
left:0;
z-index:-1;
}

.homepage #bgImg {
position:fixed;
width:100%;
height:100%;
top:0;
left:0;
z-index:-1;
}
.category_Football #bgImg {
position:fixed;
width:100%;
height:100%;
top:0;
left:0;
z-index:-1;
}
.category_Basketball #bgImg {
position:fixed;
width:100%;
height:100%;
top:0;
left:0;
z-index:-1;
}

***Smug Eric*** · Dec-07-2011, 03:02 PM #5

you could do this instead:

#bgImg {
display: none;
}

.homepage #bgImg, .category_Football #bgImg, .category_Basketball #bgImg {
display: block;
position:fixed;
width:100%;
height:100%;
top:0;
left:0;
z-index:-1;
}

LJ2b2c · Dec-08-2011, 04:54 AM #6

Yep, that looks much better. My solution seemed to be asking for problems.

Thanks,

LJ2b2c · Dec-27-2011, 09:34 AM #7

FYI, I expanded on the above to allow for the customization of the background on individual Share pages. With this, by changing the url in the Share description, you can make the background of each share different. In the Share Description I put something like;

<img src="your url here" id="sharebg" />

Add <HTML> tags if required

Shares without anything like this in the description are unchanged from the default.

Then I added the following to CSS;

#sharebg {
display: none;
}

.shareHomepage #sharebg {
display: block;
position:fixed;
width:100%;
height:100%;
top:0;
left:0;
z-index:-1;
}

Customization of Share Groups is not easy, but this may help.

Larry

LJ2b2c · Dec-27-2011, 09:44 AM #8

Here is a link to one I'm working with;

http://millerpics.smugmug.com/share/Video

The description for this Share Group is as follows;

<html>
<img src="http://millerpics.smugmug.com/photos...-5tXzScW-L.jpg" id="sharebg" />

<center><img src="http://millerpics.smugmug.com/photos.../i-VGsmM96.png"
height="133"
width="743"></center>
 
<div id="navcontainer4">
<ul>
<li><a href="/">Miller Home Page</a></li>
<li><a href="http://millerpics.smugmug.com/Other/...6_EXr7m">Jordan Family Photos</a></li>
<li><a href="http://millerpics.smugmug.com/Other/...7_BVRUW">Secure Galleries</a></li></ul>
 
</div>
</html>

dclphoto · May-30-2012, 09:49 AM #9

Quote:

Originally Posted by Smug Eric

So I was working with someone on their site today who wanted to have a single image stretch to fit whatever browser window. After some tinkering I found a rather simple way to make this work. (until CSS 3 is implemented in all browsers that is)

In your CSS:

Code:

#bgImg {
  position:fixed;
  width:100%;
  height:100%;
  top:0;
  left:0;
  z-index:-1;
}

In the Body Tag:

Code:

<img src="www.imageurl.com/photo.jpg" id="bgImg" />

You can see it in action here with a crappy photo of my dog in my hoodie:

http://erictest.smugmug.com/

Feel free to drag the borders of your browser around to make my dog get that fun house mirror look.

I am trying this and I typed this into the Body Tag (the green type is the name of the image):
<img src="www.dclphoto.com/image2.jpg" id="bgImg" />

Nothing appeared to happen, so I tried this in the Body Tag:
<img src="www.dclphoto.com/photo.jpg" id="bgImg" />

Neither is creating a full spread of the image across my screen. Any suggestions as to what I am doing incorrectly?

***Smug Eric*** · May-30-2012, 01:29 PM #10

You need the actual url of the image. Go into the gallery you have uploaded it to. Select the Share ~> Get a Link option and get the largest one there. Paste that into the quotations.

dclphoto · May-31-2012, 06:47 AM #11

Thank you! That did work, but it only stretched my image horizontally. Is there a way to stretch it and keep in in proportion to avoid distortion of the image?

***Smug Eric*** · May-31-2012, 02:50 PM #12

I'm not seeing the code for it on your site.

dclphoto · Jun-01-2012, 11:42 PM #13

Quote:

Originally Posted by Smug Eric

I'm not seeing the code for it on your site.

I removed it because I didnt want it seen by visitors. The distortion is less appealing than the smaller background. Do I need to apply for you to investigate?

denisegoldberg · Jun-02-2012, 04:23 AM #14

Quote:

Originally Posted by dclphoto

The distortion is less appealing than the smaller background.

Keep in mind that as the viewer changes the size of the browser window the image will distort - unless Eric has a different method to try here. You can see that by changing the size of the window using the sample link from the first post.

--- Denise

dclphoto · Jun-02-2012, 07:47 AM #15

Quote:

Originally Posted by denisegoldberg

Keep in mind that as the viewer changes the size of the browser window the image will distort - unless Eric has a different method to try here. You can see that by changing the size of the window using the sample link from the first post.

--- Denise

OK. So is there a way to enlarge the background image and have it accomodate according to the browser? If not, I will just leave it as is. Wasted space on the side gutters is the better of two evils I guess.

***Smug Eric*** · Jun-05-2012, 01:50 PM #16

I've only seen the fixed size or the stretchy hack I came up with here. But if you don't want it to distort you can choose to remove either the width: 100%; or height: 100%; lines. If the code is only expanding it on one dimension then they could be some blank space at the bottom or at the sides of the page depending on which you remove. But with that the image would not distort.

Weather Nerd · Jun-30-2012, 03:45 PM #17

You, Denise and the whole SM crew rock! Denise, I did a little tweaking in photoshop to allow for some stretch and increased pixel size. I'm not sure how well it help, the largest monitor I have is 17'. Thank you guys for your help. My light bulb clicked on too. What if I wanted to put a .gif? I tried with one my test vids and it loaded, but didn't play. I'm a real dummy when it comes to code, but I have downloaded the 50 page CSS tut. Thank you all for sharing what code you have written.

Again, you guys rock!

Chad

tobeme · Nov-24-2012, 04:24 AM #18

I used this code on my site but the image is shown as a 'header' instead of as a background image.

I took out the image url for now.

Here is my site: www.wallacehuo.info

G and E · Feb-27-2013, 02:55 AM #19

Quote:

Originally Posted by Smug Eric

you could do this instead:

#bgImg {
display: none;
}

.homepage #bgImg, .category_Football #bgImg, .category_Basketball #bgImg {
display: block;
position:fixed;
width:100%;
height:100%;
top:0;
left:0;
z-index:-1;
}

Ok, so I got the full-sized stretchy on the homepage only, but now the dropdown menu on my homepage doesn't work. It works fine on all the other pages, so it must be something with the image - any idea what it could be?

Elan


Similar Threads	Thread Starter	Forum	Replies	Last Post

How To Maximize Your Findability (Search Engine Stuff)	Andy	SmugMug Support	1039	Jun-18-2012 05:30 AM
Correcting Chromatic Aberration in Adobe Camera Raw 5.6 - a few suggestions	pathfinder	Grad School	3	Jun-17-2011 01:34 PM
Photographic Terms: A - L	ivar	Tutorials	0	May-25-2011 12:08 PM
Professonional Photoshop, Chapter 8: Keeping the Black and White in Color	mwgrice	Finishing School	7	Feb-13-2007 11:58 AM
Chapter 11 - Retouching in LAB - Late and Incomplete	pathfinder	Finishing School	12	Mar-18-2006 08:12 AM

Thread Tools
Show Printable Version Email this Page
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode

FAQtoid

Dgrin Challenges

Need some help with Accessories?

Tutorials

The Hot Seat

Africa!

SmugMug How To:

SmugMug News:

SmugMug Status

Nov-29-2011, 01:18 PM #1
*Smug Eric* ^OP Smug Hero Join Date: Sep 2008 Posts: 2,671	Stretchy Background Image So I was working with someone on their site today who wanted to have a single image stretch to fit whatever browser window. After some tinkering I found a rather simple way to make this work. (until CSS 3 is implemented in all browsers that is) In your CSS: Code: #bgImg { position:fixed; width:100%; height:100%; top:0; left:0; z-index:-1; } In the Body Tag: Code: <img src="www.imageurl.com/photo.jpg" id="bgImg" /> __________________ Eric Support Hero and Customeister http://www.smugmug.com/help Last edited by Smug Eric; Mar-14-2013 at 12:48 PM. Reason: The test page was changed

Dec-02-2011, 11:18 PM #2
itsdouet Beginner grinner Join Date: Dec 2011 Location: seattle Posts: 7	Hi, how about the gray background behind the slideshow? I can't get rid of it. http://itsdouet.com Thank you for your help!

Dec-07-2011, 08:17 AM #4
LJ2b2c Major grins Join Date: Jul 2010 Location: OKC Posts: 133	Eric, I only wanted this on my home page and certain categories. I came up with this to make it work, but is there a cleaner or easier way to do this? /* Background */ #bgImg { position:fixed; width:0%; height:0%; top:0; left:0; z-index:-1; } .homepage #bgImg { position:fixed; width:100%; height:100%; top:0; left:0; z-index:-1; } .category_Football #bgImg { position:fixed; width:100%; height:100%; top:0; left:0; z-index:-1; } .category_Basketball #bgImg { position:fixed; width:100%; height:100%; top:0; left:0; z-index:-1; } __________________ http://millerpics.smugmug.com/

Dec-07-2011, 03:02 PM #5
*Smug Eric* ^OP Smug Hero Join Date: Sep 2008 Posts: 2,671	you could do this instead: #bgImg { display: none; } .homepage #bgImg, .category_Football #bgImg, .category_Basketball #bgImg { display: block; position:fixed; width:100%; height:100%; top:0; left:0; z-index:-1; } __________________ Eric Support Hero and Customeister http://www.smugmug.com/help

Dec-08-2011, 04:54 AM #6
LJ2b2c Major grins Join Date: Jul 2010 Location: OKC Posts: 133	Yep, that looks much better. My solution seemed to be asking for problems. Thanks, __________________ http://millerpics.smugmug.com/

Dec-27-2011, 09:34 AM #7
LJ2b2c Major grins Join Date: Jul 2010 Location: OKC Posts: 133	FYI, I expanded on the above to allow for the customization of the background on individual Share pages. With this, by changing the url in the Share description, you can make the background of each share different. In the Share Description I put something like; <img src="your url here" id="sharebg" /> Add <HTML> tags if required Shares without anything like this in the description are unchanged from the default. Then I added the following to CSS; #sharebg { display: none; } .shareHomepage #sharebg { display: block; position:fixed; width:100%; height:100%; top:0; left:0; z-index:-1; } Customization of Share Groups is not easy, but this may help. Larry __________________ http://millerpics.smugmug.com/

Dec-27-2011, 09:44 AM #8
LJ2b2c Major grins Join Date: Jul 2010 Location: OKC Posts: 133	Here is a link to one I'm working with; http://millerpics.smugmug.com/share/Video The description for this Share Group is as follows; <html> <img src="http://millerpics.smugmug.com/photos...-5tXzScW-L.jpg" id="sharebg" /> <center><img src="http://millerpics.smugmug.com/photos.../i-VGsmM96.png" height="133" width="743"></center> <BR> <div id="navcontainer4"> <ul> <li><a href="/"><font color=#ffffff><strong>Miller Home Page</strong></font></a></li> <li><a href="http://millerpics.smugmug.com/Other/...6_EXr7m"><font color=#ffffff><strong>Jordan Family Photos</strong></font></a></li> <li><a href="http://millerpics.smugmug.com/Other/...7_BVRUW"><font color=#ffffff><strong>Secure Galleries</strong></font></a></li></ul> <BR> </div> </html> __________________ http://millerpics.smugmug.com/

May-30-2012, 01:29 PM #10
*Smug Eric* ^OP Smug Hero Join Date: Sep 2008 Posts: 2,671	You need the actual url of the image. Go into the gallery you have uploaded it to. Select the Share ~> Get a Link option and get the largest one there. Paste that into the quotations. __________________ Eric Support Hero and Customeister http://www.smugmug.com/help

May-31-2012, 06:47 AM #11
dclphoto Big grins Join Date: Jan 2011 Location: Oregon Posts: 72	Thank you! That did work, but it only stretched my image horizontally. Is there a way to stretch it and keep in in proportion to avoid distortion of the image?

May-31-2012, 02:50 PM #12
*Smug Eric* ^OP Smug Hero Join Date: Sep 2008 Posts: 2,671	I'm not seeing the code for it on your site. __________________ Eric Support Hero and Customeister http://www.smugmug.com/help

Jun-05-2012, 01:50 PM #16
*Smug Eric* ^OP Smug Hero Join Date: Sep 2008 Posts: 2,671	I've only seen the fixed size or the stretchy hack I came up with here. But if you don't want it to distort you can choose to remove either the width: 100%; or height: 100%; lines. If the code is only expanding it on one dimension then they could be some blank space at the bottom or at the sides of the page depending on which you remove. But with that the image would not distort. __________________ Eric Support Hero and Customeister http://www.smugmug.com/help

Jun-30-2012, 03:45 PM #17
Weather Nerd Big grins Join Date: May 2012 Location: Oklahoma Posts: 12	You, Denise and the whole SM crew rock! Denise, I did a little tweaking in photoshop to allow for some stretch and increased pixel size. I'm not sure how well it help, the largest monitor I have is 17'. Thank you guys for your help. My light bulb clicked on too. What if I wanted to put a .gif? I tried with one my test vids and it loaded, but didn't play. I'm a real dummy when it comes to code, but I have downloaded the 50 page CSS tut. Thank you all for sharing what code you have written. Again, you guys rock! Chad

Nov-24-2012, 04:24 AM #18
tobeme Major grins Join Date: Apr 2012 Location: Hong Kong Posts: 125	I used this code on my site but the image is shown as a 'header' instead of as a background image. I took out the image url for now. Here is my site: www.wallacehuo.info