Forums

ccc630

Anyone ever had a problem with the background image on a header disappearing when you add no-repeat? So,

background-image: url("images/pic.jpg");

displays the image, but with the image repeating.

background-image" url("images/pic.jpg") no-repeat;

makes the picture disappear entirely. For reference, here's the entire block for the header:

body>header {
	background-image: url("images/epsoclogo.jpg") no-repeat;
	height: 300px;
	padding: 33px;
	color: #ccc;
	}

(display: block is specified in a global statement earlier in the css file). As extra info, this is a WP 3.3.1 build using the H5 theme by Jeff Starr.

I have a horrible feeling I'm missing something terribly obvious and will be insanely embarrassed once someone points it out to me, but would be thrilled if someone can tell me what I'm doing wrong.

karlpcrowley

Two ways to do this
The easiest way

background: url("images/epsoclogo.jpg") no-repeat;

or else

background-image: URL(images/epsoclogo.jpg);    background-repeat: no-repeat;

joshuanhibbert

If you copied and pasted your code then the issue is a simple typo.

This:

background-image" url("images/pic.jpg") no-repeat;

Should actually be this:

background: url("images/pic.jpg") no-repeat;

EDIT: As @karlpcrowley already said.

kgscott284

To break it down and explain exactly what you did..."background-image" is to specify just the image. Using the shorthand "background" instead, you can specify the repeat property as well as position and background color all in one line

ylc66

maybe :

background: url("images/pic.jpg") transparent center center no-repeat;

so you can control position (here : 'center center') and background-color (here :'transparent' ) if your image upload fails.

ccc630

Thanks for the help, folks -- don't know why I was stuck on using background-image instead of background -- feel a bit foolish now, as I really did know that -- thanks again!

ylc66

you're welcome !

treehouse : what would you like to learn today?

Forums

[Solved] Problem with background-image (resolved)