I have been strugglign for the last few horus trying to make it so that the background class will be centered in the website, but i have absolute position and fixed in my css for the inside of it because i need it done for a changing fading background image. But my problem is i cant get it centered in the site for example see in div.background i have margin 0 and it still isnt centered it just stays to the left i even tried but it doesnt work... How cani get the background div i made to be centered...
<div class="background">
<img src="images/back_1.jpg" width="990" height="660" alt="pic1" />
<img src="images/back_2.jpg" width="990" height="660" alt="pic2" />
<img src="images/back_3.jpg" width="990" height="660" alt="pic3" />
</div>
style
div.background {
margin:auto;
width: 990px;
position:absolute;
left:0px;
top:0px;
z-index:-1;
}
div.background img {
position:fixed;
list-style: none;
left:0px;
top:0px;
}
div.background ul li.show {
z-index:500
}
I think you want this:
div.background img {
position: fixed;
list-style: none;
left: 50%;
margin-left: -495px;
top: 0px;
}
left: 50% moves the left edge of the img to the center of the page, then margin-left: -495px; shifts it back to the left exactly the right amount so that it's centered.
This wouldn't work. What you should have is something like:
div.background {
position: absolute
top: 0;
left: 0;
width: 100%;
height: 100%;
background: no-repeat center center url('images/back_1.jpg');
}
and eliminate the individual <img> tags inside the div.
You can then use some javascript to swap the background images whenever, since CSS1 only allows a single background image (CSS3 allows multiples).
Did you try
#background {
margin: 0 auto;
width: 990px;
position:absolute;
top:0px;
z-index:-1;
}
Related
I have an image in the center of a div
The image is centered in the parent div using the following css:
img { margin:0px auto; }
The image can have arbitrary dimensions.
How can I position the Magnifying Glass (zoom) image on top left of the image without using Javascript, while the main image can have any width or height?
User position:relative and position:absolute. Look at the following HTML and CSS.
HTML
<div class="parent">
<div class="test"><img src="http://isc.stuorg.iastate.edu/wp-content/uploads/sample.jpg" border="0" />
<img src="http://www.beyotta.net/images/icon_magnifier.png" border="0" class="absimg" />
</div>
</div>
CSS
.parent {width:100%; height:400px; border:1px solid blue; text-align:center;}
.test
{
display:inline-block;
position:relative;
}
.absimg
{
position:absolute;
top:5px;
left:5px;
}
FIDDLE DEMO
Giving a position relative to the image and absolute to the magnifying glass image would do the trick here's the demo on what I've done.
http://jsbin.com/yumelamive/5/edit?html,css,output
i am not sure it will work or not but try using before will help
img:before {
content: 'img/zoom.png ';
position:absolute;
top:0px;
left:0px;
}
for proper help atleast provide a jsfiddle or code of your work
Try Use this
jsfiddle
div{
content:"";
display:block;
height:300px;
width:300px;
border:solid 1px #CCCCCC;
background-image: url("http://www.codeproject.com/KB/GDI-plus/ImageProcessing2/img.jpg");
position: absolute;
}
div:before {
content:"";
background-image: url("http://icons.iconarchive.com/icons/icontexto/search/48/search-red-icon.png");
top:0;
left:0;
position:absolute;
width: 40px;
height: 48px;
}
I would make a div for the image, set the background the image and add:
position: relative;
for that div. Then put the magnifying glass within the div and set:
position: absolute: top: 0; left: 0;
.image {
background: url(eiffel.jpg);
position: relative;
width: 100px;
height: 200px;}
.image img {
position: absolute;
top: 0;
left: 0:}
The 'relative' is what any 'absolute' objects..relate to.
I hope that helps.
set the image Magnifying Glass to absolute:positionand use left: right: for right position then the parent div set to position:relative
I am stuck in making images inside background of a class responsive.The website url .
It would be very helpful if you could help me out i am using bootstrap and nivo slider.
The css and the html that i am using for the slider are given below.
The css:
.slider-wrapper {
width: 310px;
height: 650px;
background: url("images/iPhone.png") center center ;
background-size:cover;
}
.nivoSlider {
position:relative;
width:290px;
height:512px;
top:60px;
bottom:65px;
left:23px;
right:24px;
overflow: hidden;
}
.nivoSlider img {
position:absolute;
top:0px;
left:0px;
width:100%;
height: 100%
}
The html:
<div class="slider-wrapper ">
<div id="slider" class="nivoSlider">
<img src="" />
<img src="" />
</div>
</div>
And a screenshot of the above code (with additional html ) on a laptop:
Here is the website url. Try viewing it below 380px width as that's when the problem occurs.
I want the image to be visible properly at less than 380px.
I want the all the images to become smaller and be in the center and properly aligned below 380px but i get this:
.
I would be more than thankful if you could help me out
It's a little hard to debug without seeing the whole picture, but I think you need to be using max-widths like the code below. This will prevent your divs/images from becoming larger than you want, but will allow them to be smaller if necessary.
.slider-wrapper {
max-width: 310px;
max-height: 650px;
background: url("images/iPhone.png") center center ;
background-size:cover;
}
.nivoSlider {
position:relative;
max-width:290px;
max-height:512px;
top:60px;
bottom:65px;
left:23px;
right:24px;
overflow: hidden;
}
.nivoSlider img {
position:absolute;
top:0px;
left:0px;
max-width:100%;
height: auto;
}
Absolute positioned elements need to be put in a floated container to move responsively. The mobile content will move in sync with the screen shell if you put the absolute container into a floated one. I ran into this exact same problem on one of my projects - it's a surprisingly easy solution.
Pen:
http://codepen.io/staypuftman/pen/tFhkz
Note the pink absolute positioned element moves as you resize the screen while staying inline with the blue box. The whole blue box with the pink absolutely positioned element inside will float together as unit to any width.
HTML:
<div class="hero-background">
<div class="hero-text-area-container">
<h3 class="hero-text-effects">Eaters: Find Your Favorite Food Truck</h3>
</div>
<div class="iphone-backdrop">
<div class="hero-image-band-container"></div>
</div>
</div>
CSS (background colors are to show elements):
.hero-background {
background: #dedede;
height: 100%;
margin-top: 4em;
min-height: 20em;
min-width: 100%;
}
.hero-text-area-container {
background: #d6ffd1;
float: left;
margin: 0% 6%;
max-height: 25em;
padding-top: 11em;
position: relative;
vertical-align: middle;
width: 55%;
}
.hero-background .hero-text-area-container h3 {
background: #f7f7f2;
opacity: .8;
padding: 1em;
text-align: center;
}
.iphone-backdrop {
background: #d1e2ff;
float: left;
height: 120px;
max-width: 320px;
padding-top: 2em;
position: relative;
width: 100px;
}
.hero-image-band-container {
background: #ffd1d1;
height: 80px;
position: absolute;
width: 80px;
top: 13%;
left: 0;
bottom: 0;
right: 0;
}
Change the css in nivo-slider.css from:
.nivoSlider img {
position:absolute;
top:0px;
left:0px;
width:100%;
height:100%
}
To
.nivoSlider img {
position:absolute;
top:0px;
left:0px;
/* now this is the important things for your problem */
vertical-align: baseline !important;
max-width: none !important;
}
i found the answer.It was posted to me by a user.So I'm sharing it if anyone else gets into any trouble:
"So to not have all the things in the comments I post an answer.
The "problem" on screen-/ viewport widths of 380px and below has several issues.
On your outer <div> with the class slider-wrapper3 (it's the one which holds the iPhone as background image) you should use the following in your CSS:
.slider-wrapper3 {
background-size: contain; /* you use cover */
background-repeat: no-repeat;
/* keep the rest of your actual code */
}
and remove the width setting (width: 310px;) at least for your small screen layout!
By doing so you have then fixed the position and size of the container (and also the background image).
So you still need to adjust the image sizes (probably in your slider script, or wherever the image's dimensions come from)."
Try this:
#media(max-width: 380px) {
.nivoSlider{
position:relative;
width:94%;
height:378px;
top:85px;
bottom:0px;
left:8px;
overflow: hidden;
}
How do I get a div background image to show above a img html tag. The reason for wanting to do this is for a semitransparent texture that overlays rotating images in a banner. I don't want to have to cut the texture with the image each time. That way adding/updating images in the future would be faster. I have tried the advice given in this post, but did not seem to work: CSS show div background image on top of other contained elements. Thanks for any help.
html:
<div id="sliderFrame">
<div id="slider">
<span id="slider-background">
<img src="/_images/rotating-banner/001.jpg" />
</span>
</div>
</div>
CSS:
#sliderFrame {position:relative;width:850px;margin: 0 auto;}
#slider {
width:850px;height:470px;/* Make it the same size as your images */
background:#fff url(/_images/marqueeLayout/loading.gif) no-repeat 50% 50%;
position:relative;
margin:0 auto;/*make the image slider center-aligned */
box-shadow: 0px 1px 5px #999999;
}
#slider-background{
position:absolute;
background: url(/_images/marqueeLayout/MarqueeTexture.png) no-repeat;
width: 850px;
height: 470px;
z-index: 100;
}
link to live site: http://lltc.designangler.com/
try:
HTML:
<div id="wrapper">
<div id="img"></div>
<div id="overlay"></div>
</div>
CSS:
#wrappaer{display:inline-block; position:relative; width:100px; height:100px;
box-shadow: 0px 1px 5px #999999;}
#img{display:block; position:absolute; z-index:1}
#overlay{display:block; position:absolute; z-index:2
opacity:0.3;
filter:alpha(opacity=30); /* For IE8 and earlier */}
make sure to adjust wrapper,img and overlay sizes, add your images etc'.
have you tried setting the opacity of the div element?
Edit:
After rereading your question, I believe this may not be what you're looking for. Have you tried explicitly setting the z-index of the slider element in the CSS as well?
I finally solved the issue by using an img of the background inside a div instead of making it a background image. My updated code is below:
<div id="sliderFrame">
<div id="overlay"><img src="/_images/marqueeLayout/MarqueeTexture.png" /></div>
<div id="slider">
<img src="/_images/rotating-banner/001.jpg" />
</div>
</div>
CSS:
#overlay{
display:block;
position:absolute;
width: 850px;
height: 470px;
z-index: 2;
}
The background image, as its name suggest, can never be in front of the child elements. Therefore, you will need to rely on absolute positioning to overlay that background image over the slideshow:
#sliderFrame {
position: relative;
width: 850px;
margin: 0 auto;
}
#slider {
width:850px;
height:470px;
background:#fff url(/_images/marqueeLayout/loading.gif) no-repeat 50% 50%;
position:relative;
margin:0 auto;
box-shadow: 0px 1px 5px #999999;
}
#slider-background {
display: block;
position: relative;
width: 850px;
height: 470px;
z-index: 100;
}
#slider-background:before {
background: url(/_images/marqueeLayout/MarqueeTexture.png) no-repeat;
content:"";
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
z-index: 100;
}
#slider-background img {
display: block;
}
I have chosen to use a pseudo element that is positioned absolutely over the #slider-background element itself, and it is stretch to the element's dimension by setting all four offsets to 0. Remember that you will also need to declare the #slider-background and its child <img> element as block-level elements.
http://jsfiddle.net/teddyrised/XJFqc/
The last few days i tried to center a button over a fluid image. So far the position is fixed and static. The relevant HTML part looks like the following:
<ul class="moodlegrid sectionwrap">
<li>
<a class="ajax1" href="project1.html">
<img title="Project 1" src="img/projectblur.jpg" alt="Project 1" />
<img title="Project 1" src="img/project.jpg" alt="Project 1" />
<span class="openoverlay">Click</span>
</a>
</li>
</ul>
The CSS looks like that:
.moodlegrid{
li{
a{
position: relative;
display:block;
width: 100%;
img:nth-child(1){
display:block;
}
img:nth-child(2){
display: none;
}
span{
display:none;
}
}
a:hover{
img:nth-child(2){
display: block;
position: absolute;
z-index: 100;
top:0;
left:0;
}
span{
display: block;
position: absolute;
text-align:center;
top: 37%;
left: 28%;
z-index:101;
#include border-radius(5px, 5px);
#include box-shadow(black 2px 2px 10px);
}
}
}
}
img{
width:100%;
max-width: 100%;
height:auto !important;
}
On mouseover a second image as well as a button should float centered on top of the first image. Problem is if the viewport changes the recent version doesn't work anymore and the button isn't centered. The following article on CSS-tricks had a promising solution:
Centering in the unknown
The demo worked fine:
Centering in the unknown demo
But it utilizes inline-block elements which makes it difficult to layer images and show on top of them a centered button in the end - the elements are displayed after each other when the display:inline-block property is set. There is also the problem that in contrast to my HTML the demo aligns a child object towards a parent.
Is there a way to apply the mentioned technique to my problem, or is there a maybe even better suiting approach? Best regards Ralf
If I understand you rightly, you're almost there I think.
<a> needs to be position: relative;
<span> needs to be position: absolute;
On the <span> if you set a specific width, and apply:
width: 100px;
height: 100px;
top: 50%;
left: 50%;
margin-top: -50px /* Half of the height */
margin-left: -50px; /* Half of the width */
http://codepen.io/anon/pen/xjcCf
Does that solve what you're trying to do?
Hi is this what look like
html
<div>
<h1><span>button</span></h1>
<img src="imageSample.jpg" alt="" />
</div>
css
div {
position:relative;
width:100%;
}
div img {
max-width:100%;
width:100%;
}
div h1 {
width:100px;
margin:auto;
}
div h1 span {
position:absolute;
z-index:999;
top:200px;
padding:5px;
background-color:#fff;
}
working demo
note: scroll fiddle so you can see the effect
In all the posts I've been able to find a deal with either centering a div inside another div or putting a div at the bottom of another div, and the advice has been great but I haven't been able to find anything to do both.
My code is:
<body style="text-align:center; margin:0; padding:0;">
<div style="width:100%; height:100px; background-image:url(header.png);position:relative;">
<div>
<div style="height:75px; width:950px; background-image:url(formtop.png); bottom:0; position: absolute; margin-left:auto; margin-right:auto;">
<div style="float:left; position:relative; left:30px; top:15px">
<img src="logo.png" width="88" height="38">
</div>
<div style="margin-top:15px">
<h1>Product Form</h1>
</div>
</div>
</div>
</div>
</body>
All I want to do is to put the formtop.png div at the bottom and center of the containing div. I can do one or the other but I can't do both. If I change position:absolute to position:relative then the image centers itself but its too high. When I change it back to absolute then it sits nicely at the bottom of its containing div but in IE it's way off the right and in firefox it's at the left side of the page.
Any advice?
You can do it by setting the formtop.png <div> to 100% width and centering the background image using CSS:
<!-- div with the formtop.png background -->
<div style="
height:75px;
width:100%;
background:url(formtop.png) no-repeat 50% 0;
bottom:0;
position: absolute;">
As an aside, if you move all your inline styles into a .css file, your code will be a lot easier to work with and maintain:
<div class="formTop">
.formTop {
position: absolute;
bottom: 0;
left: 0;
height: 75px;
width: 100%;
/* Set the background image to centered in this element */
background: url(formtop.png) no-repeat 50% 0;
}
Have you tried left:0; right:0; trick for absolutely positioned elements? It does not work for IE7 nor IE6, but it does for the rest of the browsers and later versions.
This is an example http://jsfiddle.net/6w6VR/
Try to avoid html elements that are only used for style, because you might wish to change your style later.
See this example, which uses the :after pseudoclass:
div {
width:100%;
position: relative;
background-image: url(header.png);
}
div:after {
display: block;
position: absolute;
z-index: -1;
bottom: 0;
left: 0;
content: '';
width: 100%;
height: 20px;
background: url(http://upload.wikimedia.org/wikipedia/commons/3/38/Wiktionary-ico-de.png);
background-repeat: no-repeat;
background-position: center 0px;
}
You can set your header.png as background for div.