sireesanwar (![[identity profile]](https://www.dreamwidth.org/img/silk/identity/openid.png)
sireesanwar.livejournal.com) wrote in ![[community profile]](https://www.dreamwidth.org/img/silk/identity/community.png)
layoutlounge2013-11-12 04:27 pm
sireesanwar.livejournal.com) wrote in layoutlounge2013-11-12 04:27 pm
Fixed Header Image
Account Status: All
Actions: Header Image Fixed with entries scrolling under it
Theme: Flexible Squares maybe more
As you can see the top of the entry is under the header image but only because I scrolled up so you could see this feature.
Actions: Header Image Fixed with entries scrolling under it
Theme: Flexible Squares maybe more
As you can see the top of the entry is under the header image but only because I scrolled up so you could see this feature.
This is what the layout looked like before I started scrolling.
What we hope to accomplish with this tutorial is explain the process to get such a feature. I will admit right now that there is no guarantee everything will go smoothly when working with another layout designers coding because different designers use different methods to achieve the look they want.
1. This doesn't work very well if you can see the LJ navstrip at the top of the journal. For such a look, I would recommend going into the Custom Display Options and turning off the navstrip.
2. Your header image coding:
The position should be fixed to accomplish this outcome.
Width needs to be 100% because using the normal width of the image will have your image floating to the left.
Height should be the exact height of the image.
Top is set to 0 in this so that the image is at the very top of the screen though you could make it 5 to have a small gap at the top.
z-index is very important because having it set to 100 typically means it is going to be on top of everything else enabling every other part of your journal to scroll underneath the image.
Padding-left was adding in mine because it appeared the image was slightly off by 10 pixels. If you find this to be true use the padding option.
Background-color should be set to transparent otherwise people may see a color when loading or scrolling. The attribute !important makes sure the coding knows you mean business and will not override this function.
Background-image is where you insert you image url.
Background-repeat is typically going to want to be on no-repeat for such a feature but you never know.
Background-position is also very important. Without this your image isn't going to be placed very well. I have it set as center top because this means it is centered with the layout and top means it should move to the top of the layout and stay there. The top coding works with this.
3. Header Navbar coding with a couple tweeks....
My header navbar coding didn't change much but there are two things I'd like to point out.
z-index: I added this because when I finished with the headerimage coding the navbar was still scrolling above the image. So by giving it a z-index of 50 it has been shuffled under. Think of the z-index floors in a building. 100 is on top of 1 or 50.
Margin-top is the other added bit of code. This is because if you've already done the coding for the headerimage you'll notice everything moved to the top and isn't really lining up. But if you give the header navbar a margin-top of 300px (the height of our image) everything is forced below it. If this isn't the case for your layout you may have to add margin-top to multiple aspects of your layout (i.e. entry, sidebar, etc.)
4. In some cases you might want a header image that is small like a banner above just your entries and for something like that I would mess with the padding-left in the headerimage coding. You can move it further left with an increased pixelation or decrease it by using negative numbers (i.e. -50px).
5. The background-position or the headerimage can also be defined with x position and y position (i.e. background-position: 500 0;) like a graph in Algebra. This might also be helpful when working with smaller images. However, the downside to this is that if viewed on a different computer with different screen resolution may actually change where the image is located.
1. This doesn't work very well if you can see the LJ navstrip at the top of the journal. For such a look, I would recommend going into the Custom Display Options and turning off the navstrip.
2. Your header image coding:
The position should be fixed to accomplish this outcome.
Width needs to be 100% because using the normal width of the image will have your image floating to the left.
Height should be the exact height of the image.
Top is set to 0 in this so that the image is at the very top of the screen though you could make it 5 to have a small gap at the top.
z-index is very important because having it set to 100 typically means it is going to be on top of everything else enabling every other part of your journal to scroll underneath the image.
Padding-left was adding in mine because it appeared the image was slightly off by 10 pixels. If you find this to be true use the padding option.
Background-color should be set to transparent otherwise people may see a color when loading or scrolling. The attribute !important makes sure the coding knows you mean business and will not override this function.
Background-image is where you insert you image url.
Background-repeat is typically going to want to be on no-repeat for such a feature but you never know.
Background-position is also very important. Without this your image isn't going to be placed very well. I have it set as center top because this means it is centered with the layout and top means it should move to the top of the layout and stay there. The top coding works with this.
3. Header Navbar coding with a couple tweeks....
My header navbar coding didn't change much but there are two things I'd like to point out.
z-index: I added this because when I finished with the headerimage coding the navbar was still scrolling above the image. So by giving it a z-index of 50 it has been shuffled under. Think of the z-index floors in a building. 100 is on top of 1 or 50.
Margin-top is the other added bit of code. This is because if you've already done the coding for the headerimage you'll notice everything moved to the top and isn't really lining up. But if you give the header navbar a margin-top of 300px (the height of our image) everything is forced below it. If this isn't the case for your layout you may have to add margin-top to multiple aspects of your layout (i.e. entry, sidebar, etc.)
4. In some cases you might want a header image that is small like a banner above just your entries and for something like that I would mess with the padding-left in the headerimage coding. You can move it further left with an increased pixelation or decrease it by using negative numbers (i.e. -50px).
5. The background-position or the headerimage can also be defined with x position and y position (i.e. background-position: 500 0;) like a graph in Algebra. This might also be helpful when working with smaller images. However, the downside to this is that if viewed on a different computer with different screen resolution may actually change where the image is located.
Have Questions? Please Comment.
no subject
no subject
no subject
no subject
http://layout-lounge.livejournal.com/33399.html
no subject
no subject
no subject
http://ladysnaps.livejournal.com/
as you see, the text content stretches all the way across but not directly under the header image. i looked to see where the problem may be but I'm not seeing it, so a little help is needed.
no subject
Are you working with one of mine. If so which one and I can customize it for you.
Post the header picture and background image here in a reply so I can use your images.
no subject
Header Image (http://imageshack.us/a/img845/1360/xwtt.gif)
Background Image (http://imageshack.us/a/img855/7299/qbel.jpg)
I tried playing with the margin and padding values in the header navbar coding but it only moved things to the left or made it smaller and to the left while the entries remained completely across the screen.
Thanks for your help. :)
no subject
This layout
http://layout-lounge.livejournal.com/41801.html
Or this layout
http://layout-lounge.livejournal.com/39977.html
It kind of looks like the second one and if that is the case I can customize it.
no subject
no subject
The above coding is only parts of a layout not a whole layout.
Try using the coding I've left for you at
no subject
Thanks so much for helping me out. Sometime all that's needed is a few words to get me thinking right. You're the best!
I guess I started working on the journal before I saw your addition. I'll copy it and keep it safe for the next time. Thanks again!
no subject