Problem using "Background-image" in CSS

Hello friends,

How are you all doing?

I tried adding a background image to my design but the image seem to interrupt the other contents on the page. That is, it enters into my layout ID and Class, so instead of me seeing the color i assigned to the ID/Class, i get the background image replacing the bg-color.

Please my friends, how do i do it so the bg-image shows without it affecting the color i assigned to my page layout.

This is the code i used:
background-image:url(images/myimage.jpeg) repeat-x ;

Thanks,
Golden Waters
 

PixelPusher

Super Moderator
Staff member
Based on the code you have shown, you are using too many values for the given css property. "background-image" accepts only the image path for the image. You cannot set the repeat value here. That is where "background-repeat" comes into play. Now that being said, you can use the shorthand version "background". Here you can define the background color, image, position, scroll, and repeat values. Also to adjust the background color, you can do one of two things:
  1. Omit the value - It will then resort to the inherit or transparent color.
  2. Set the value to "transparent" (self explanatory)

CSS background property (shorthand)

Available Values

background: [color] [position (xPos, yPos)] [scroll] [...gImg.png) left top scroll no-repeat; [/code]
 
Top