I am so sorry for asking this question here because I'm pretty sure it's not 100% what this forum is for (although it is CSS I presume) but I asked on another forum and no one understood what I was talking about!! So I thought: I'm 100% sure someone here will know!
What is the website box shadow (I think it's a CSS box shadow?) that they use on websites like this one:
http://www.rcgp.org.uk/
-the box shadow I mean is to the left and right of what I assume would be the body container and it helps give the page a general frame - of note the shadow slowly fades and disappears completely by the end of the 'Find Courses & Events' box.
Thank you in advance and I appreciate your wisdom!
This page uses a fixed width container (940px, #wrapper) for all content. The shadow is simply an image which has just the correct dimensions:
body{
/* ... */
url("../images/main-bg.jpg") no-repeat scroll center top transparent;
}
Related
What I want to achieve:
I am doing the very familiar CSS zen garden however I can't seem to get the image to float like this. I want it at the top of the page and to stay at the top like a toolbar like stackoverflow has mounted to the top of the page.
Unfortunately, any time I try to display my image it is not only behind the text but also far too large. I only see about 1/3rd of my image. If I try to scale it in any way then it disappears completely. I have seen that other people do this with the added <divs> but I am told that I should use ::before to do this ....either way I can't get either to even display my image ...the only thing that does barely work is ...
body{
background: url("../CSSMidterm/Header.png") center;
}
but as I said that displays 1/3rd of the image....any idea how I can rectify this situation?
To make it clear, I am asking how to mount an image to the top of a webpage using ONLY CSS no touching HTML at all. I want it to be fairly similar to the toolbar at the top of Stack Overflow own page.
You can try this
body {
background : transparent url("../CSSMidterm/Header.png") no-repeat center center/cover;
}
Link to the documentation for background css
Hey all this is my first question on here go easy on me. I'm learning CSS3 and came across an effect that I wanted to use. I'm not sure if it's simply classed as parallax scrolling or if there is a specific name for it.
The effect doesn't show on mobiles...
http://www.anotherstory.co/home/
At certain points scrolling down there is a different static background behind the content. What is it called and how is it achieved? Any links to references would be appreciated.
Cheers!
I don't know what it's called, but it's achieved like this (extra stuff removed):
// first div
.intro-text {
background: #fb860a url("../css/images/Office2.jpg") no-repeat fixed center center / cover ;
}
// second div
div.Services {
background: #454545 url("../css/images/Office3.jpg") no-repeat fixed center center / cover ;
}
Parallax is an effect where we have the objects positioned at same line of sight but they move at different speeds when we scroll our page this creates an illusion of objects moving at different speeds.
Refer This link
http://www.uiupdates.com/how-to-create-a-simple-parallax-scrolling-webpage/
I'm trying to get a background image to start and stay in a fixed position, but only until the rest of the 'content' of the page is finished, at which point the full image is displayed.
I'm working on a purely CSS solution. I should note that the image is larger than most (laptop) screens.
Specifically, here's the code that I've been using:
body {
background:$bgcolor;
background-image:url('http://i.imgur.com/cIGSehG.jpg');
background-repeat:no-repeat;
background-position:0px 72px;
background-attachment:fixed;
margin:0;
...
}
The image that I'm using is given in the url():
The effect that I'm looking for is basically the image will display only about the top 10% of the grass hill while you're looking at most of the page, but if you finally scroll all the way down past all the page content, the remaining 90% of the grass hill will be shown.
I couldn't find this anywhere, but I may have just been using poor search terms since I'm not so familiar with the lingo.
Well, this was one jiggy nut! I did come up with a not so stable trick to achieve this. I don't have time to develop it any more right now, but perhaps it might be a working concept.
Main contept
By providing a large and empty footer area that the user is likely to hover when reaching the bottom of the page, we use a sibling selector to change the position of its sibling element containing the background:
#footer:hover ~ #background {
background-position: center bottom;
}
Along with a few quirks (which ought to be improved) we can achieve a parallax effect.
Go Fiddle
Check out this JFiddle (in Chrome) to see and play with it.
I've been troubleshooting this for a while now with no luck so I'm asking here in case someone is inclined to have a look. Thank you in advance.
On this website:
http://www.oldsaltmerchants.com/
I have a one page layout with a menu that scrolls the page to the correct location. Once the page scrolls past the top section a nav-menu drops down from the top edge of the window. The yellow bar is supposed to span the full width of the page but it is hidden in the margin areas and only displays in the "content" area.
I could really use another set of eyes if anyone is interested.
Thanks so much.
may not be the correct answer but may give some clue. I changed width to 100% and add text-align: center
The problem is with your #menu.pinned ul CSS selector's width: 910px attribute.
Remove it and it should display just fine.
I am struggling to get my footer to go behind all the other content on my page. What I have so far is here: {page removed}
Any suggestions would be greatly appreciated.
Sorry if I'm missing the point, but why not just add that image to the background of the body element and just set it to align bottom center.
ie.
body{
background:url(treepic.png) no-repeat center bottom #787066;
}
If you don't want to do it that way you could always add a negative margin-top to the footer_background of 782 (eg height of image).
eg.
footer_background{
margin-top:-782;
}
Let me know if these aren't what you were looking for.
Sam