WordPress.org

1. dleonte
   Member
   Posted 3 years ago #
   

   I have a background gif image that is a gradient color.

   How can I get it to fill the entire background? Nothing is showing up and I have double checked that background.gif is in the images folder for the F2 theme.

   http://ybhatt.virtuallyassistingu.com

   Here's the code I am using:
   body {
   background-image:url('images/background.gif');
   }

   Thanks so much.

2. alchymyth
   The Sweeper & Moderator
   Posted 3 years ago #
   

   question: with what do you want to fill the background?
   (technically speaking, it is already filling the whole background as you have horizontal and vertical repeat)
   your background.gif 5 * 250px) has this gradient, which ends in the serrated edge and a transparent lower quarter end.
   do you want the lower page to have the same color as the edge of your gradient?

   if so, try and edit the body background in your style.css:
   

   body {
   	margin:0 120px 0 120px;
   
   	padding:20px;
   	 background: #a7a1c7 url('images/background.gif') repeat-x;
   	color:#444;
   	font-size: 62.5%; /* Resets 1em to 10px */
   	font-family: 'Lucida Grande', Sans-Serif;
   	text-align:left;
   
   }

   refresh your browser afterwards, or reload the page, to make the change visible.

3. dleonte
   Member
   Posted 3 years ago #
   

   Cool. It worked. Is it the margin tag(?) that made the background.gif fill the entire background?

   Thanks so much.

4. alchymyth
   The Sweeper & Moderator
   Posted 3 years ago #
   

   i don't think so, as the margin(s) were the same as before, because i took the whole style from your existing site, and only changed the line with 'background'.

   i think it is more the added color '#a7a1c7' that matches the lower edge of your gradient, and the added 'repeat-x' which at the same time stopped the repeat y.

   if you like reading:
   http://www.w3schools.com/css/css_background.asp

5. dleonte
   Member
   Posted 3 years ago #
   

   I did not know of this resource at http://www.w3schools.com. Thanks so much.

Topic Closed

This topic has been closed to new replies.