I've got a div with a background image that includes both the normal and hover state, so when you mouse over, the bottom half of the background image is shown. I'm making a mobile version of the same site, and I'd like for only the first half of the image to be shown as the same div grows in height. However, as it is currently, when the div grows, I obviously see the second half of the background image. Any thoughts on how to hide the bottom half of the background image while still showing the top?
.community a{background: url(images/migtea.jpg) 0 0 no-repeat #FFF; display:block; float:left; margin:0 10px 10px 0; padding: 10px 10px 10px 151px;}
.community a:hover{background-position: 0 -131px;}
Well only problem is that "clip-path", "mask" and "filter" (no not the
IE "filter" but SVG "filter") only works for Firefox and Safari (yes
no Chrome). And they do it differently. Firefox needs an svg clippath
specified via an id eg:
.box { clip-path: url("roundedrect.svg#cp1"); }
while Safari just uses
the shape itself to create clippath from:
.box { clip-path: url("roundedrect.svg"); }
I have yet to discover a
way to do it in Opera and Chrome.
But for FF and Safari "cross browser" example i have created this:
http://tokimon.dk/testing/css-svg-test.html.
Otherwise maybe you can get something out of the background
manipulation in CSS 3: http://www.css3.info/preview/
Tokimon
(source: Showing only part of background image using CSS3)
Else, all you can do is either separate the background images, or put a container (div) with a solid background over it and "hide" the part you want to hide (but it's not a very elegant solution)!
Hope this helps!
Related
I want to lock an overlayed image on a Tumblr blog in a position relevant to my sidebar and body content. However, everything I've tried results on the image locking to the side of the window, thus, when the browser window is resized and the distance between the posts and the window changes, the position of the image relevant to the sidebar where I want it changes as well.
I don't know the language very well so please try to explain in as basic terms as you would for a beginner.
full screen (where I want the image to stay)
minimized browser
#sidebar {
box-shadow:rgba(0,0,0,0.1)5px 5px;
text-align:left;
position:fixed;
{block:ifnotrightsidebar}
margin-left:-225px;
{block:ifnotrightsidebar}
{block:ifrightsidebar}
margin-left:485px;
{block:ifrightsidebar}
border:1px solid #d1d1d1;
background:#fff;
bottom:20px;
width:150px;
padding:5px;
{block:ifroundededges}
border-radius:5px;
{block:ifroundededges}}
#outsideimg {
position:fixed;
float:right;
right:-40px;
top:100px;
}
#outsideimg img {
width:400px;
}
Put the image inside the sidebar div and then position it absolutely. It will then stay with the sidebar (and when you position it, it will be relative to the sidebar and not the window).
I am working on a CSS tumblr theme header found here grandneue.tumblr.com.
(1) Stretch: I want it to be able to stretch but only up to a maximum size as the header gets too pixelated otherwise), probably around 800px.
(2) Shrink: The second issue I have is, while the header does shrink down to a certain size (it does when I change the desktop browser window and to a certain extent on the iphone5), it doesn't shrink down fully so it fits 100% on a vertical iphone5 browser display.
Can anyone please help me solve these two queries? The content is totally fine so I don't understand why the header won't follow suit!
Looks like the problem is with the image, there's a lot of white space around the logo. Edit the header image to be 800px width and make sure the logo fits right to the edges. Then set the background properties on .header-image.cover to;
.header-image.cover{
-webkit-background-size: 100%;
-moz-background-size: 100%;
background-size: 100%;
margin: 0 -1px;
}
Then finally make the container div .header-image-wrapper ;
.header-image-wrapper{
max-width: 800px;
}
If on mobile the image is right to the edges, just add padding to the container with a media query :)
Hope this helps!
I have a page containing an empty div with a gradient in it, like this:
<div class="prodGradientArea"></div>
.prodGradientArea {
background: -moz-linear-gradient(center bottom , #ECEAE9 0%, #E4E3E2 50%) repeat scroll 0 0 transparent;
display: inline-block;
float: left;
height: 10px;
width: 420px;
}
This looks brilliant in FF, IE, Chrome and Safari ... on a computer. When checked in Safari on an iPad or iPhone, I get a tiny border around the div. This is removed if I write text in the box or if I zoom in a lot but not if I write a non-breaking white space. I have even tried putting in a transparent pixel with but it made no difference to the imaginary border. Also tried setting border=0 but this was of course not the problem (it is not a real border, just a visual "feature").
So the only thing that removes it is to add pure text. I guess I can add a dot and hide it with color or so but it would break my little heart to make such an ugly fix.
Please help!
Jenny
Insert in your index.php this code in the <head>-area to avoid artifacts from bad zoom interpretation of iOS:
<meta name="viewport" content="initial-scale=1, maximum-scale=1">
Then go to your css-file and insert a 1px negative margin, to avoid this. In my website this was the footer div:
.unten {
margin-top: -1px;
}
I hope this will help you, too!
hey guys,
I have a div.mapFullscreenContainer
#mapFullscreenContainer {
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
}
This div is shown when I scroll to the bottom and click on a button. In normal browsers this works just fine. The overlay is 100% wide and 100% high and lies on top of the page.
However on touch devices there is the problem that the overlay is always out of the viewport. Imagine the button that makes the overlay visible is in the footer of a rather long webpage. The overlay is always at the very beginning of the page so it's not immediately visible to the user. The user has to scroll back to the top to see the overlay.
Any idea how I could fix that so it behaves like on a normal browser. bottom:0; instead of top:0 doesn't make a difference.
you can use JS to count and apply total height of your page to this div http://jsfiddle.net/seler/FjeyK/
Safari renders black lines in between divs on my website at some scales. It is particularly bad when it breaks apart an image that is chopped in two different divs for a button or something. I can't put a BG in the parent of the two divs because they are transparent .pngs. Any solution or just deal with it?
capture of the problem, http://i.stack.imgur.com/pTLki.png
TravisO also has the same problem, and I changed how the page was laid out, originally it was a simple table with 5 rows, I removed the rows and just went with images and br, still happens. I've tried to remove all padding and margins via CSS but it was pretty obvious the problem isn't the browser rendering, but with the resampling the browser does to convert the page into a size that fits on the screen. You can see my broken page at:
http://www.apinkdoor.com/show/
TravisO, you should get rid of the img styling in your css!
If you use only this:
<style type="text/css">
*
{
margin: 0px;
padding: 0px;
}
body
{
background-color: #f00;
text-align: center;
}
</style>
it should render properly on your iPhone!
This issue is a result of a rounding error produced in mobile safari when it rescales background images for display (it's a bug: http://openradar.appspot.com/8684766).
The solution is to increase the width of your right-button edge on its left side by 1 or 2px. Then adjust your CSS accordingly so the 1 or 2 pixels you added are not displayed by default.
The following CSS, added to the problematic div with a specified background-image, is what fixed it for me. Anything less than 3px would still show light artifacts at some Safari zoom levels.
margin-top: -3px; /* for Mobile Safari dark line artifact */
padding-top: 3px; /* for Mobile Safari dark line artifact */
I found changing the background colour of the element with the 'grey border' around it worked for me.
Adding an initial-scale value to the viewport metatag resolved this issue for me.
<meta name="viewport" content="initial-scale=1.0">
I had a similar problem when displaying a .png-image in a div-tag. A thin (1 px I think) black line was rendered on the side of the image. To fix it, I had to add the following CSS style: box-shadow: none;