I am attempting to position a background image so that it lines up with an existing gradient background, which is relatively positioned to the <html> element (ie. the gradient image appears at 92% of the browser width, no matter how you size the window).
I did it by placing the image inside a <div>, positioning the image relative to the <div>, and positioning the <div> relative to the browser window.
eg.
<body>
<div id="background-position-container">
<img src="images/bubbles.png" id="background-corner-decoration" />
</div>
</body>
with:
<style>
#background-position-container {
position: absolute;
width: 0px;
height: 0px;
top: 180px;
left: 92%;
}
#background-corner-decoration {
position: relative;
/* tweak the position of the image so it lines up with the gradient */
top: -176px;
left: -118px;
width: 216px;
height: 477px;
margin: 0px -118px -176px 0px;
}
</style>
This seems to work well, but if you shrink the browser window horizontally, the background image will cause the <body> element to grow beyond the <html>element, and scrollbars appear.
I seem to be able to fix this by creating a new sibling element of <body> and placing the <div> inside that:
<div id="background-page-container">
<div id="background-position-container">
<img src="images/bubbles.png" id="background-corner-decoration" />
</div>
</div>
<body>
</body>
and adding:
#background-page-container {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
overflow: hidden;
}
This works in Firefox at least, but this does not seem like a good practice and I'm sure all browsers do not render this properly. Is there a better way to accomplish what I want while leaving all display elements inside <body> (That is, having the background image clipped at the edge of <body> instead of growing it)?
Thanks for your help,
gs.
Edit: As requested, here are jsfiddles to illustrate the problem:
Here is what it looks like with Hiigaran's solution: http://jsfiddle.net/kn36A/
Here is a solution that aligns properly, but causes unsightly scrollbars when the window is re-sized: http://jsfiddle.net/w446Q/
Here is the "best" (?) solution I have so far, but it seems to violate HTML best-practices: http://jsfiddle.net/H2PLr/
Every browser I have tested #3 with seems to render it properly so far - is this solution really as bad as I think it is?
Thanks again!
gs.
Assuming I read correctly...
You can combine background CSS by separating them with commas. So for instance, if you want to have an image and a gradient as the background for the same thing, try:
background-image: url('image.png'), linear-gradient(#bb0000, #0000bb);
You can then add other background CSS properties like background-position in the same manner:
background-position:50px 50px, 0;
The order of the values matters. The first set of values (50px 50px) applies to the image, but not to the gradient. The second background-position value (0) applies to the second background-image value, which is the gradient.
Using this on your HTML, you should be able to position your image with absolute or relatively values.
EDIT: Also, if you add any additional background property without commas, then the value you provide will apply to all backgrounds. For example, background-repeat:no-repeat will not repeat either the image or the gradient, but background-repeat:no-repeat,repeat will be applied to each in the same way that the position values are.
In the comments of the other answer Hiigaran solved the problem by simply starting with solution #3 and moving the outer containing div (called "background-page-container") under <body>. So there's no need for elements to appear outside of <body> as I had thought.
gs.
Related
I have a slider that is based on an un-ordered list. The way that it is made is to have a background-image, and then whatever text and header in the display on top of <li>.
This works fine, but it stretches the background-image, and using :cover cuts the image off. I have a great CSS workaround to use an image instead of a background-image, but then the text gets pushed to the bottom. I was wondering if there was a way to add this class to the background image
img {
width: 100%;
float: left;
margin-right: -100px;
position: relative;
}
Or... Can I style the list items to go on top of an image in this markup?
<li>
<img class="img" src="images/sandpiperBG.jpg" />
<h1>Fluid, flexible, fantastically minimal.</h1>
<p>Use any HTML in your slides, extend with CSS. You have full control.</p>
</li>
I tried to add a z-index to the <ul> and the <ul><li>, but it didn't work.
z-index controls what is on top, but it doesn't take objects out of the flow of the document. If you want to use an image outside the flow of the document you can position it absolutely and then z-index comes into play.
If none of these options works, your best bet might be to resize the image to prevent stretching or cutting.
You need to change the IMG to a DIV so that you can use a background image.
HTML:
<div class="myimg" />
CSS:
.myimg {
width: 100%;
float: left;
margin-right: -100px;
position: relative;
background-image:url('images/sandpiperBG.jpg')
}
I am working on a project for a class and have an issue.
The site can be found here: http://ispace.ci.fsu.edu/~seb10/cgs2821/proj10
What I have now is a div that I have positioned towards the bottom using inline styling in the HTML and a div.
It appears fine right now, but of course that depends on the browser that is being used.
I would like that image to always appear at the bottom without having to use inline styling. Essentially, I would like it to stick out of the footer, but not have anything else be affected or moved.
What would be the process to do this, if it is possible?
Here's a link to the CSS: http://2011.ispace.ci.fsu.edu/~seb10/cgs2821/proj10/style.css
Thank you very much for the help in advance.
I assume that the oil well tower image is the one to be positioned. I would create a .png file with a transparent background and then set it as background image to the .container element.
The .png transparency will allow the other background motif to show through in the open spaces (transparent) sections of your vector image.
This works fine as long as your footer elements flows right after your container element.
The key is place the image with position absolute. I have moved the mast illustration to the footer: http://jsfiddle.net/David_Knowles/98PLA/
Does this solve your problem?
#footer .container {overflow: visible;} /* use a different technique to wrap floated elements so you can place image in the footer and have it stick out - see underneath */
.fltright {position: absolute; bottom: 56px; right: 0;}
/* For modern browsers */
.container:before,
.container:after {
content:"";
display:table;
}
.container:after {
clear:both;
}
/* For IE 6-7 (trigger hasLayout) */
.container {
zoom:1;
}
<div id="footer">
<!-- Begin Container -->
<div class="container">
<img class="fltright" src='http://2011.ispace.ci.fsu.edu/~seb10/cgs2821/proj10/images/derrick.png' alt="derrick" width="300"/>
<h1>Copyright © 2013 <br />All Rights Reserved</h1>
<h3>Webmaster |Site Map | About</h3>
</div>
<!-- End Container -->
</div>
<!-- End Footer -->
To make an image ignore it's parent element, a combination of positioning and z-index can be used:
position: absolute;
z-index: 2;
You can also try playing around with the display and overflow properties depending on exactly what you want it to look like.
When I looked at your code, I came up with these css values to absolutely align your .sidebar on your page. You had position: relative; to position it, however, it moves relative to how the large the window is and the surrounding elements. This is why it was probably moving around. However, position: absolute; does not consider surrounding elements and therefore will stay put.
.sidebar {
position: absolute;
top: 233px;
right: 10px;
}
My css:
a.red, object, embed {
display: inline-block;
background-image:url(/bowties/red.png);
background-size: contain;
background-repeat:no-repeat;
width: 100%;
height: 30%;
}
My Html:
<a class="red"/>
What I want to do is have the image automatically sized right so I can use these as menu items. One on top of the next and so on. If I kept them in an image tag wrapped in an anchor then "height: auto;" works. I want to turn them into sprites which is why I am pulling it out, but I would like these to scale based on the size of the screen. Thanks in advance!
From my understanding this is not possible.
I found a resource that simply had me add a relatively sized 'filler' image. A blank placeholder that caused the div to get a height and width, then be able to be re-sized on the container re-size. Slight bit of a hack, but worked.
I am trying to create this effect by using HTML in UIWebView control of iOS. The goal is to create the effect of progress bar on the listing. So far I tried this but as you see, by adding a padding on diV makes everything messed up. How can I achieve similar effect? I have no issue of using table but seems that would be more difficult.
Thanks
Why not just use nested divs and give the inner Div a percentage width.
<div><div class="inner"></div></div>
And CSS:
div {
background-color: blue;
height: 30px;
}
.inner {
width: 50%;
background-color: skyblue;
}
Since divs are block level element they have a 100% width by default so you don't need to explicitly specify it for the outer div if that is sufficient.
Another possibility would be to use a background gradient and just move alter the background-position.
In the code you supplied you have this div:
<div style='position:absolute;left:0%; background-color: hsl(30,100%,59%);width:30%;z-index:10;'> </div>
Just add "top: 0px;" to it so that it becomes
<div style='position:absolute;left:0%; top: 0px; background-color: hsl(30,100%,59%);width:30%;z-index:10;'> </div>
And it will look correct.
Edit: And then give the LI elements position: relative to make it work with multiple elements. See http://jsfiddle.net/tFn78/9
Another version which is a bit cleaner: http://jsfiddle.net/v7zNn/ and adjusts to variable height of the title.
I have a page where the content is positioned in the center of the page using margin:auto and I want to add a background that is centered the same way but because of the background doesn't appear when I scroll down I have resorted to using position:fixed which nicely does the trick.
However, positioning it centrally the same way as the content is proving a huge challenge because playing with left:x% and margin-left:-y% is a nightmare and never quite works well that all screen resolutions.
The markup is simple:
<div id="main" class="container">
<div class="overlay"></div>
<div id="content"></div>
</div>
You can see the site HERE
The BEST CSS configuration I came up with is this:
.overlay
{
position: fixed;
top: 0; /* These positions makes sure that the overlay */
bottom: 0; /* will cover the entire parent */
left: 0;
width: 72%;
margin-left:14%;
height:100%;
background: #000;
opacity: 0.45;
-moz-opacity: 0.45; /* older Gecko-based browsers */
filter:alpha(opacity=45); /* For IE6&7 */
}
I've tried many combinations but the background always resized differently than the content and I would want it to stay in place.
Position:absolute with margin:auto works perfectly well except when you scroll down.
The above configuration works nicely except the "min-width". If I could get it to stop minimizing after a certain point, this would be perfect.
Many thanks in advance if you have a solution to this
you could use background-attachment: fixed for your background, instead of using empty markup for styling purpose. in this way you will see it even when you're scrolling down the page.