have background images in nested divs as follows
<div id="templatemo_content" style="padding: 30px 30px 0 0; background: #fff url(images/foot_bg.png) no-repeat 0 bottom; z-index:10">
this div has grey colored background image
<div style="background:url(images/job.png) no-repeat 0 0; height:131px; z-index:5">
this is a nested div with another background image having right bottom overlapping grey colored image
</div>
</div>
below image is what i have achieved so far, however, expected image is the 2nd one below
used z-index to both images however browsing through internet found that z-index does not work on background images. please suggest a solution
You also need to set
position: relative;
Thus, the z-index will - should - be effective.
z-index is relative to the parent container from which z-index is set. As such, a child cannot have a lower z-index than its parent in terms of displaying below it.
You may want to change your HTML
<div>
<div>this is a nested div with another background image having right bottom overlapping grey colored image</div>
<div>this div has grey colored background image</div>
</div>
CSS (will require some alteration)
div {
position:relative;
background:#fff;
height:131px;
}
div:first-child {
background:url(images/job.png) no-repeat 0 0;
margin-top:30px;
height:100%;
width:100%;
}
div:last-child {
background:url(images/foot_bg.png) no-repeat 0 bottom;
position:absolute;
bottom:0px;
height:100%;
width:100%;
}
Related
I'm doing a grid with several elements in the sidebar of a WordPress site.
Each element of the grid is an image with a label below.
My goal is to have an image change:
the normal state of the image is to be green (#66be2c), then to the passage of mouse cursor will change it in the original image.
I tried using two physical images for the two states and overlaying them when needed. But this solution is very wasteful... load two different image files is not a good thing.
There's a way to achieve the same effect in a more efficient manner?
This is a part of my page code:
<td style="width: 150px; text-align: center;">
<p style="color: #66be2c;">
<img src="mydomain.com/aaa/wp-content/uploads/2015/08/GreenImage.png" style="width:50px; height:50px" onmouseover="this.src='mydomain.com/aaa/wp-content/uploads/2015/08/OriginalImage.png';" onmouseout="this.src='mydomain.com/aaa/wp-content/uploads/2015/08/GreenImage.png';">
</p
<p style="color: #66be2c;">.NET</p>
</td>
SOLUTION:
The correct way to do this is creating a Vector Image.
What you need is an image editor (such as Adobe Illustrator or others) and a C compiler (in particular two libraries for xslt)
These are two links that may be useful: SVG-Stacking_Guide and GitHub-SVG-Stacking-Download
I hope this can be of help to others who have the same problem.
It's a bad approach,
I'm not an expert in CSS or design but i think you should do :
<div class='overlay'></div>
<img src="mydomain.com/aaa/wp-content/uploads/2015/08/OriginalImage.png" style="width:50px; height:50px">
</div>
And put a class in CSS like this :
.overlay { background-color: your_color; }
.overlay:hover { background-color: transparent; }
You can overlay a DIV with a lesser opacity on to the image, and then register the hover such that the covering div fades away and the real image appears.
<div class='cover'></div>
<img id='your-image' />
The CSS for the image would be as such:
.cover{
position: absolute;
top: 0;
left: 0;
opacity: .7;
background: green;
/* additional transition effects */
-webkit-transitions: all .3s;
-moz-transitions: all .3s;
transitions: all .3s;
}
.cover:hover{
opacity: 0;
}
Note that the covering div and the image should be in the same containing div relative to each other.
You could use the ::before selector to achieve this. This would mean not using any extra markup, and no javascript either. You'd really benefit from not using that inline css either. Take a look at CSS :: Before
HTML:
<table>
<tr>
<td>
<p>
<img src="mydomain.com/aaa/wp-content/uploads/2015/08/GreenImage.png" class="image">
</p
<p>.NET</p>
</td>
</tr>
</table>
CSS:
td {
width: 150px;
text-align: center;
}
td p {
color: #66be2c;
}
.image {
width:50px;
height:50px;
position: relative;
}
.image::before {
content: "";
position: absolute;
height: 50px;
width: 50px;
top: 0;
left: 0;
background: green;
}
.image:hover::before{
display: none;
}
Basically, this targets your image with a class of .image and puts a 50 x 50px box on top of it with a green background. When you then move your mouse over it, it gets rid of the box.
You can see this working in this fiddle
The number of checkboxes can extend to like 40. If that happends, the scroll bar works and you can scroll to the right.
But i want that the image also adjust itself to that length.
So right now if i scroll to the right the image automatically stops.
Also when there are only 2 checkboxes, i want the train to be that smal. (So i just want the image to adjust to the length of the checkboxes.
The code is:
<div id="axle_bogie_border">
<!--This is the train image-->
<img src="Images/axle_train.png" alt="train">
<!--The show axles are the number of checkboxes (Filled in by a user)-->
<div id="show_axles">
<?php
$_POST['number_of_axles'];
if(isset($_POST['number_of_axles'])){
for($i=0; $i<$_POST['number_of_axles']; $i++){
echo "Axle " . "$i " . "<input type='checkbox' name='axles[$i]'>";
}
}
?>
</div>
</div>
And the CSS:
#axle_bogie_border {
border: 2px solid black;
width: 98%;
height: auto;
overflow-x: scroll;
overflow-y: hidden;
white-space: nowrap;
display: inline-block;
}
#axle_bogie_border img {
width: 100%;
height: 200px;
}
The show axles div has no content yet.
This is a example of how it looks now:
And as you can see the train does not continue after a certain length.
I think you should slice the train image into an engine and a carriage image and then define the carriage-image as background-image of #axle_bogie_border with background-repeat:repeat-x.
http://www.w3schools.com/cssref/pr_background-repeat.asp
Maybe this is helpful: CSS multiple Background Images both repeat-x
I'm trying to create a full-width responsive portfolio grid. I set the width of the items using calc(), and set the thumbnail image to take up 100% of thumbnail div using:
`img.attachment-portfolio-thumb{
width:100% !important;
height:100% !important;
}`
This works, aside that there is about an extra white 10 pixels below each image, inside each div.portfolio-list, and I can't figure out where it is coming from and how to get rid of it. In "inspect element", when hover over the div.portfolio-list, the div takes up the entire space 100%, so it's something inside the div which is causing the extra space.
What I noticed is that in "inspect element" mode the <a> tag (that the portfolio-thumb thumbnail is in, in the Pods Template), has the following dimensions - and the white extra space if part of it: 315px x 26px (315px is the width of the div.portfolio-list as this browser width).
Link to visual image: The left is on hover, as you can tell the overlay includes the bottom empty 10px. The right bottom you see a white strip.
http://prntscr.com/5yedsp
Below is the code for the grid:
Pods Template:
<div class="portfolio-list">
<div class="overlay">
<p>{#post_title}</p>
{#post_thumbnail.portfolio-thumb}
</div>
PHP:
<section class="portfolio_home_inner">
<section class="portfolio_home">
<?php
echo do_shortcode ('[pods name="portfolio" template="portfolio-list"]');
?>
/ Add Image size for Portfolio List
if ( function_exists( 'add_theme_support' ) ) {
add_theme_support( 'post-thumbnails' );
// additional image sizes
add_image_size('portfolio-thumb', 300, 300, true ); // (cropped)
}
CSS:
div .portfolio-list{
float:left;
width: calc(20%);
overflow: hidden;
position: relative;
display: inline-block;
}
/*Wordpress default selector for new image size*/
img.attachment-portfolio-thumb{
width:100% !important;
height:100% !important;
}
div .portfolio-list p{
display: none;
color:#000;
}
div .overlay:hover:after {
content: ' ';
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
background-color: rgba(234,79,38,.85);
}
Would anyone know what is causing the extra 10px underneath the image?
Thank you!
You image has a margin on it of 32px 0 15px (inspect element with chrome), for the class ".image_pic". Setting the image_pic "margin-bottom : 0;" should sort it out for you, perhaps with the important tag.
I am looking to handle files that were uploaded by users. The main issue in that situation is that they differ in size.
How can I center an image of unknown size, both vertically and horizontally, into a div?
Thanks a lot
EDIT: I am making a thumbnail for an image. Basically, I want to keep the div to the same size, and I want the image inside that div to fit the div, but without changing the scale. I am using overflow:hidden
EDIT:My code is
<div class='pic'><img id='theimage' src='image.png'></div>
and my CSS is
#theimage {
vertical-align: middle;
display: inline;
}
You can do this using the background CSS property. Give your <div> these properties:
div.whatever {
background-position: center center;
background-repeat: no-repeat;
}
Then in your HTML (because it's being generated dynamically), add a style="" attribute to the <div> with the URL of your image in it:
<div style="background-image: url('/path/to/image.png');"></div>
You could do this with an <img> tag inside the <div> too:
<div>
<img src="image.png">
</div>
With this CSS (untested, should work):
div {
text-align: center;
}
div img {
vertical-align: middle;
display: inline;
}
I'm assuming you've given your <div> a fixed width and height elsewhere.
Force the container to behave as a table cell.
#container {
display: table-cell;
vertical-align: middle;
text-align: center;
}
Demo
i got a suggestion though this thread is old
try
< div style='text-align:center;overflow:hidden;width:200px;height:200px;' >
< img src='anypath' width='190'style='vertical-align:middle;display:inline;' />
works just fine ! goodluck
Can somebody please help me out on how to increase the size of the rounded button with respect to text. Please check the image:
I want to be able to write any length of text and rounded button will stretch automatically based on text.
Please help me on how to write CSS for to get this working ?
Note: I don't want to use CSS3 border-radius because it does not work in IE and I don't want to use css3pie, etc, that's why i have created the rounded images. Thanks
Use the Sliding Door Principle. http://www.alistapart.com/articles/slidingdoors/.
In sliding doors you have two extreme as images(rounded) between these images is a background. The images move (slide further) based on the length of the text.
ul {
list-style-type: none;
}
ul li {
height: 31px; // height of the background image *reused below
margin: 10px; // width of the left image *reused below
float: left;
background: url(left.png) no-repeat top left;
}
ul li div {
height: 31px;
margin-left: 10px;
padding-right: 10px;
background: url(right.png) no-repeat top right;
}
//used with
<ul>
<li><div>text</div></li>
<li><div>texttexttext</div></li>
<li><div>texttexttexttext</div></li>
</ul>
I would probably opt for creating a div which inherits a css class like the following
<div class="button">TEXT HERE</div>
The CSS would be the following:
.button { border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; background-color: blue; }
The above style would allow all browsers (except older IE's) to render the rounded corners rounded which means you will have no need for images