SOLVED: Use background image instead of color
-
-
- Randy Way
- Newbie
- Posts: 10
- Thanks: 1
-
I found another thread that explained how to use a custom background image for the header in Gantry, but when I edit the style1.css and add
#rt-header {background:url(../images/header-bg.jpg) no-repeat;}
the background image works, but is shifted to the left of the page. Any advice on how to center it with the rest of the page is appreciated. - Last Edit: 12 years 2 months ago by Randy Way.
-
-
-
- Cliff Pfeifer
- Preeminent Rocketeer
- Posts: 8444
- Thanks: 20
- Website Developer
-
Can you please provide a link to your site so I can take a closer look?
Please check the Top Tips for Support for the info we need to provide the quickest and best response. - The difficult we do immediately, the impossible takes a little longer.
-
-
-
- Randy Way
- Newbie
- Posts: 10
- Thanks: 1
-
www.executivepartners.com/wp
Thanks! - Last Edit: 12 years 2 months ago by Randy Way.
-
-
-
- Cliff Pfeifer
- Preeminent Rocketeer
- Posts: 8444
- Thanks: 20
- Website Developer
-
Thanks for the link. You have to use x-y coordinates to position your background property, they go in between the url and the repeat property like soThe first number is the horizontal position, in this case 50% will be the middle, and the second it the vertical position, 0 puts it at the top. You can use percentages or pixel values. Hope that helps.
#rt-header {background:url(../images/header-bg.jpg) 50% 0 no-repeat;} - The difficult we do immediately, the impossible takes a little longer.
-
-
-
- Randy Way
- Newbie
- Posts: 10
- Thanks: 1
- Thanks! that helped. But the header image seem to be shifted to the right of the rest of the page by 2 pixels or so. The header image is 960px by 155px. Any ideas on why it doesn't line up perfectly?
-
-
-
- Cliff Pfeifer
- Preeminent Rocketeer
- Posts: 8444
- Thanks: 20
- Website Developer
-
Try putting your image inside of #rt-header .rt-container, instead of #rt-header. The issue with putting it in any of the base elements is they have no defined width, if I increase or decrease my browser window it lines up, or gets off. The 50% in #rt-header is relative to the width of the browser window. .rt-container has a set width of 960px. Try this instead:
#rt-header .rt-container {background:url(../images/header-bg.jpg) 50% 0 no-repeat;} - The difficult we do immediately, the impossible takes a little longer.
-
-
-
- Randy Way
- Newbie
- Posts: 10
- Thanks: 1
- When I do that, the header image disappears completely and only the background tile is visible. I did notice that before I made the code change, it seemed t only show up in Chrome with the image shifted by a pixel or two. IE and Firefox look perfect. It may just be an issue with Chrome. If it is, i can live with that.
-
-
-
- Randy Way
- Newbie
- Posts: 10
- Thanks: 1
-
here is the entire stylesheet
/** * @version 1.21 October 20, 2011 * @author RocketTheme http://www.rockettheme.com * @copyright Copyright (C) 2007 - 2011 RocketTheme, LLC * @license http://www.gnu.org/licenses/gpl-2.0.html GNU/GPLv2 only */ /* Core */ body {background: url(../images/fabric_plaid.png) !important;} #rt-header .rt-container {background:url(../images/header-bg.jpg) 50% 0 no-repeat;} , #rt-bottom {color: #aaa;} .rt-container {background: #fff;} a:hover {color: #000;} #rt-footer, #rt-copyright {color: #ddd;} #rt-sidebar-a {background-color: #e0e0e0;} #rt-sidebar-b {background-color: #e9e9e9;} #rt-sidebar-c {background-color: #f0f0f0;} #gantry-viewswitcher {margin: 0 auto 1em;position: relative;} /* Navigation - Core */ #rt-menu ul.menu li a, .menutop.theme-fusion li.root > .item, .menu-type-splitmenu .menutop.theme-splitmenu li .item {color: #fff;} .menutop.theme-fusion li.parent.root > .item span, .menu-type-splitmenu .menutop.theme-splitmenu li.parent .item span {background: url(../images/menus/menutop-daddy.png) 100% 50% no-repeat;} /* Navigation - Hovers */ #rt-menu ul.menu li a:hover, .menutop.theme-fusion li.root > .item:hover, .menutop.theme-fusion li.active.root.f-mainparent-itemfocus > .item, .menutop.theme-fusion li.root.f-mainparent-itemfocus > .item, .menu-type-splitmenu .menutop.theme-splitmenu li:hover > .item {background: #444;color: #fff;} /* Navigation - Active */ #rt-menu ul.menu li.active a, #rt-menu ul.menu li.active a:hover, .menutop.theme-fusion li.root.active > .item, .menutop.theme-fusion li.root.active > .item:hover, .menu-type-splitmenu .menutop.theme-splitmenu li.active .item {background: #fff;color: #000;} /* Navigation - Dropdowns */ .menutop.theme-fusion .fusion-submenu-wrapper {background: #444;} .menutop.theme-fusion .fusion-submenu-wrapper.level3, .menutop.theme-fusion .fusion-submenu-wrapper.level4, .menutop.theme-fusion .fusion-submenu-wrapper.level5, .menutop.theme-fusion .fusion-submenu-wrapper.level6 {background: #515151;} .menutop.theme-fusion ul li > .item {color: #fff;} .menutop.theme-fusion ul li > .item:hover, .menutop.theme-fusion ul li.f-menuparent-itemfocus > .item {background: #333;color: #ccc;} .menutop.theme-fusion ul li > .daddy span {background: url(../images/menus/dropdown-daddy.png) 100% 50% no-repeat;} .menutop.theme-fusion .fusion-grouped ol li > .item {background: url(../images/menus/menu-arrow.png) 5px 50% no-repeat;}
-
-
-
- Cliff Pfeifer
- Preeminent Rocketeer
- Posts: 8444
- Thanks: 20
- Website Developer
-
I see what's happening, I think there is a color chooser that sets the header background and it's set to transparent? Either way, that is overriding your background image, just add !important to the end like:That should work.
#rt-header .rt-container {background:url(../images/header-bg.jpg) 50% 0 no-repeat !important;} - The difficult we do immediately, the impossible takes a little longer.
-
Time to create page: 0.054 seconds