I have a slider on my homepage with.
I made a background, but it isn't the at the top. Now it's under my slide items. How can make sure that the background is upper than the slide items? Something with z-index?
if your "background is this one: IMAGE it will never show as you have put the image as background-image in the slider container so obviously the images inside that container will show on top.
What you need to do is to add in your html a div inside id="slider" right before the id="prevBtn" span like this one:
<div class="border-image"></div>
and add this css:
.slider4_effect {position:relative;}
.border-image {
position:absolute;
width:100%;
height:100%;
background-image:url('http://magento.gaafwebdesign.nl//skin/frontend/rwd/shop/images/sliderbg.png'); /*or your relative path*/
background-size:cover
}
that should work fine
Related
I have a page, where I use a full-screen bootstrap carousel for sliding images and a navbar at the top of the page (not fixed).
Now there should be a logo inside the navbar, that overlaps it's height at the bottom and therefore overlaps the carousel.
My problem is that the logo pokes out of the navbar, leading to images in the carousel being slid down.
See for yourself at http://strauss.co.at/reini/
Any ideas what I'm doing wrong?
You need to give the img tag inside the div with an id of logo the following CSS attributes: z-index: 1; and position: absolute. That's all!
You can use this css below:
#logo{
position: absolute;
z-index:1;
}
So I'm working on my first website, I'm trying to make an image gallery that shows thumbnails of images and enlarges them when you hover over them, I made the sizes of the images 100px*100px through the html itself then I used this css code:
img:hover {
width: 100%;
height: 100%;
}
obviously I'm missing something because when the images are enlarged they move the other images inline away which causes glitches because then you're no longer hovering over it. I tried fiddling about with the z-index but it didn't work, I tried putting them in spans with hidden overflow but I faced the same problem, what should I do?
You can take the hovered images out of the flow of the document with absolute positioning.
img:hover{
width:100%;
height:100%;
position: absolute;
top:0;
right:0;
}
Be sure to set the position of the container to relative.
fiddle here
I have a background image for the "portal" to a new website. On top of the image, there need to be 5 images, placed in a unique pattern, plus 3 divs with text with links. Here is a picture of what it needs to look like:
Link to design of Portal
http://dansdemos.info/clips/screenshots/portal.png
The portal needs to be implemented in a responsive design.
I have experimented with relative and absolute positioning, but I am having trouble figuring out whether either or both of those is the correct way to position these smaller items on top of the larger item. So, I am struggling to figure out the best way of positioning the images and yellow divs on top of the picture. My question is: what is the best way of putting the images and divs on top of the background image for the portal?
Link to construction to live portal.
http://dansdemos.info/prelaunch/WorldClothingCorp_QA/
I think I can figure something out, but I really want to do this the "right way", or at least a good way.
Thank you.
I've had this situation myself before.
Resize the images you want to put on top to the same size as the parent (background) image. So place the images the way you want and make the rest transparent (png24, good transparency support and lower file size as gif).
Using your favorite image editing software:
Create a canvas of the same size as the background image
Place the background image in the canvas for reference (and lock the layer if possible)
Put in the overlay image and position like you want
Repeat this for the other overlays
Remove the background (reference) image and make the canvas transparent
Export the overlay images as PNG24
In the CSS use:
img { width: auto; max-width: 100%; }
…to make the images responsive. Now if the window resizes the images will respond to the width you specify to the page container.
More info on responsive or "fluid" images here: http://alistapart.com/article/fluid-images
I would suggest you position your background image within a relatively positioned div container. Once you have that placed to your liking, You would do the same thing for the images to be placed on top of the big image except you will want to position them absolutely.
HTML:
<div id="container>
<img src="..." alt="Background Image" /> /* Big Image */
<img src="..." alt="Jacket" />
<img src="..." alt="Skirt" />
<img src="..." alt="Top" />
<img src="..." alt="Dress" />
<img src="..." alt="Jacket 2" />
RETAIL STORE
WHOLESALE USED CLOTHING
WIPING RAGS
</div>
CSS:
#container {position:relative;}
#container > img { width: 100%; }
#container img+a {position:absolute; top:30%; left:30%;}
#container img+a+a {position:absolute; top:50%; right:30%;}
#container img+a+a+a {position:absolute; top:30%; right:30%;}
#container img+a+a+a+a {position:absolute; top:30%; left:30%;}
#container img+a+a+a+a+a {position:absolute; top:80%; left:40%;}
#container .yellowflag
{
/* Retail Store */
background-image: url(...);
position:absolute;top:...;left:...
}
#container .yellowflag+.yellowflag
{
/* Wholesale */
top:...;left:...;
}
#container .yellowflag+.yellowflag+.yellowflag
{
/* Wiping rags */
top:...;left:...;
}
As Chawk said you want to position your divs containing each image using position:absolute in a div containing the background image which uses position:relative. By setting them up this way, the 5 images will be positioned in relation to their parent element rather than the full screen.
Be aware that the divs around the images are currently displayed as blocks meaning they take up the full width of the parent element. You might want to set widths for them and display them as inline-block to make things easier.
So, I have this wonderful image here:
And what it is is a header for a website - click it to view it full size..
I need to re-create this using HTML/CSS/images and I can't figure out how. It has to be 100% width yet, the point where the gradient turns from one type to the other, has to remain in the same place on resize. To illustrate:
The area that is not blacked out must stay in the center of the page at all times and not move. The areas in black must extend to 100% of the screen width and have a tiled background gradient.
How can this be done?
I have tried something like this:
Where green is a div with a fixed width and centered yellow is the 'twirl' gradient bit and then red/blue are the tiling gradients. But this does not work because the tiling gradients to not match the position of the 'twirl' when the browser is resized.
Note: This must support IE7+ and must be cross-browser compatible and preferably uses no javascript.
I’m not sure why do you actually want to make this so hard by cutting the image up into pieces?
Take the image, extend the canvas to let’s say 5000px and just repeat the gradients to both sides. You’ll maybe add about 200 bytes (yes, bytes, not kilobytes) to the image size, but you’ll make it all up without adding 2 more requests for the separate backgrounds to the page.
And then just set the image to background-position: center top;
And as the center DIV is fixed width, you can either add a container to have the background or add the background to BODY for example.
Well, I think I've managed to do it..
<header>
<div id="bg-left"></div>
<div id="bg-right"></div>
<div id="header-content">
My header contents
</div>
</header>
And
header {
height:88px;
}
header #header-content {
width:1004px;
height:88px;
position:absolute;
left:50%;
margin-left:-502px;
background-image:url("/img/header-bg-middle.png");
}
header #bg-left, header #bg-right {
position:absolute;
height:88px;
}
header #bg-left {
background-image:url("/img/header-bg-left.png");
width:50%;
}
header #bg-right {
width:50%;
background-image:url("/img/header-bg-right.png");
right:0px;
}
So basically, I am creating a fixed width div in the center of the page, and then behind that I create two 50% width divs that have the appropriate gradient background.
Id do the same thing as you started doing with the one 'twirl' being centered, with two divs on the outside... the way I would do this is like this:
this is what i have:
<div style="width:100%">
<div style="background:#333; position:absolute; left:50%; top:0; width:50px; margin:auto; height:50px; z-index:10;">
</div>
<div style="width:50%; position:absolute; left:0; top:0; background-color:#060; height:50px; margin:0; z-index:1">
</div>
<div style="width:50%; position:absolute; right:0; top:0; background-color:#060; height:50px; margin:0; z-index:2">
</div>
</div>
</div>
which can be viewed here: http://sunnahspace.com/TEST.php
basically you have a container div, which if you decide to move this around at all id make relative positioned. then youd take the piece where the gradients change and make that your 1st inner div, with the different gradients your 2nd and 3rd div. Basically, the 1st div (the "twist") is positioned to stay in the same place of the browser (the middle, see the 50%, but this can be set to say 200px from the right, etc.) with the other two divs expanding when browser window sizes change. The z-index layers the css, so the 1st one having a z-index of 10 is on top (the number hardly matters so long as it is the highest number, but leaving it like this allows you to add more layers underneath without having to change the z-index, with the other two having z-indexes of 1 and 2, doesnt matter which order so long as they are less than the top div, this lets the first div sit on top of these two divs, hiding where they meet. Should work, let me know how it goes, and if need be ill fix a few things.
Is this what you want to do? http://jsfiddle.net/nnZRQ/1/
I have a image who's width and height i got in Javascript. i want to set the background image on image.
means to the background image is look like image as youtube show the image on video called play icon.
i want to show them on image. can someone tell me how i can set playicon over the image.
I didn't understand exactly your question. I suppose you want to place img over a background-image if yes check the following example:
html
<div>
<img id="play" src="http://dummyimage.com/40x40/454/000&text=Play">
<img id="pause" src="http://dummyimage.com/40x40/848/000&text=Pause">
</div>
css
div {background:url("http://dummyimage.com/300x300/000/fff&text=video") no-repeat;
height:300px;
width:300px;
position:relative;
}
img#play {
position:absolute;
bottom:0;
}
img#pause {
position:absolute;
bottom:0;
left:40px;
}
Demo: http://jsfiddle.net/ACazB/
div has position:relative and imgs inside div have position:absolute. This will allow you to manipulate the position of any images in the scope of div. Using box offsets top, bottom,left,right you can move the images in the place you need.
http://css-tricks.com/791-absolute-positioning-inside-relative-positioning/
http://www.w3.org/TR/CSS2/visuren.html#position-props