Image in header. Need help. [#1196454]

Hi,

I'd appreciate it if someone could help me out here. I can't get my image to show in the header.

Following another thread here's the changes I've made to sites/all/themes/acquia_marina/css/fusion-acquia-marina-style.css

/* Add general site styling here for typography and background */
body {
font-size: 75%; /* also set in fusion_starter.info: settings[base-font-size] = font-size-12 */
background: #FFF url('sites//files/header_w-palm trees.png') repeat-x top; /* body background url goes here */
}

and

/* Header Top region to the bottom of Header region */
/* For full-width header background, add background image/color here */
#header-group-wrapper {
background-color: transparent;
}

I've tried clearing caches and that didn't help.

What am I missing?

Thanks, CC

Comments

Comment #1

sheena_d CreditAttribution: sheena_d commented 22 June 2011 at 14:49

Component:	Code	» Documentation
Status:	Active	» Closed (fixed)

CC,

FIrst, you should not be making changes to fusion-acquia-marina-style.css, this will make things very difficult for you in the future if you ever need to upgrade the theme. Read our documentation about customizing your theme and the section on "using local.css" http://fusiondrupalthemes.com/support/documentation/customizing-your-theme

Secondly, the path to your image needs to be relative to the location of your CSS file (also, having two slashes after 'sites' is going to create an invalid path). Here is a tutorial on defining background images with CSS http://www.w3schools.com/css/css_background.asp and here is a tutorial on the difference between relative and absolute paths: http://webdesign.about.com/od/beginningtutorials/a/aa040502a.htm

Hope this helps,
Sheena

Comment #2

CharlieCastle CreditAttribution: CharlieCastle commented 22 June 2011 at 21:05

Once again you've gone above and beyond.

Thanks! CC

Comment #3

CharlieCastle CreditAttribution: CharlieCastle commented 22 June 2011 at 21:34

Well I think I'm doing it correctly now; but still no joy.

Here's my local.css
/* Add general site styling here for typography and background */
body {
background: #FFF url('../..//files/header_w-palm trees.png') repeat-x top; /* body background url goes here */
}

/* Header Top region to the bottom of Header region */
/* For full-width header background, add background image/color here */
#header-group-wrapper {
background-color: transparent;
}

I guess what I don't appreciate is where the code is being executed from.

is at the same level as drupal/sites/all so I should find the image is at ../..//files

Shouldn't this work? Why not?

Thanks, CC

Comment #4

sheena_d CreditAttribution: sheena_d commented 22 June 2011 at 21:44

You have some extra random slashes in there.

Also, for best results, your image should be within your theme directory.

Comment #5

karpertim CreditAttribution: karpertim commented 24 November 2011 at 15:10

Status:

Closed (fixed)

» Active

hello,

I've read up on your documentation and the links you have given.

I've located the local-sample.css file and renamed it to local.css
I've addes these lines to it:
/* Add general site styling here for typography and background */
body {
background: #FFF url('http://www.mywebsite.com/files/headerbg.png') repeat-x top; /* body background url goes here */
}

/* Header Top region to the bottom of Header region */
/* For full-width header background, add background image/color here */
#header-group-wrapper {
background-color: transparent;
}

I've choosen a absolute path so i can't have the file in the wrong place.
I've then uploaded it to the server, both css and png file…

After that I've checked Devel to "Rebuild the theme registry on every page load"

But I don't see changes to the header region...

Comment #6

sheena_d CreditAttribution: sheena_d commented 24 November 2011 at 15:37

Status:

Active

» Closed (fixed)

If you put http://www.mywebsite.com/files/headerbg.png into your web browser, do you see the image you are wanting to use?

If not, then your path is incorrect. Most likely the correct path is http://www.mywebsite.com/sites/all/files/headerbg.png

Comment #7

karpertim CreditAttribution: karpertim commented 25 November 2011 at 12:25

Status:

Active

» Closed (fixed)

Comment #8

karpertim CreditAttribution: karpertim commented 25 November 2011 at 12:24

Status:

Closed (fixed)

» Active

No, the path is correct if I go to the url http://www.mywebsite.com/files/headerbg.png
I see the picture

Comment #9

karpertim CreditAttribution: karpertim commented 25 November 2011 at 13:33

ive managed to get it done by re-handeling the logo in the page.tpl.php

Comment #10

Anisorf CreditAttribution: Anisorf commented 12 July 2012 at 10:57

Hey karpertim , i'm trying to do the same thing, i've try like explained in the comments but no result, at max i got having the image in the header by doing only :
#header-group-wrapper {
background: transparent url(../images/banner.png) no-repeat scroll left top;
height: 130px;
}
but than the main menu got in the middle of the img :o ...So please if you can explain how did you manage to do this.

Thanks in advance to you and also to sheena_d,CharlieCastle.