I have a UI problem with some CSS that I was hoping to get some help with.
I have a div that has a background graphic (curved top edge image) that is causing me a problem. Within this div I have lots of other divs for headings and general content.
My code works in FireFox but not in IE 6 and 7. I have another background graphic that I need placing to the right, over the main background graphic but Im failing to get this working in IE6/7! it works in IE8
you can see my problem here, with IE the width of the curved red edge causes the content area width to be smaller. Firefox example (FF.jpg) is correct, the content area is full width.
http://www.jamesradford.net/images/IE6.jpg
http://www.jamesradford.net/images/FF.jpg
markup below:
<div class="RedCorner"></div>
<div class="header"></div>
<div class="tab-content">
css below:
.RedCorner {
float: right;
background-image: url(/red_rounded.gif);
background-repeat: no-repeat;
margin-right: -25px;
margin-top: 1px;
width: 140px;
height: 40px;
}
Any suggestions?
Many thanks as always,
James
The reason this is happening is because IE has something called the double margin bug. Try using absolute positioning instead, firstly ensure the parent of .RedCorner has:
position: relative;
Then:
.RedCorner {
position: absolute;
top: 0;
right: 0;
width: 140px;
height: 40px;
background-image: url(/red_rounded.gif);
background-repeat: no-repeat;
}
Related
So i have this image right here
"http://i.imgur.com/eh71foN.png"
My problem is that whenever i resize the window the Mass Effect image doesnt resize with it.
It becomes like this
"http://i.imgur.com/jaDV7jG.png"
I've been trying to figure this out for a while. Can anyone point me in the right direction?
#MassEffectSign {
background: url(masseffect12.png) center top no-repeat;
top: 25px; left: 750px; z-index: 2;
padding: 250px;
position: absolute;
}
My blue background
#bodyBorder {
background: url(navyblue.jpg) center top repeat-y;
padding: 1000px;
opacity: 0.7;
background-attachment: fixed; }
Use img tag instead background image in CSS.
img {width: 100%}
Use percents for the relevent values.
top: 25px; left: 45%;
This makes the amount of space between the left edge and the image relative to the window size. Play around with the value a little to center it and you should be good.
Your positioning is absolute, so it will move independently of the scale. Put that inside a relatively positioned div and then it will work.
For instance,
<div style="position:relative;">
<div id="MassEffectSign"> </div>
</div>
Hope this helps.
I wanted my background image to stay at the same position. So I made use of
background-attachment:fixed;
When I discovered that iOS does apparently not support this property, I decided to put a fixed background div into the DOM. This actually works pretty well:
#background {
top:0;
left:0;
width:100%;
height:100%;
position:fixed;
background-position:50% 0%;
background-repeat:no-repeat;
background-attachment:fixed;
background-image:url("images/mark-bg.png");
}
At the first look, this works great in iOS too. But then I recognized, that Safari scrolls the DIV up, to where it would have got scrolled, if it wouldn't be fixed.
Now I ask myself »What the hell...?!« I mean... Why does iOS scroll an element that is explicitly told to not do so?
Is there any intelligent solution?
Here is a complete Demo
EDIT
I just found out, that not the element moves itself, but the background image moves...
I found a quite suboptimal solution, but at least it works. I don't use background-image in CSS anymore but put a img tag inside the background div and position it absolute:
#background img {
top:0;
left:0;
right:0;
bottom:0;
position:absolute;
}
Here is the fiddle
Unfortunately, the paragraph "this is text" is not vidible anymore. Lucky, thats it's just for background...
Also the image is not centered anymore, nor resized correctly :[
Edit
I added the following CSS to fix the positioning:
#background img {
margin-left:auto;
margin-right:auto;
}
Julian's answer was very helpful to me.
It solved part of the problem, which was to prevent scrolling of the background image by replacing it with a static image in a fixed position div, avoiding Safari's faulty interpretation of "background-attachment: fixed".
But it left me with an image that I couldn't center within the viewport such that the center of the image was always on the center of the viewport.
This is normally background-position: 50% 50% and background-size: cover, but not when we don't have a background-image at all.
So I replaced Julian's inner <img> with a <div> having similar settings.
Then I added the background-image and properties to that div, EXCEPT FOR background-attachment which I left out.
This resulted in a div which took up the entire viewport and was fixed to the viewport, and which had a child div filling it completely, and that child div had a static background image set at position 50%/50% and size cover.
Works great!
My inner div styles are as follows:
#div_background > div
{
top: 0px;
left: 0px;
width: auto;
height: auto;
right: 0px;
bottom: 0px;
position: absolute;
margin-left: auto;
margin-right: auto;
display: inline-block;
background-image: url(/images/background.jpg);
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
}
With the parent div styles as follows:
#div_background
{
display: inline-block;
position: fixed;
top: 0px;
left: 0px;
height: 100%;
width: 100%;
right: 0%;
bottom: 0%;
z-index: -1;
background-color: #A0B4C8;
}
And the HTML is simply:
<div id="div_background"><div></div></div>
I consider this a hacky solution, but a necessary one due to Safari's bug.
A simple way of thinking of it is that rather than using background-attachment of fixed, we're creating our own fixed background and manually attaching a new div with the background image to that.
Thanks, Julian!
I have a site that I'm working on, and one of the requirements is that it cannot use any client side scripting (jQuery/JavaScript). And since I'm not that great with CSS, I'm a little stuck here.
I have a simple div, which should have a "border image". But I can't use the CSS border-image since it doesn't work with IE (already tested), and I can't get two different images for top and bottom to work with background-image: - so now I'm left wondering what I can do...
Below is what it should look like, both the arrow-looking things are 2 png files:
Is there any way to accomplish this? By using just 1 div, and 2 images? Without JavaScript, and also maintaining cross-browser compatibility (with some exceptions, like ie6<)?
This works in: IE9, Firefox, Chrome, Opera and Safari
CODE:
<style>
#Container {
width: 400px;
height: 400px;
margin-left: auto;
margin-right: auto;
border:1px solid #000000;
}
.boxTop {
position: relative;
left: 100;
top: 100;
width: 200px;
height: 10px;
background-color:#00CC00;
/*place background image css code here and remove line above*/
}
.box {
position: relative;
left: 100;
top: 100;
width: 200px;
height: 200px;
background-color:#CC0000;
}
.boxBtm {
position: relative;
left: 100;
top: 100;
width: 200px;
height: 10px;
background-color:#0000CC;
/*place background image css code here and remove line above*/
}
</style>
<div id="Container">
<div class="boxTop"></div>
<div class="box"></div>
<div class="boxBtm"></div>
</div>
Darcey's solution is very good. The box div with 3 divs inside, the middle one for content and the other 2 for the images (with css property background-image).
If you don't want to modify your html you could try playing with css :before and :after
Example
If the block has fixed height and width just set background one image and paddings. If it has fixed width use #Mr. Alien's solution. And if it has fixed height crop image horizontaly and make background repeat-x. If both width and height are dynamic i'd suggest to use 2-3 additional divs anyway (i know you want to avoid it), i dont think playing with :before and :after is better.
First solution: use just gradients. No images, no extra elements or even pseudo-elements.
Of course, gradients are not supported by IE9 and older, so another solution would be to use multiple backgrounds.
IE8 and older don't support multiple backgrounds the CSS3 way, but you could use AlphaImageLoader filter as fallback for these browsers.
I have a header in a HTML page that contains a curve.
My Problem: The curve is a picture & it sits at the highest z-index. It is meant to cut off some text below it so it has the highest z-index. As a result, none of the links below the image(curve) can be clicked because the picture sits on top of them.
Heres the simple JSFiddle: http://jsfiddle.net/hE7D5/2/
How can I get my links below the image to be clickable?
The easiest way I know is to make the image have the css: pointer-events: none; BUT this doesn't work in IE & I am looking for the most Cross-Browser friendly solution.
<div id="headerContainer" style="position: relative; width: 100%; text-align: center; background-color: yellow;">
<div id="header" style="width: 1100px; height: 400px; padding-left: 30px; padding-right: 30px;">
<ul id="navbar" style="background-color: red; width: 800px; height: 40px; float: left;"></ul>
<a id="logo" href="www.google.com" style="background-color: red; width: 190px; height: 40px; float: right; margin-top: 15px;">Cant be Clicked</a>
<br/>
<div id="cutOffText">
<p style="padding: 0; margin: 0; font-size: 200px;">ABCDEFG</p>
</div>
</div>
<div id="curveOverlay" style="z-index: 1; position: absolute; left: 0; top: 0; background-image: url('http://i44.tinypic.com/rs8y7m.png'); background-position: center bottom; background-repeat: no-repeat; width: 1100; height: 400px;">
</div>
</div>
PS: If theres no way to make the links clickable when under the image, can you suggest a HTML layout I can use to still achieve my look but also have my navbar links clickable?
You could have your elements, that currently sit under the graphic, be on top of it with their backgrounds set to be mostly transparent. This way, the text would be above the image, whereas the background color would seem to be behind or inline with the graphic.
If you are able to precisely control the layout of what's behind the image, you could duplicate that layout above the image using "empty" links with the same dimensions (which I've outlined with a dashed green line in the image below).
In your example you might be able to use cssSandpaper to rotate the image of the curve.
If you slightly modify your curve the button will become totally clickable.
Isn't this working?
#logo {
position: relative;
z-index: 10;
}
simply put : you can't. not without a lot of effort. to achieve this effect, you'd need the image to be a imagemap and then make sure that it's pixel-perfect to the stuff that it's obscuring.
to be honest, this looks like a pretty bad idea, but you may have some legitimate reason to do this
EDIT : looks like a duplicate of this
What I'm trying to achieve without using JS can be seen on jsfiddle.net/k2h5b/.
Basically I would like to display two images, both centered, one in background and one in foreground:
Background Image: Should cover the whole window without affecting the aspect ratio, which means that the image will always touch two opposite edges of the window, but the image will be cropped.
Forground Image: Should be inside the window without affecting the aspect ratio, which means the image will be always touch two opposite edges of the window, but the image will not be cropped.
It doesn't matter if it's a <div> or an <img> tag, as long as they are displaying the images.
Asume also that the image sizes are known upfront and can be used in CSS or HTML part.
So my question is: is it possible using only CSS or CSS3?
If it's not possible I will accept the answer that will be as close as possible to my goal.
Examples:
When the background image is cropped from the top and bottom:
When the background image when it's cropped from left and right:
After looking at #Kent Brewster's answer, I think I could achieve all the requirements of OP.
This doesn't have the problem of foreground image being cropped and you can also specify constant margin around the foreground image. Also div is being used instead of img tag, because we are using background images. Here is the link and here is the code:
<div id='bg'></div>
<div id='fg'></div>
#bg {
position: absolute;
height: 100%;
width: 100%;
background-image: url(http://i.imgur.com/iOvxJ.jpg);
background-repeat: no-repeat;
background-position: 50% 50%;
background-size: cover;
}
#fg {
position: absolute;
top: 10px;
left: 10px;
bottom: 10px;
right: 10px;
opacity: .7;
background-image: url(http://i.imgur.com/HP9tp.jpg);
background-repeat: no-repeat;
background-position: 50% 50%;
background-size: contain;
}
Try this:
<html>
<style>
body {
margin: 0;
}
#bg {
position: absolute;
height: 100%;
width: 100%;
background: transparent url(bg.jpg) 50% 50% no-repeat;
background-size: cover;
}
#fg {
position: absolute;
height: 90%;
width: 90%;
top: 5%;
left: 5%;
background: transparent url(fg.jpg) 50% 50% no-repeat;
background-size: cover;
opacity: .7;
}
</style>
<body>
<div id="bg"></div>
<div id="fg"></div>
</body>
</html>
If the scaling requirement is flexible, it might work. See http://jsfiddle.net/k2h5b/5/ to see it run.
Yes, it's possible.
Basically I just made the background image the background for the <body> (doesn't have to be the body of course), and then put the image inside that with a small margin.
<body>
<img id='fg' src='http://3.bp.blogspot.com/-OYlUbWqyqog/TeL-gXGx3MI/AAAAAAAAHRc/bdqvvvaeC7c/s1600/bald-eagle3.jpg'></img>
</body>
css:
body {
margin: 0; padding: 0;
overflow: hidden;
background: url('http://wallpaper.zoda.ru/bd/2006/07/21/2c7b4306fd22f049f331d43adb74a5f7.jpg') no-repeat left top;
}
#fg {
margin: 20px 20px;
opacity: 0.7;
}
obviously if the window is too big, there'd be issues. You could (I guess) use media queries to pull in different image sizes based on window size.
edit — OK, well for the image, if you do want it to crop and retain the right aspect ratio, then I think you'll have to know the image size ahead of time to do it so that it works out. Lacking that, here's another revision.
<body>
<div id='fg'> </div>
</body>
css:
body {
margin: 0; padding: 0;
overflow: hidden;
background: url('http://wallpaper.zoda.ru/bd/2006/07/21/2c7b4306fd22f049f331d43adb74a5f7.jpg') no-repeat left top;
}
body, html { width: 100%; height: 100%; }
#fg {
margin: 2%; width: 96%; height: 96%;
opacity: 0.7;
background: url('http://3.bp.blogspot.com/-OYlUbWqyqog/TeL-gXGx3MI/AAAAAAAAHRc/bdqvvvaeC7c/s1600/bald-eagle3.jpg') no-repeat center center;
}
If you know the image dimensions, you could then set max-height and max-width. (I'll try that too :-)
edit again To get the background to crop in a centered way, you'd need to set the position to "center center" instead of "left top". (Or "center top" if you just want it centered horizontally.)
Vertically centering elements with CSS without cutting-edge non-standard features (flexible box layout) is hard. That may be something to do with JavaScript. I'll say that one problem with any JavaScript solution like that is that it really slows the browser down. If you must do it, I would suggest introducing a little time lag so that you don't try to recompute the layout on every resize event. Instead, set a timer for like 200 milliseconds in the future where the work will get done, and each time you do so cancel the previous timer. That way, while a person is dragging the window corner it won't burn up their CPU.
edit even more ooh ooh yes #Kent Brewster's answer with the vertical centering is good - I always forget that trick :-)
There is no way to achieve this effect using only CSS, for two main reasons:
Because you are trying to resize your image, you cannot use the background property and must instead use an <img> tag. Your image will always try to take up as much room as it can if the width and height are not set. Thus, the aspect ratio will not be maintained, or your image will be cropped.
The other caveat of resizing the image is that you will not be able to vertically-align it to the center of your page without knowing its dimensions.