First, a warning, I have come back from a years break of html/css and have pretty much forgotten everything, so I'm at newbie level again.
I have been trying to add background images - one at top left and one at bottom right. What I have at the moment can be seen here: http://test.nihongohub.com/Mainsite/firstsite.php as you can see if you change the width of the browser the div containing the img will hit my main part and ruin it.
I have tried a few fixes suggested on stack overflow but none of them worked. Does anybody have any suggestions how to fix this. A friend suggested that I add the img to the footer and squeeze it out, but I don't like this idea.
2 things I want this image to do, move with the browser window, and be able to go behind my main page.
Thanks for any help offered
You could try using fixed positioning and the use z-index to move it to the back, ie.
#bottom_leaf_holder {
position: fixed;
bottom: 50px;
right: 0;
z-index: -1;
}
edit: I ment fixed, changed the answer.
You could put all your content in a div, and add a css rule to that div. Something like
#main_holder {
background: transparent url('img.jpg') no-repeat bottom right;
}
The best solution for this would be to have a wrapper div just inside the body tag that contains only the background image. This will act similar to the body tag allowing you to place an image that does not interfere with the layout and will go underneath your content if the viewport is small.
Related
I'm editing an existing Wordpress theme (created child theme) and I'm having formatting issues. Both on mobile and desktop versions of the website.
My first issue is that the first post loads under the header-logo container sometimes depending on browser size, I notice this happens a lot in mobile devices. The "PROMO" post goes missing.
I've increased both the margin-top & padding-top properties but it doesn't seem to resolve the issue. Do I perhaps have to update the positioning of the container div? If so, what would be the appropriate way? Been reading a few articles and trying a lot of css edits but I feel like I'm just going in circles.
Affected site: http://posteshare.com
Mobile view: http://www.responsinator.com/?url=http%3A%2F%2Fposteshare.com%2F
The other problem I'm encountering is that media embedded on posts are floating on top of my "fixed" header instead of the other way around. I've modified the "position" property to absolute but it seems to break the formatting of the whole page? Been at this for a couple of hours and it's driving me nuts. Any new insight is appreciated. I've ran out of ideas to try.
]3
To make the header appear on top of the other comment, there is a z-index property, as said in the comments by #Milan. Basically, what you have to do is...
#header-container {
z-index: 999;
}
/*all the other elements on page except body*/ {
z-index: /*less than 999*/;
}
With this, the header should appear on top of every element on the page.
If your navigation is 110px height, maybe try adding height + about 20px margin offset to the container like so:
.container {
margin-top: 130px;
}
Add clear: both to .container on grid.css line 3
I am using a wordpress theme and have changed my background image.
I now want to display an image on top of the white background (where the content is displayed).
I have done this by using the following code:
img style="position: absolute; top:244px; left: 220px;" src="http://www.tgon.co.uk/wp-content/uploads/2014/01/strans1.png"
This looks exactly how I want it to, but it has a problem. The site has a drop down menu, when you scroll down the menu it will disappear when your mouse moves over the image which is displayed behind.
Can anyone help me to move the image back to overlay the background on every page?
I have tried using z-index without any success.
This is the site that I want to apply the image to: http://www.tgon.co.uk/
Here is an example of the problem I am having: http://www.tgon.co.uk/info/languages/french/
Any help you could give would be greatly appreciated.
Basically, what you need to do is to:
Remove the 'position:absolute' from the image. - this is what cause you the overlapping problem.
Add 'margin-top: -107px;' to the image. - this will push the image up to where you want it.
Anyhow, I didn't understand why didn't you use 'background' css property for this.
You could have just do this:
#primary {
background: #fff url('http://www.tgon.co.uk/wp-content/uploads/2014/01/strans1.png') no-repeat;
}
You have to remove this image:
And add this css:
#content {
background-image:url("http://www.tgon.co.uk/wp-content/uploads/2014/01/strans1.png");
background-repeat:no-repeat }
Here's the solution:
#branding { z-index: 1001;}
#inner-wrapper { z-index: 1000;}
Since the header is created before the #inner-wrapper div, you will need to apply a higher z-index to header compared to div#inner-wrapper`.
EDIT
Check the screenshot of the developer console view of your markup:
Just setting the z-index right for header & div#inner-wrapper did it for me.
Let's fix this then I'll be glad to help you set the image right.
I'm new to stackoverflow and so I apologize in advance for rehashing any issues already addressed here (I'm sure they are, just not sure how the apply to my specific situation).
Anyway here is the site I'm working on - www.betsyandalex2013.com. I would like to have all of the elements fixed in place. I've been playing around with it using Firebug but when I use position: fixed; on say #wrap I can't scroll over to see the rest of the content. Alternately, when I fix the position of #header, the links disappear. Again, I would ideally like to fix all the elements in place and be able to scroll across (and up/down) to see any content when the browser is resized.
I am not sure what you said. But setting:
#header {
position: fixed;
top: 0;
}
It will work: The header will be out of the natural flux of your page and it will be at top of the screen even when you scroll down/up.
PS: To see the effect put content to #wrap element.
I know this has been asked here countless amount of times, I've looked around trying to implement the given solutions.
#footer
{
min-width: 900px;
text-align: center;
position: absolute;
}
Its the very last div on the page. I'm testing it out here blog.0arrays.com (a default theme for tumblr), but the footer just won't stick to the bottom. It appears in the middle of the page. I can provide the full code if anyone wants to look at it, as it's too long to paste here.
Thanks in advance.
EDIT:
I don't really care if its sticky or not (i.e right at the bottom), I just don't want it to appear in the middle of my text, as you can see on the site.
EDIT 2:
I've posted the full code here (via pastie), arrrr.... I bet the answer is really simple, this is doing my head in. For some reason, your suggestions are not working.
No one...?
In addition to the other attributes you've set for #footer, you should also add bottom:0 to set it's position to be the bottom of the page.
EDIT: You will also need position:fixed instead of absolute
If you don't care about keeping the footer at the bottom you just have to remove position: absolute; from #posts.
If you want to make the footer stick to the bottom of page, use fixed position.
#footer {
position: fixed;
bottom: 0px;
}
I just need to use
`display: table-row;'
I know there are several other questions about the sticky footer, but none have seemed to help me get to a solution for my problem. Here is the template in question:
http://blog.campquiet.com/stack/
Basically I would like the background with the transparent side bars to extend to the bottom of the browser window. The footer (copyright info) should always be at the bottom of the screen as well, even if there isn't enough content to push it that far).
Any suggestions??
Update
Maybe I wasn't as clear as I needed to be. Basically I'm trying to accomplish what is seen here: hxxp://www.cssstickyfooter.com/
I haven't been able to get that working in my template.
You need to set the body and outer container to 100% height. This answer may help you: CSS 100% height with padding/margin
I'm not really sure I understand what you're asking, but to keep the footer always at the bottom, perhaps try something like this
#footer{
position: fixed;
bottom: 0; /* Keeps the footer glued to the bottom of the page */
z-index: 9999; /* Keeps the footer on top of all other elements */
}
For the background, try to apply the CSS to the body tag?
body{
background: url(assets/images/bg_clouds.jpg) fixed 0 0;
}
You can apply extra settings for the background (like position & repeat) to get it to look like it is currently. Anyway, if this doesn't answer your question, please help me out with a more detailed explanation of your question.
Hope that helps.
UPDATE
I played around with Firebug to edit your CSS. I think if you get rid of the background css under html, body {} and add this to your body {}
body {
background: url("assets/images/bg_clouds.jpg") repeat-x fixed 0 0 #F0F4F7;
}
... it will keep the background static even if you scroll. It will always be there. Make sure you have fixed instead of scroll