I'm working in the custom-header.php file of my wordpress site and I'm trying to overlay a div containing a shortcode that produces a radio player (somewhat similar to this) on top of a div that contains an image. For some reason, despite using absolute and relative positioning and z-index, I can't seem to get it to lie on top of the image- it's consistently behind it. This is my code in custom-header.php:
<div id="headimg">
<div id="logo-image">
<img src="<?php header_image(); ?>" width="<?php echo esc_attr( get_custom_header()->width ); ?>" height="<?php echo esc_attr( get_custom_header()->height ); ?>" alt="<?php bloginfo( 'name' ); ?>" />
<div id="logo-player">
<?php echo do_shortcode('[radioforge id=1]') ?>
</div>
</div><!-- end of #logo -->
</div>
and my CSS:
#headimg #logo-image {
width: 100%;
overflow: hidden;
position: relative;
}
#headimg #logo-image img {
max-width: 100%;
height: auto;
border: none;
}
#headimg #logo-player {
position: absolute;
top: 50;
left: 50;
z-index: 10;
}
Not really sure why this isn't producing the desired result. I've tried giving #logo-image a negative z-index value as well, but that changes nothing. I know my radio player is appearing behind the image because I've set it to autoplay when the page loads and I can hear it, but for some reason I just cannot get it to sit on top. What am I doing wrong?
Related
Hello dear developers,
Iam having a problem by coding my Post grid. I want to blur the background image on hovering. But my text (in the same div is also blurring). Do you have a solution for this? Or isnt there an other way, without using this picture in a new div in the container. Want to keep it as background-image
The posts php:
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<div class="article" style="background-image: url(<?php echo the_post_thumbnail_url(); ?>);" onclick="self.location.href='<?php echo get_permalink( $leavename = false ); ?>'">
<div class="post_info">
<span class="post_cat"><?php the_category(' ') ?></span>
<h2 class="post_title"><?php the_title(); ?></h2>
<span class="post_date"><?php the_time('d.m.Y') ?></span>
</div>
<!-- .article --></div>
The css:
.article:hover {
-webkit-filter: blur(2px);
}
.article {
margin-top: 15px;
position: relative;
height: 229px;
margin-left: 15px;
margin-right: 15px;
float: left;
width: 25%;
cursor: pointer;
}
Thank you for helping me out, ExotiQ
You can't blur a background image, but you can blur any elements or pseudo-elements
I would go on and give a solution to your problem, but this one sums it up pretty good.
Check out this awnser
Hope that helps you out!
This image overlays another image. It's added to the page with HTML generated by PHP. This is the PHP code that generates the image:
Echo '<img src="images/tick.png" id="tick' . $i .'" h1 class="hidden" style="position: absolute; top: 30px; left: 70px;"/>';
I want the image to be hidden, and I'll change it to visible when the other image is clicked. This is the CSS:
h1.visible
{
visibility: visible;
}
h1.hidden
{
visibility: hidden;
}
What am I doing wrong?
You're adding your rule to an h1 element rather than an img. And I have no idea what you tried to do with that h1 attribute inside img - get rid of it. Try
echo '<img src="images/tick.png" id="tick' . $i .'" class="hidden" style="position: absolute; top: 30px; left: 70px;"/>';
And CSS:
img.hidden{
visibility: hidden;
}
I am a student and learning WordPress. I started with the Underscore_s starter theme. For a website I want to centre align the custom header but I am unable to do so. I created a class in CSS named "Headimg" and assigned the class to img in Header.PHP. Which I don't think is the correct way to do it, is it?
Header.PHP
<img class="headimg" src="<?php header_image(); ?>" width="<?php echo get_custom_header()->width; ?>" height="<?php echo get_custom_header()->height; ?>" alt="TCET R&D" >
CSS-
.headimg{
padding-top: 40px;
display: block;
margin-left: auto;
margin-right: auto;}
Try changing your class to this:
.headimg{
padding-top: 40px;
display: block;
margin: 0 auto;
}
I’m trying to make an image gallery, the issues i am having with the following code is that
the images are not floating to the left because the images are different sizes. also when i click on the image to see the full size its very pig. is there a way to fix this, or maybe display half of the picture when in galley mode.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Image Gallery</title>
<link rel="stylesheet" href='css/gallery.css'>
</head>
<body>
<div class='container'>
<?php if($images):?>
<div class='gallery cf'>
<?php foreach($images as $image):?>
<div class='gallery-item'>
<img src="<?php echo $image['full'] ?>" >
</div>
<?php endforeach; ?>
</div>
<?php else: ?>
There are no images
<?php endif; ?>
</div>
</body>
</html>
.cf:before,
.cf:after{
content: " ";
display: table;
}
.cf:after{
clear:both;
}
.container{
max-width: 940px;
padding: 10px;
background: #f0f0f0;
margin: 0 auto;
}
.gallery{
width:100%;
}
.gallery-item{
float:left;
background: #fff;
width:19%;
margin:1%;
padding:2%;
padding-bottom: 5%;
box-shadow:1px 1px 3px rgba(0,0,0,.2);
}
.gallery-item img{
width:100%;
}
Instead of using <img> with different sizes in the thumb gallery, use a div with a fixe dimensions, so they will float perfectly, than set the image as a background-image and add background-size: cover; So the image will cover the div and the overflow will be hidden.
Here's the code using what Simon Arnold suggested:
<div class='container'>
<?php if($images):?>
<div class='gallery cf'>
<?php foreach($images as $image):?>
<a href="<?php echo $image['full'] ?>">
<div class='gallery-item' style="background:url(<?php echo $image['full'] ?>);">
</div><!-- .gallery-item -->
</a>
<?php endforeach; ?>
</div>
<!-- .gallery cf-->
<?php else: ?>There are no images
<?php endif; ?>
</div>
<!-- .container -->
CSS
.gallery-item {
width:number;
height:number;
background-size:cover;
}
I just build a Social media site and (2) things I do when A user uploads a pic
Resize image to multiple sizes for proper use / viewing (Try and keep a consistent height or width) Photoshop images to a specific height this way its consistent.
Use CSS to keep the image width an height from expanding out side the region.
CSS CHANGES:
.gallery-item img{
width:100%;
height:**MAKE THIS YOUR CONSTANT HEIGHT**;
}
It will stretch the image if its scale is off alot but you will have your answer or put it as a background in a div as listed below.
CSS CHANGES:
#Pic{
height: **MAKE THIS YOUR CONSTANT HEIGHT**;
}
<div id='Pic' style='background:url(picture.jpg)'></div>
Here is a preview (although image will stretch your layout and gallery will stay organized and clean.
I have the following:
.home-thumbs h2 {
background: url("images/top-left-label.png") no-repeat scroll left top #CBCBCB;
font-size: 12px;
margin-left: -8px;
margin-top: -66px;
max-width: 268px;
padding-left: 12px;
position: absolute;
I only want to get that small png with a cut corner outside my div, but can't manage to do it. How should I do it, what am I missing here?!
The div is meant to be a "label" for a title over an image. I am having the same problem with a tooltip from a testimonial, I can't use the bottom part with the arrows and normal borders as, again, my img won't show outside the containing div.
Thanks.
P.S. HTML & PHP ..
<div id="home" class="home-thumbs">
<?php query_posts('cat=19&posts_per_page=1');
if(have_posts()) : while(have_posts()) : the_post(); ?>
<p class="cat-title"><?php echo single_cat_title();?></p> <?php the_post_thumbnail('medium'); ?>
<div <?php post_class(); ?> id="post-<?php the_ID(); ?>">
<h2><?php the_title(); ?></h2>
<?php $cat_id = 19; $cat_link = get_category_link( $cat_id ); ?>
<?php the_excerpt(); ?>
More in this section
</div>
<?php endwhile; endif; wp_reset_query(); ?>
</div>
You have it positioned absolutely, so use top and left as you're supposed to
.home-thumbs h2 {
background: url("images/top-left-label.png") no-repeat scroll left top #CBCBCB;
font-size: 12px;
max-width: 268px;
padding-left: 12px;
position: absolute;
top: -66px;
left: -8px;
}
Try overflow:visible on the containing <div>.