-
Posts
-
I’m trying to replicate the top background effect (it’s the image with the site name, pictures, and flowers and is 1320px x 335 px) from the following site – http://goo.gl/wNUj
I’ve figured out how to drop the boxed layout down and have added a custom background image via the Styling section but can’t figure out how to add a full width image at the top like they have. I would like the background and top full width image to remain fixed and the header to remain a small fixed header and the body to disappear behind the full width image when scrolling.
Is this possible?
Hi,
Please show something like a page with some image somewhere so that we can at least move it around a bit because otherwise its too abstract. I think its possible. A few days ago i did it with a different theme but on Kriesi’s framework.
Thanks,
Nick
Thanks for the reply Nick,
My apologies for not quite grasping what you’re asking for. Does the link to the webpage I supplied not provide you with what you’re needing? Could you be a bit more specific by what you mean when you say “show something like a page with some image somewhere”?
Again, apologies for my confusion.
Hi,
It is I who must apologize to you for failing to see the link to your website. My opthamologist said I may need an eye replacement procedure one day but I always hoped that this need would arise when bionic implants were more socially acceptable. ;) Sorry again.
What I was asking for is a link to a page in your website where you have already inserted an image that you plan to use as your background so that i can use css to place it in position. Since the theme has 5 different headers, I am not sure how to help you without seeing the actual page on your website so that I can provide you with the code. But yes it is possible to do what you are asking.
Thanks,
Nick
LOL. No worries Nick. Hopefully your eyes will hold out!
I’ve created a banner with the same dimensions as the one at the site I linked to and placed it on a test site I created for you (the image is the big orange “test image” banner – you can’t miss it…lol). You can view the site at:
http://testsite.patriotwatch.net
I’ve also dropped the body down 150px and you can see when you scroll that the body doesn’t go behind the banner. If possible I’d like it to disappear behind the banner (or make it appear to). I’d also like the ability, if possible, to add an additional textured background below the banner rather than a solid background color. At the site I linked to you can see they have a dark gray line (it’s actually a 5px x 477px image stretched across the page) that separates the banner from the textured body background. If something like that could also be added that would make the background perfect!
I know I’m asking for a lot but hopefully it can be done.
Thanks!
Hi American Patriot,
I would suggest not bothering with a fixed header with that kind of layout. You’ll need to edit not only css but also the avia.js file which has some layout functions for the fixed header as well. So instead use one of the non-fixed header options.
From there you will need to do is add a secondary wrapper to go around the entire sites content. You can just do a simple:
<div class="background-wrapper">in your header.php file just after the body starts (***Make sure to close this div at the end of everything in the footer too!!!!!***). This is where you’ll want to attach the image banner as a background via css. Then on the body you’ll add in the background overall(stripe+texture just like http://static.thepioneerwoman.com/files/2013/08/augbackground.png).
If you want the site to go behind the banner then instead of adding it as a background to the new div you would close that div in the header instead of the footer and put the image inside of the new div. From there, it’ll take a bit of wrangling but generally making it fixed position with a higher z-index than the content will get the effect I think you have in mind.
Regards,
Devin
Hi,
Your background image is fixed. Change that setting of the background image to Scroll and it will scroll up. If you make that change , then the result would look like the URL you provided as an example.
If instead what you want is for the banner to be static on top of the page during the scroll like this site for example ( http://www.labasesecrete.fr/blog/ ) , then you need to have that banner not as a background image for the entire site, but as a background image in the header.
So what you will need to do is put the header where it used to be, and then add the image to the header. Then you will need to expand the height of the header so its big enough to house the image + logo and menu.
Here is some code to start you off
.header_color .header_bg{
background-color: rgba(255, 255, 255, 0);
}
#header {
background: rgba(222, 216, 195, 0) url(https://testsite.patriotwatch.net/wp-content/uploads/2013/04/bg-for-testsite1.jpg) top center no-repeat fixed;
height: 200px;
left: 95px;
width: 100% !important;
top: 0px;
}As I said , you need to remove the background image. This is gonna be a lot of work, But as you can see http://i.imgur.com/DvjHQqW.png with this method the page body is going under the image and that missing piece is from the shrinking header (how it originally way).
Thanks,
Nick
Great answers guys. I think I’ll go with removing the image as a background image for the site and add it as a header background. It sounds easier and I still get the result I’m looking for.
Hi,
Though as Devin said you got more editing to do unless you set the css height of the header with the image to !important to override the jquery in /js/avia.js that will attempt to resize it on scroll.
Thanks,
Nick
- The topic ‘Additional site background image?’ is closed to new replies.