Header images

Support
#1

Hi I’m trying to replicate the design on my website which currently runs my own built theme. I’d like to use X, but don’t want to change the layout and colours at the moment. http://www.newforestwalker.co.uk

I’ve used X a fair bit and thought it would be straightforward, but I’m having an issue with the header. The current background image for the header actually drops below the nav bar so that it blends with the tiled background of the whole page. I thought I might be able to do this using stacked images in CSS, but it seems I can’t use CSS to add images to the body (which I think pulls its background from the Theme Options), I’ve tried to using the additional CSS, but it just ignores me. Likewise, I’ve tried to add the stacked images to the x-root div, but that is also ignored.

If I add the code to the logo bar, the top image cannot drop below the nav bar as it currently does. I really don’t want to have to use a full size background image for the site.

The code I’ve been trying to add to the site background is:

div#site {
background-image: url(http://www.newforestwalker.co.uk/wp-content/uploads/2020/05/backhead.jpg), url(http://www.newforestwalker.co.uk/wp-content/uploads/2020/05/back.gif);
background-position: left,top, left top;
background-repeat: no-repeat, repeat;
height: 200px;
}

Could you tell me how I might achieve this please? Please note that I’m currently developing on the X theme using WP Theme Test, so what you see is the original theme.

Thank you

#2

Hello @RoPadel,

Thanks for writing in! To accomplish what you have in the current site, you must make sure that the logobar and the navbar will have a transparent background first. Please go to X > Theme Options > {your-stack} and use the color pickers to set the background color. And then you will have to apply the background image to the body element and the .site class container element instead. Therefore, your custom CSS code may be this:

body {
    background-image: url(http://www.newforestwalker.co.uk/wp-content/uploads/2020/05/back.gif);
    background-position: left top;
    background-repeat: repeat;
}

.site {
    background-image: url(http://www.newforestwalker.co.uk/wp-content/uploads/2020/05/backhead.jpg);
    background-position: left top;
    background-repeat: no-repeat;
}

.x-navbar,
.x-logobar {
    background-color: transparent;
}

The given code is just an example to get you started with. Feel free to make adjustment as needed. Here are some related links for further reading, this could help you in finding and implementing some CSS fixes:

#3

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.