I have an image that I want to fix over the slider (can't put it in the slides themselves as an image because it needs to stay static) but for the life of me, I can't figure out how to get the image to display on top of the slider image.
It seems like the plugin's parameters have it set up so the slider will be on top of the page no matter what, either that or I am missing something.
The URL for the site is: http://dev.minnesotaimed.com/
More info: The image I want to move is the one w/ 4 circles, I am hoping to put it up on the right side of the slider area.
Any help would be beyond appreciated, we're on a incredibly tight deadline and I'm getting dirty looks because I can't seem to solve this quickly. Thank you so much for any help!
Try using this code for the image. This would put the below mentioned 4 circles image on the slider above. I hope it helps. Please mention in comments if there's a concern.
CSS:
img.alignright, .wp-caption.alignright {
margin: 4px 0px 2px 10px !important;
z-index: 9999999;
position: absolute;
top: 200px;
}
Related
I'm trying to create a menu which is divided by 50% width.
this is what i've been trying so far:
http://jsbin.com/gobacewovu/1
so, as you can see, my problem is that the "search" text is invisible. I noticed this problem and created another page, using a "menu" class.
http://jsbin.com/melekitata/1
the problem is now bigger. I was even looking for a solution in this site but I have not found a solution yet, though.
does anyone can help me with that, I'm seriously stuck.
thanks.
It is because #look has fixed position, you would need to give #search position: relative; z-index: 1; to place it higher up the stacking order.
CSS
#search {
position: relative;
z-index: 1;
}
I'm not completely sure what you are trying to achieve with this layout however but if you give me some more info I can help you.
this is what I'm trying to achieve: http://imgur.com/2OqnSIu
Three hours passed and I still can't figure it out how to do this. I've tried everything with positions and z-index but nothing works. I really don't want to use everything in a single image(border + pictures) and using it as a background because I'm trying to do a responsive website. Any ideas ? Thanks
I've tried to understand your question, but without real examples it's very difficult to uderstand:
Anyway, here's a JsFiddle which I've created which I do believe is what you need.
I do have a container with a padding, which is holding another container with a border. On top of that particular border an image is showed.
The above example is achieved by using z-index and relative positioning:
img { position: relative; z-index: 100; top: 100px; left: -30px; }
I am using a wordpress theme and have changed my background image.
I now want to display an image on top of the white background (where the content is displayed).
I have done this by using the following code:
img style="position: absolute; top:244px; left: 220px;" src="http://www.tgon.co.uk/wp-content/uploads/2014/01/strans1.png"
This looks exactly how I want it to, but it has a problem. The site has a drop down menu, when you scroll down the menu it will disappear when your mouse moves over the image which is displayed behind.
Can anyone help me to move the image back to overlay the background on every page?
I have tried using z-index without any success.
This is the site that I want to apply the image to: http://www.tgon.co.uk/
Here is an example of the problem I am having: http://www.tgon.co.uk/info/languages/french/
Any help you could give would be greatly appreciated.
Basically, what you need to do is to:
Remove the 'position:absolute' from the image. - this is what cause you the overlapping problem.
Add 'margin-top: -107px;' to the image. - this will push the image up to where you want it.
Anyhow, I didn't understand why didn't you use 'background' css property for this.
You could have just do this:
#primary {
background: #fff url('http://www.tgon.co.uk/wp-content/uploads/2014/01/strans1.png') no-repeat;
}
You have to remove this image:
And add this css:
#content {
background-image:url("http://www.tgon.co.uk/wp-content/uploads/2014/01/strans1.png");
background-repeat:no-repeat }
Here's the solution:
#branding { z-index: 1001;}
#inner-wrapper { z-index: 1000;}
Since the header is created before the #inner-wrapper div, you will need to apply a higher z-index to header compared to div#inner-wrapper`.
EDIT
Check the screenshot of the developer console view of your markup:
Just setting the z-index right for header & div#inner-wrapper did it for me.
Let's fix this then I'll be glad to help you set the image right.
First, a warning, I have come back from a years break of html/css and have pretty much forgotten everything, so I'm at newbie level again.
I have been trying to add background images - one at top left and one at bottom right. What I have at the moment can be seen here: http://test.nihongohub.com/Mainsite/firstsite.php as you can see if you change the width of the browser the div containing the img will hit my main part and ruin it.
I have tried a few fixes suggested on stack overflow but none of them worked. Does anybody have any suggestions how to fix this. A friend suggested that I add the img to the footer and squeeze it out, but I don't like this idea.
2 things I want this image to do, move with the browser window, and be able to go behind my main page.
Thanks for any help offered
You could try using fixed positioning and the use z-index to move it to the back, ie.
#bottom_leaf_holder {
position: fixed;
bottom: 50px;
right: 0;
z-index: -1;
}
edit: I ment fixed, changed the answer.
You could put all your content in a div, and add a css rule to that div. Something like
#main_holder {
background: transparent url('img.jpg') no-repeat bottom right;
}
The best solution for this would be to have a wrapper div just inside the body tag that contains only the background image. This will act similar to the body tag allowing you to place an image that does not interfere with the layout and will go underneath your content if the viewport is small.
Live Example Page:
http://newsite.702wedding.com/cheap-las-vegas-weddings.asp
I want the 3rd box on the right side to have a sprite image link in it. I cant seem to get the darn thing to show up.
The Image is : reserve-a-date-right.jpg
its 801px wide, with 401px viewable.
Thanks as Always,
Any Ideas would be helpful.
What am I missing? I have spent 3 hours trying to figure this out.
Add in: display: block; to #package-right-box-promo a
It should show up, though you may have to adjust the top margin. (Looks like margin-top: 19px; centers it nicely, but that's in Firefox 3)