I'm redesigning my website and I want to apply an inner shadow to the background image. What is the best way to do this for a website?
I thought about applying a shadow in PS and then setting the background image to match the edge, but it never looks well around the edges.
My second idea was to apply a CSS box-shadow to the body tag, box-shadow:inset 0 0 100px #000;, but I know that box-shadows slow down the website rendering wise.
What would the be the best way to do this?
For reference, here are the two background images, the one without a shadow and with one.
- http://i.imgur.com/8Wzj8l.png
- http://i.imgur.com/StVpOl.png
I was able to fix it by using this code,
.overlay{
position: fixed;
left: 0px;
top: 0px;
right: 0px;
bottom: 0px;
overflow-y:scroll;
box-shadow: inset 0 0 100px #000;
}
And my HTML looks like,
<body>
<div class="overlay">
Stuff...
</div>
</body>
The only problem with that is that without the position:fixed it would not be 100%, only 100% of the viewport. Making it fixed however, made it cover everything but you couldn't scroll, so adding overflow-y:scroll allows it to then scroll.
Related
http://www.milknhny.co.uk/SofiaWork/home/
Hi
The following has a banner, which has a box shadow, and i want it to sit over the top of the image.
Ive tried putting a z-index and position of absolute on the div class .maincontentinner
however the background seems to mess up (with it being a gradient) when i do this.
Any ideas how i can achieve this? I have a clearfix in there also
thanks
style.css line 431
.headerwrap {
width: 100%;
height: 218px;
background-color: #ffffff;
box-shadow: 3px 3px 8px #41434b;
posistion: fixed;
z-index: 99999;
}
Change posistion to position.
First off, I'd use relative rather than absolute positioning, since I don't think you want to disrupt page flow.
I applied:
position: relative;
z-index: -1;
to .maincontentinner and it seems to work just fine. What do you mean by "the background seems to mess up"? What browser are you testing in?
I have a sprite image which I want to display 128x89px portions across multiple span elements.
In the example I have set the left-clip to 30px to highlight the issue, normally this would be in multiples of 128px. When I set the left clip to 30px, it seems to add 30px left margin. Surely, I don't need to add a negative left margin to correct it?
I am a total newbie to clip as I have never really needed to use it, but now there is. My understanding of it is the same as a square cut out of a piece of paper. Adjusting the clip values will move the piece of paper around therefore changing the viewed image.
Please help.
JSFiddle: http://jsfiddle.net/VgjXr/
CSS:
a {
border: 1px solid #000;
height: 89px;
width: 128px;
display: block;
}
span.image {
background-image: url('http://i1269.photobucket.com/albums/jj591/mark1979smith/splice.jpg');
position: absolute;
display: block;
width: 128px;
height: 89px;
clip: rect(0px,158px,89px,30px);
clear: both;
}
HTML:
<div class="element" id="cheeseOption7">
<div id="optional_46">
<a href="#">
<span class="image"><!-- --></span>
</a>
</div>
</div>
The best explaination I have found on clip is at this site, though I think you do have a generally correct grasp of how it works. What you are not grasping is how that relates to your situation. The clip is occuring on the background image of the span. Your 30px is telling the browser to clip off the image 30px from the left (which is exactly what your fiddle example is doing), but it does not affect the positioning of the background.
Using sprites, one does not normally use clip, but background-position to switch sprite image position in relation to the element it is displayed in. So for your 128px x 89px sprite images, you would start with background-position: 0 0 and move to -189px 0 to shift one image to the right or 0 -89px to shift one image down.
I assume because clip requires position: absolute is why you are using the span, but in fact, because you really should use background-position, it will allow you to eliminate the span all together, and just do the positioning on the background of the a element directly.
I'm using Galleria and trying to utilize just the thumbs and lightbox sections, so that i don't have a large image on the page. I'm looked at cmotion as an alternative but dont like the way it doesn't automatically adjust the thumb dimensions to fit the image. I was hoping i could add some code to only call the thumb part of the gallery? any thoughts? Thanks
The generated divs concerned are nested as follows:
<div class="galleria-container">
<div class="galleria-stage">
...main image here...
</div>
<div class="galleria-thumbnails-container">
...thumbnails here...
</div>
</div>
.galleria-stage must have a proper height or the image gallery will fail but you can stop it from displaying with display:none. However, both .galleria-stage and .galleria-thumbnails-container are absolutely positioned to sit one on top of the other, so you will still have an empty space where the main image should be.
css with !important provides a quick fix by overwriting the positions so they are both aligned to the top, one on top of the other.
.galleria-stage { display: none; }
.galleria-stage, .galleria-thumbnails-container {
height: 200px !important; //thumb height
top: 0px !important;
bottom: 0px !important;
left: 0px !important;
right: 0px !important;
}
.galleria-thumbnails-container { z-index: 2 !important; }
Change height to your thumb height and change 0px if you want padding around your images.
I have a site design that uses background images and textures as a feature of the site.
See background design concept here: http://www.flickr.com/photos/54233587#N03/6145240784/in/photostream
The background is intended to work like this:
The page background has a tiled pattern (or on some pages there will be solid background colour).
The top part of the background is overlayed with a background image. The background image is a large image (2000px wide) and needs to be centred in the window. Depending on the page, the height of the image will crop from the bottom (that is, on one page the image may need to be 400px, while on others it may be 450px). This background image also has a CSS3 box-shadow applied so there is a slight shadow at the bottom of the image. This background image cannot use a fixed position - that is, it should move with the page if it is scrolled.
All other page content sits on top of the background in a centered div, indicated by the black box in the screenshot.
I have tried to achieve this by targeting the HTML5 html node for the tiled background.
html {
background: url(../img/pegboard.jpg) repeat center;
}
Then, for the overlaying background image I've been using a div element to insert an image.
<div id="bgimage"><img src="mybgimage.jpb"></div>
Then styling the img to try and center, not be fixed when scrolling, and resize the div to crop image from bottom. All without much success.
Thanks.
I would do something like this.
HTML:
<div id="bgimage"></div>
<div id="content">
Actual content goes here.
</div>
CSS:
body {
background: url(../img/pegboard.jpg) repeat center;
}
#bgimage {
position: absolute;
top: 0;
left: 0;
right: 0;
background: url(../img/mybgimage.jpg) no-repeat center;
height: 400px;
box-shadow: 0 5px 5px -5px #000;
}
#content{
margin: 0 auto;
width: 960px;
height: 1000px;
background: #000;
filter: alpha(opacity=50);
opacity: 0.5;
}
I've been trying to do something extremely simple, yet I can't make it work!
Here's what I'm trying:
---margin top: 15 px
---VARIABLE HEIGHT DIV (imagine a box-like element)
---margin bottom: 15px
I basically want the box to resize based on the browser window height.
Here's what I've been trying:
CSS
body {
background-color: #D0CDC5;
height:100%
}
#info_box {
background-color: rgba(40,40,40,0.5);
border: rgba(34,34,34,0.9) 1px solid;
width: 350px;
height: 100%;
margin: 15px 0px 15px 20px;
}
#info_box p {
color: red;
}
HTML
<body>
<div id="info_box">
<p>Sample Content</p>
</div>
</body>
By the way, why is that the text appears 15px from the top of the div? Why isn't it flush?
Thanks a lot guys,
**EDIT
See this link, very good answer for all browser but IE6 and 7. another HTML/CSS layout challenge
Thanks to #Hristo!
UPDATE
Check out the fiddle...
Edit, Full Screen
Check out the fiddle... http://jsfiddle.net/UnsungHero97/uUEwg/1/
I hope this helps.
Hristo
if you don't need to support IE6, and this is not part of a bigger layout, there is an easy way:
#info_box {
position: fixed;
left: 0px;
top: 15px;
right: 0px;
bottom: 15px;
}
alternatively, you could make #info_box stretch the full height, and put a position: absolute div into it with the same data as above.
I'm not entirely sure whether there's a way to do this without absolute or fixed positioning, because no matter whether you use padding or margin, you'll always end up adding 30 pixels to what is already 100% of the height. I'm happy to be proven wrong though.
Elements get their height based on the content inside them. So you already have an element that is centered and that will have margin top and bottom of 15px from the top and bottom of you site's body.
But if you want an element that will always be centered middle of screen, filling all but 15px top and 15px bottom, it is not achievable with "conventional" means. It will either have to be an image or a re-sizable box that will have a scroll-bar if the content is bigger than screen size.
Anyways, if that is what you want, give it a fixed size and height, and use position:fixed.
If you always use a consistent browser resolution, then it is doable. But if your screen size changes, depending on the device you use (tablet, mobile etc.), then this cannot be accomplished though CSS alone.
I have done this dynamically using jQuery.