HTML, CSS and anything else that deals with client side capabilities.
Moderator: General Moderators
-
Vegan
- Forum Regular
- Posts: 574
- Joined: Fri Sep 05, 2008 3:34 pm
- Location: Victoria, BC
-
Contact:
Post
by Vegan »
I have created a gradient bar I wanted to use as a background in a <div> with some text on top of the image
background-image has been problematic even with a fully qualified URL
so I wonder if I am doing things wrong
the part of my gaming site I am attempting to place the image is the site banner, the blue gradient looks better

Hardcore Games™ Legendary is the Only Way to Play™
My site is powered by LAMP
-
Vegan
- Forum Regular
- Posts: 574
- Joined: Fri Sep 05, 2008 3:34 pm
- Location: Victoria, BC
-
Contact:
Post
by Vegan »
Figured out the problem, cannot put the background image into a style in a CSS sheet
using a <div> and a oversized wide graphic works only with the inline declaration
sure seems to be sensitive to placing objects to create an FX
Hardcore Games™ Legendary is the Only Way to Play™
My site is powered by LAMP
-
Christopher
- Site Administrator
- Posts: 13596
- Joined: Wed Aug 25, 2004 7:54 pm
- Location: New York, NY, US
Post
by Christopher »
Vegan wrote:Figured out the problem, cannot put the background image into a style in a CSS sheet
You can use background-image in style sheets, but you need to use url(). Can you post some code?
(#10850)
-
Vegan
- Forum Regular
- Posts: 574
- Joined: Fri Sep 05, 2008 3:34 pm
- Location: Victoria, BC
-
Contact:
Post
by Vegan »
Code: Select all
blue-grad {
width: 100%;
background-image:url('http://www.hardcore-games.tk/images/gradient1.png');
background-repeat:repeat-x;
}
and the site body is
Code: Select all
#global {
max-width: 1900px;
margin: 0 auto;
background-color: #90ff90;
padding: 10px;
}
Hardcore Games™ Legendary is the Only Way to Play™
My site is powered by LAMP
-
Christopher
- Site Administrator
- Posts: 13596
- Joined: Wed Aug 25, 2004 7:54 pm
- Location: New York, NY, US
Post
by Christopher »
Don't use quotes around the URL in background-image:url()
(#10850)