Welcome Guest   ·   Login   ·   Register   ·   Member List
Forum Home  >  CSS help  >  Browser check or problems  >  Thread
Search  
  
  Advanced Search
   
1 of 2
1
2
Next
Vertical gradient body background glitch - ideas?
 
xenatorres
Posted: 16 January 2010 08:37 AM   [ Ignore ]
Newbie
Rank
Total Posts:  1
Joined  2010-01-16

Hey everyone. I encounted one hell of an odd issue today.

I caught this issue by chance and wonder if anyone knows how to correct it.

I am using a background image on the body tag - the image is a gradient that has a set width, and then repeats y down the page as needed.

However if the viewer has a smaller view window, the gradient image is shrunk. So instead of using the width the image actually IS (in this case 1225px), it adjusts to the size of the window, mucking up my layout.

Here’s some screenshots:

http://www.julieruffell.com/gradient1.jpg (how it SHOULD look)
http://www.julieruffell.com/gradient2.jpg (how it looks when the window is shrunk)

The only way I can think to fix this issue is to move the image into the div box setting the size of the site (since it sets a width value), however, the background will only appear there if I set a height value (I also don’t like the look as it adds space at the top), but I use the layout on many different sized pages, and want to be able to add text without having to resize the background every time.

I have tried using a height of 100% - no background image when used in the wrapper.

Does anyone know how to make the browsers leave the image at it’s correct size, or how to put a background image into a DIV that repeats as long as there is content, withOUT a height value (if I HAVE to do that)?

This is only an issue because the background image is a gradient. Any other image - no problem. Bizarre!

Profile
 
 
miguel
Posted: 01 May 2010 09:46 PM   [ Ignore ]   [ # 1 ]
Sr. Member
RankRankRankRank
Total Posts:  139
Joined  2010-04-23

Those links are broken.
____________________
sudoku - social - puppies

Profile
 
 
Joe Smith
Posted: 14 July 2010 11:01 PM   [ Ignore ]   [ # 2 ]
Newbie
Rank
Total Posts:  2
Joined  2010-07-14

I would like to help you but those links are not working :(

Profile
 
 
lehman137
Posted: 15 July 2010 10:58 AM   [ Ignore ]   [ # 3 ]
Newbie
Rank
Total Posts:  1
Joined  2010-07-15

I already referred this to my friend.

Regards

lehman137

Profile
 
 
ciddiadam
Posted: 08 November 2010 12:24 AM   [ Ignore ]   [ # 4 ]
Jr. Member
RankRank
Total Posts:  39
Joined  2010-10-06

the links are broken.. but I know, the problem arises from the width of the picture

Profile
 
 
klaushik
Posted: 24 January 2011 10:28 AM   [ Ignore ]   [ # 5 ]
Newbie
Rank
Total Posts:  4
Joined  2011-01-24

It is important to choose right one since the first time. Thank you for the tips.
Proper care will save money in long term

California DUI Lawyer  |  FHA Loans.

Profile
 
 
trader
Posted: 24 January 2011 04:46 PM   [ Ignore ]   [ # 6 ]
Newbie
Rank
Total Posts:  15
Joined  2011-01-17

I ended up MOSTLY correcting the issue so I removed them

Profile
 
 
beggar
Posted: 25 January 2011 03:11 PM   [ Ignore ]   [ # 7 ]
Newbie
Rank
Total Posts:  23
Joined  2011-01-06

The background is positioned in the center - so it’s not stretching exactly -

Profile
 
 
jacks willey
Posted: 28 January 2011 09:10 AM   [ Ignore ]   [ # 8 ]
Newbie
Rank
Total Posts:  1
Joined  2011-01-28

Your concepts were simple to understand that I wondered why I in no way looked at it prior to. Glad to know that there’s a blogger out there that certainly understands what he’s discussing. Great job.    spy on text messages

Profile
 
 
linday
Posted: 28 January 2011 11:21 AM   [ Ignore ]   [ # 9 ]
Newbie
Rank
Total Posts:  2
Joined  2011-01-28

I am glad to catch idea from your article. It has information I have been searching for a long time. This looks absolutely perfect. All these tinny details are made with lot of background knowledge. I like it a lot.  cell phone spyware

Profile
 
 
mysteriouss1982
Posted: 01 February 2011 01:01 PM   [ Ignore ]   [ # 10 ]
Newbie
Rank
Total Posts:  12
Joined  2011-01-17

Similar problem..

Profile
 
 
bukmak
Posted: 02 February 2011 06:38 AM   [ Ignore ]   [ # 11 ]
Newbie
Rank
Total Posts:  3
Joined  2011-02-02
.wrap {
  background: #333 url(newline.jpg) repeat-y top left;
  margin: 0 auto;
  position: relative;
  width: 1224px;
} 

Posssibly because the background’s height is set to auto.
______________________________________
_____Bukmak_____

Profile
 
 
plastik
Posted: 02 February 2011 01:54 PM   [ Ignore ]   [ # 12 ]
Jr. Member
RankRank
Total Posts:  44
Joined  2010-10-13

It only seems like it disappear.

Profile
 
 
kelamanee
Posted: 11 February 2011 12:40 PM   [ Ignore ]   [ # 13 ]
Newbie
Rank
Total Posts:  1
Joined  2011-02-11

Thanks for the information in this blog. Once again you have proved your excellency and creativity in yours. Since I am the frequent visitor for this blog waiting for some more new posts from you in this blog. Thanks for sharing. Regards.      mobile phone spying

Profile
 
 
lossie hybird
Posted: 28 February 2011 12:02 PM   [ Ignore ]   [ # 14 ]
Newbie
Rank
Total Posts:  1
Joined  2011-02-28

This is a very informative article.I was looking for these things and here I found it. I am doing a project and this information is very useful me.
cell phone spy software

Profile
 
 
cem
Posted: 01 March 2011 01:10 AM   [ Ignore ]   [ # 15 ]
Newbie
Rank
Total Posts:  1
Joined  2011-03-01

That is very good comment you shared.Thank you so much that for you shared those things with us.Im wishing you to carry on with ur achivments.All the best.
chat | chat sohbet

Profile
 
 
   
1 of 2
1
2
Next
 
‹‹ Logo won’t show up in IE only?      Firefox and 100% height not working HELP! ››