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.
Related
I want to develop the next thing.
See example image: Overlapping div with text and background-color with a smaller width than the text
How can I achieve this? I'm using the Visual Composer in Wordpress. You can see what I made here: http://glashelder.id-buro.nl/hometest/. This is not how I want it.
add this to your css:
.wpb_single_image.vc_align_left {
text-align: left;
position: relative;
z-index: 1;
}
You can make an image by merging white and sky color portion and set that image as background-image of that div. Then select row layout(probably 2/3+1/3
is good as per image) in the visual composer.
Or you can do this via CSS by giving absolute position one of the
div and set some margins to get same design as per image but you will need to do some more design and write css for responsiveness. So I think first option is better. :)
So, for fun I'm building an iOS homescreen. I'm displaying the icons using <ul> and <li>.
The li's are build like this:
<li><img/><img/></li>
The first image is a delete button with display:none, the second image is the actual icon. If you long click the second image, the first one fades in. However, I do not know how to display the first image in the top right corner of the second image using css. Any help would be greatly appreciated.
There are tons of ways you can do that. Assuming the icon takes up the full space of the li, you could do this:
li {
position: relative;
}
li img:first-of-type {
position: absolute;
top: 0;
right: 0;
}
If you want it to be pure css you need these two to be positioned absolutely position:absolute;. Then make the 'x' button image the same size as the icon image. Then just give those two images the same left and top value.
#first_mage_id, #second_image_id {position:absolute; left:X; top:Y;}
Remember to replace X and Y with some values (depending on where you wish it to be). If it doesn't work show us your code so we can help you.
I have been trying to figure out how to change the background color of 2 divs but had it right the first time I believe. My code is as follows,
.maincontentrow {
width: 960px;
background-color:#999;
}
The Rest of my code:
The problem I am having is I am using Dreamweaver and the background color change shows up in design mode but not in live mode or when I run it from the browser. I've Googled this high and low and it appears my code is correct. It just wont show the color change in live or in browser. But It does show the change in design mode.
Any ideas on what I am doing wrong or what I can do to fix it? Thanks!
I think you haven't added any element inside the div. Place some text inside it or add height: 50px; in CSS
Try background : #999; or background-color:#999999 or background-color:rgb(153,153,153);
I am working as an internship for a company and the owner has asked if it would be possible to fade the random images that appear to the right of the website down to near the bottom of the page (that was bland, will go into detail below).
So far, I have set up a test site and here is a page example.
The site uses Joomla CMS (not my choice). If you look at the right there is an image of a musician, each refresh pulls up a different musician/image. What my boss wanted me to do (since apparently I'm low on tasks since revamping their site) is to make a fade gradient that starts at black under the image that uses the rest of the pages height to slowly transition to the background color or transparent (I assume the background color would be easier). So far my thoughts are that this is pretty impossible but I thought I would ask you guys anyways.
My main issue is the height right column of the page to dynamically match with the height of the page height... if that is possible. I know how to make it gradient, but the height issue is bugging me!
The CSS for the whole right column (without gradient, obviously) is:
#columnrt {
width:200px;
background-color:#673601;
float:right; }
If inspecting the source code on the page, the random image shows up in a class called "random-image" in which I have a strong feeling it's generated by Joomla... example so you can identify the what image are I am talking about:
<div class="random-image"><img src="/images/stories/sidebar/lubsym_nov11_017-crop.jpg" width="200" height="306"></div>
Any input would be nice, thank you all!
PS: unpaid internship... I don't want you guys to think I'm leaching off y'all!
As you say, your main problem is making the right column as tall as the page, i.e. extend down as far as the main content. This can be solved by adding to the CSS:
#columnrt {
width:200px;
background-color:#673601;
position:absolute;
top: 0;
right:0;
bottom:0;
}
That will make the height of the right column extend properly, allowing you to add the gradient.
use below css and one div and your assignment will be completed
td { position: relative; }
.bg-gradient { background: blue; min-height: 100%; width: 200px; position: absolute; z-index:-1; }
add this div as first child under '.columnrt'
<div class="bg-gradient"></div>
give background gradient you desire to '.bg-gradient' in css
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.