The background image is not showing. I must be missing something but going a bit cross-eyed trying to work out what it is.
This is what I have:
<div class="hero_text item">
<h3><?php echo $slide['slide_title']; ?></h3>
<p>
<?php echo $slide[ 'slide_desc']; ?>
</p>
<img style="background-image:url(<?php echo $slide['slide_image']; ?>)"></img>
</div>
And this is the CSS:
.hero_text img {
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
height: 600px;
}
I think you want to use:
<img src="<?php echo $slide['slide_image']; ?>" />
The img tag is for adding images to HTML.
If you actually want it as a background image, set it on a div:
<div style="background-image:url('<?php echo $slide['slide_image']; ?>')"></div>
Related
I have css class as "brands" now I need change size of thumbnail div in brand class how can I do this?
<div class="brands">
<div class="row">
<?php foreach ($item['brands'] as $key => $value): ?>
<div class="col-md-3">
<div class="thumbnail">
<img src="<?php echo base_url(); ?>assets/img/logos/<?php echo sprintf("%s-logo.jpg", $value); ?>" alt="<?php echo sprintf('%s Logo Image', ucwords($value)); ?>" />
</div>
</div>
<?php endforeach; ?>
</div>
</div>
you can add this code in css files:
.thumbnail {width: 100%;}
This will overwrite only .thumbnails elements inside .brands class
.brands .thumbnail {
width: yourWidth;
height: youtHeight;
}
When I put an image as background the image is cut, here's an example:
http://midanew.wpengine.com/
Look at the first big image (with the screaming people), now scroll down until you see the same picture only with their hands, since the picture is cut.
The two pictures are the same. Why the seconds picture is cut and how can I make the pictures to look the same?
The code for the first picture:
<div class="col-sm-8">
<?php
$attachment_id = get_field('rectangular_image');
$main_post_img = wp_get_attachment_image_src( $attachment_id, 'full' );
if ( $attachment_id ){ ?>
<img src="<?php echo $main_post_img[0] ?>">
<?php
}else{ ?>
<a href=<?php the_permalink()?>><?php the_post_thumbnail(); ?> </a>
<?php }?>
</div>
And the second one:
$first_special_img_id = get_field('rectangular_image');
if ( $first_special_img_id )
$first_special_img = wp_get_attachment_image_src( $first_special_img_id, 'full' );
else
$first_special_img = wp_get_attachment_image_src( get_post_thumbnail_id(), 'full' );
?>
<a href=<?php echo esc_url(get_permalink()); ?> rel="<?php the_title();?>">
<div class="special-project-section" style="background: url('<?php echo $first_special_img[0]; ?>')">
<?php
echo '<div class="special-cat-on-img">';
echo '<h5><div class="special-cat-name-img">' . __('Special Project', 'mida') . '</div></h5>'; ?>
<h6 class="speical-cat-title-img"> <?php the_title() ?> </h6>
<?php echo '</div>'; ?>
<?php echo '<div class="special-proj-ex">' . get_the_excerpt() . '</div>'; ?>
<div class="blue-line"></div>
</div>
</a>
Thanks in advance!
Add
background-size: contain;
to the line
<div class="special-project-section" style="background: url('<?php echo $first_special_img[0]; ?>')">
That is, replace that line with
<div class="special-project-section" style="background: url('<?php echo $first_special_img[0]; ?>');background-size: contain;">
in your second image.
See the below screenshot
See the docs for more details about background-css.
Your css for the class of the div where you have your second image, ".special-project-section" has a width of 750 and height of 300. You image is 944x415. Thus is will be cut. To make them look the same change that css class.
If you wish to keep the div the same size try to center the image with css like mentioned here
background: url(url) no-repeat center;
I have a Wordpress site which utilizes Bootstrap 3 and a Jumbotron header. I have a parallax effect on the nav and background which work using skrollr.js.
I have it set at different sizes for media Query (768px). 40% height for screen sizes above 768px. 25% for screen sizes smaller.
Right now the Jumbotron 'jumps' to the different sizes when the screen changes. I would like it to change sizes gradually as the screen shrinks and stretches. I would typically use percentages to accomplish this, but when I put 'min height: 40%' the height of the jumbotron goes to 0.
header html
<div class="container-fluid">
<div class="jumbotron" data-0="background-position:0px -50px;" data-350="background-position:0px 100px;">
<header id="skrollr-body">
<nav class="navbar navbar-custom" role="navigation" data-0="opacity: 1" data-50="opacity: 0">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<div class="navbar-brand">
<?php if (get_theme_mod(FT_scope::tool()->optionsName . '_logo', '') != '') { ?>
<a class="mylogo" rel="home" href="<?php bloginfo('siteurl');?>/" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>"><img relWidth="<?php echo intval(get_theme_mod(FT_scope::tool()->optionsName . '_maxWidth', 0)); ?>" relHeight="<?php echo intval(get_theme_mod(FT_scope::tool()->optionsName . '_maxHeight', 0)); ?>" id="ft_logo" src="<?php echo get_theme_mod(FT_scope::tool()->optionsName . '_logo', ''); ?>" alt="" /></a>
<?php } else { ?>
<h1 class="site-title logo"><a id="blogname" rel="home" href="<?php bloginfo('siteurl');?>/" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>"><?php bloginfo( 'name' ); ?></a></h1>
<?php } ?>
</div>
</div>
...
css is
.jumbotron {
min-height: 40%;
text-align: center;
margin: 0px;
padding: 30px 40px;
background: url('../img/homeBG.jpg') no-repeat center center;
background-size: 100%;
background-color: #f4f4f5;
}
Use CSS transitions. Add a transition to each of your media specific .jumbotron CSS, like so
...media query... {
.jumbotron {
transition: min-height 1s;
min-height: 40%;
....rest of css...
}
}
I have this site:
http://test.dac-proiect.ro/wp/
I want to make this change
http://i61.tinypic.com/296f3g4.png
Code HTML:
<div id="main">
<div id="linie">
<div id="logo-theme">
<a href="<?php echo esc_url( home_url( '/' ) ); ?>">
<img src="<?php echo get_template_directory_uri() . '/img/LOGO.png'; ?>" alt="<?php bloginfo( 'name' ); ?>" />
</a>
</div>
<div id="text-logo">
<h1>CABINET AVOCAT CODOBAN</h1>
</div>
<div id="square">
</div>
</div>
</div>
Code CSS:
#square
{
width:200px;
height:200px;
background:url(img/BODY-CONTACT.png)
}
#linie
{
display:inline-block;
}
#logo-theme{margin-top:200px;class="img-responsive" display:inline-block; margin-right:10px;}
#text-logo{text-transform:uppercase;font-size:15px;color:#fff;margin-top:30px;}
We found some examples on the internet and I tried but did not work ... Can you help me solve this problem?
Thanks in advance!
Apply these css on your #square:
position: absolute;
right: 0;
top: 200px;
I'm converting someone's static HTML design to Wordpress, but I run into a problem when working with the titles.
The case is that the title expands downwards, which means that when one title becomes more than one line, the other titles also jump up, even though they are only one line.
This is what happens
This is how I want it
This is the CSS I use to position the titles so the bottom of the title hits the bottom of the image:
.single_title {
font-family:Novecent_norm, arial, helvetica, sans serif;
font-size: 18px;
width: 240px;
color: white;
background-color: purple;
margin-top: -86px;
position: fixed;
}
So the question is: Is there a CSS property that can solve this problem, so extra lines of text get added on TOP of the title instead at the BOTTOM of it?
As requested, the HTML:
<?php get_header(); ?>
<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?>
<div class="content_container">
<div class="thumb_art">
<h2><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>">
<div class="thumb_img" style="z-index: 0;">
<?php
if (has_post_thumbnail()) {
the_post_thumbnail();
}?>
</div>
</a></h2>
<h2><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>">
<div class="single_title">
<?php the_title();?>
</div></a></h2>
</div>
</div>
<?php endwhile; else: ?>
<p><?php _e('Sorry, no posts matched your criteria.'); ?></p>
<?php endif; ?>
<div class="navigation"> <div class="alignleft"><?php previous_posts_link('« Next Entries') ?></div> <div class="alignright"><?php next_posts_link('Previous Entries »') ?></div></div>
<?php get_footer(); ?>
Make thumb_art position relative and then set bottom to 0 on single_title to get it always stick to the bottom
css
.single_title {
font-family:Novecent_norm, arial, helvetica, sans serif;
font-size: 18px;
width: 240px;
color: white;
background-color: purple;
bottom:0;
position: fixed;
}
And if not already set to relative add this aswell
.thumb_art{
position:relative;//actually any positioning would do
}
Still not entirely sure if I understood your question correctly, if there is something im missing please do tell.
Edit:
This is how it would look like if you had used my method
http://jsfiddle.net/nhewu/