- This topic has 14 replies, 3 voices, and was last updated 6 years, 11 months ago by Tom.
-
AuthorPosts
-
April 21, 2017 at 9:48 pm #308816sdanbu
I’m trying to add a design element that ‘sits’ on the bottom of the header and blends seamlessly into the page content, first section, etc.
I want to add a semi-transparent image to the header that sits on the bottom of the header without any margin or padding.
I also want to make it stretch to the width of the full screen.
Is there a way to do this? I’ve tried to use the header content box…
Thank you.
April 21, 2017 at 11:48 pm #308848LeoStaffCustomer SupportHi Scott,
It’s a little hard for us to give you the CSS for it without a link to your site and seeing what you have so far.
This post might give you some ideas on how to achieve it though: https://generatepress.com/forums/topic/float-logo-and-adjust-size-and-position-keeping-it-responsive/#post-246468
Can you provide an example of what you are trying to achieve as well? Thanks!
April 22, 2017 at 5:17 am #308907sdanbuI put an image in the header content with transparency so that it overlaps the header background image and it’s supposed to blend seamlessly into the content right after it.
The example of I want to do is
1. make an image stretch to full screen (like here: http://stackoverflow.com/questions/16727713/cant-get-image-to-stretch-full-width)
2. remove the spacing between the image and the first body content so it looks like it’s all one piece.(Thanks, a lot of stuff has worked so far. I’m embarrassed of my site so I don’t want to put it in the public forum!)
April 22, 2017 at 10:44 am #309008TomLead DeveloperLead DeveloperDon’t be embarrassed! Everyone in here is in the developing stages of their websites ๐
Perhaps you can email me a link to your website so I can see what you have so far? https://generatepress.com/contact/
Also, if there’s a website you’re trying to replicate it would be great if you could include it too.
Thanks!
April 25, 2017 at 9:27 am #310125sdanbuApril 25, 2017 at 9:30 am #310133TomLead DeveloperLead DeveloperInstead of inserting the image into the content, something like this might work better:
.page-header-content:after { content: url(URL TO YOUR IMAGE); position: absolute; bottom: 0; }
Adding CSS: https://docs.generatepress.com/article/adding-css/
April 25, 2017 at 9:57 am #310155sdanbuWhen I did that, the picture still appears too high over the bottom of the header content fold (as if there is bottom padding).
Also, when I resize the window to mobile etc. it doesn’t resize itself because it’s absolute.
Do I need to make this arrow the header image and have current header image as a page background somehow or something?
Thanks for your help.
April 25, 2017 at 12:45 pm #310221sdanbuInstead of position: absolute;
I tried position: relative;But is there another way to position images in the header content?
For example on page https://www.sitepoint.com/css-center-position-absolute-div/
.outer {
position: relative;
width: 40%;
height: 120px;
margin: 20px auto;
border: 2px solid #c00;
}.inner {
position: absolute;
width: 100px;
height: 100px;
top: 10px;
left: 50%;
margin-left: -50px;
background-color: #00c;
}April 25, 2017 at 2:21 pm #310264TomLead DeveloperLead DeveloperTry this CSS instead:
.page-header-content { position: relative; } .page-header-content:after { content: url(URL TO YOUR IMAGE); position: absolute; bottom: -11px; }
April 25, 2017 at 7:03 pm #310324sdanbuI tried it and it’s basically good- is there a way to use css like
vertical-align: middle;
so the apex of the graphic is always centered?April 25, 2017 at 7:38 pm #310343TomLead DeveloperLead DeveloperYou want it to float in the center of the background image instead of sitting on the bottom?
April 25, 2017 at 7:46 pm #310350sdanbuNo it’s fine on the bottom
But the center of the transparent image is to the right of the center of the page.
I’m hoping to center it responsively so that the arrow is always centered (while still on the bottom of the header).April 26, 2017 at 12:42 am #310408TomLead DeveloperLead DeveloperHmm, right. Would have to switch the method for it to be responsive.
Try this instead:
.page-header-content:before { content: ""; width: 100%; height: 100%; background-image: url(URL TO YOUR IMAGE); background-repeat: no-repeat; background-size: 100%; background-position: center bottom; position: absolute; }
April 26, 2017 at 4:28 am #310461sdanbuIt worked! Thanks!
April 26, 2017 at 8:49 am #310564TomLead DeveloperLead DeveloperYou’re welcome! ๐
-
AuthorPosts
- You must be logged in to reply to this topic.