Conditional background image in header - conditional-statements

I'm trying to modify the content-header of a website, so it will display a custom background image for the search result page and for single posts of a post type. Here's the current working code:
<div class="single__header" <?php if ( has_post_thumbnail() ) { // check if the post has a Post Thumbnail assigned to it.
echo 'style="background-image: url(\'';
the_post_thumbnail_url('post-background');
echo '\'); background-repeat: no-repeat; background-position: center center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;"';
}
?>>
And this what I've come up with:
<div class="single__header"
<?php if (is_page_template('single-perspactive-funding.php')) {
echo 'style="background-image: url([website-url-hidden]/content/uploads/2018/04/single-funding-header.jpg); background-repeat: no-repeat; background-position: center center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;"';
}
?>
<?php elseif (is_search()) {
echo 'style="background-image: url([website-url-hidden]/content/uploads/2018/04/Header-image_Notfound.jpg); background-repeat: no-repeat; background-position: center center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;"';
}
?>
<?php else : ?>
<?php if ( has_post_thumbnail() ) { // check if the post has a Post Thumbnail assigned to it.
echo 'style="background-image: url(\'';
the_post_thumbnail_url('post-background');
echo '\'); background-repeat: no-repeat; background-position: center center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;"';
}
?>
<?php endif; ?>>
But for some reason this isn't working, the header and the rest of the page is no longer loading.
I'm probably doing something wrong, but don't know exactly what. So any help is appreciated.
Maybe it's because the single funding is a post type and not a page? So maybe I have to change 'if (is_page_template('single-perspactive-funding.php'))' into something else?

There is an issue with your syntax, it is recommended to enable error printing in the development phase.
Your code is something like
<?php
// Some code ...
<?php
// you cannot have php inside php
?>
?>
I have tried to fix the syntactical errors in below code
<div class="single__header"
<?php if ( has_post_thumbnail() ) { // check if the post has a Post Thumbnail assigned to it.
$bgsearch = 'style="background-image: url([website-url]/content/uploads/2018/04/Header-image_Notfound.jpg); background-repeat: no-repeat; background-position: center center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;"';
$bgdefault = 'style="background-image: url(\''.the_post_thumbnail_url('post-background').'\'); background-repeat: no-repeat; background-position: center center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;"';
if (is_search()) {
echo $bgsearch;
} else {
echo $bgdefault;
}
}
?>
>
Div contents
</div>
Hope this helps.

Related

ionic 4 ion-content background-image not showing on device

I'm trying to add a background image in my ion-content
here is my current code:
ion-content{
--background: none;
background-image: url('/assets/images/home-background.png');
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
text-align: center;
}
I also tried the following but same thing happened.
ion-content{
--background: url('/assets/images/home-background.png') no-repeat center center / cover;
text-align: center;
}
It is working in browser but when I'm doing ionic cordova run android, the background image is not showing. I also tried to change the url to url('../assets/images/home-background.png'), url('./assets/images/home-background.png') and url('../images/home-background.png') but it's giving me error.
I tried to check it and debug it and maybe this can help, I clicked the url and it brings me to the resources which shows me the image
In this second image, I saw the home-background.png
didn't have the chance to solve this problem using the ionic-content, so what I did is to change the ionic-content to div, and it solve my problem. Working in web and android device.
Open scss file:
ion-content {
background: url('../../assets/img/myBg.jpg') center bottom no-repeat;
background-size: 100%;
}
Try changing the path keep images in main www/assets/img folder and then set
background-image: url('assets/img/home-background.png');
background-image: url('..assets/img/home-background.png');
if u have set path just type ../ or ./ automatically path will suggestion
You can try to change your image url as shown below
ion-content{
--background: none;
background-image: url('../../assets/images/home-background.png');
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
text-align: center;
}
this worked for me.

Is this possible? transparent png over slide revolution (clickable)

I want two slide revolutions (or at least one), but with this skin over it:
The overlay image would be on top of the images, so clicking the gallery would be impossible (and the bullets to change image inside of it). I know about map coordinates, but it's a slider revolution, so it will not work in this case I think.
Is there any way to achieve this?
My HTML & CSS so far: (JSFiddle)
<div class="thePNG"></div>
<div class="theSLIDERS">
<div class="fakeSLIDER1">HEY' IM CLICKABLE</div>
<div class="fakeSLIDER2"></div>
</div>
.thePNG {
background-image: url(my-overlay-image.png);
width: 787px;
height: 610px;
background-size: cover;
z-index: 2;
position: relative;
}
.theSLIDERS{
margin-top: -600px;
z-index: 1;
}
.fakeSLIDER1{
background-color: red;
width: 700px;
height: 300px;
text-align: center;
margin: 0 auto 0 auto;
}
.fakeSLIDER2{
background-color: green;
width: 700px;
height: 300px;
}
I found my own answer!
its easy:
CSS:
"pointer-events: none;"
!

How to keep the same background on a horizontally sliding web?

I'd like to ask if it's possible to keep the same background image while sliding on my webpage (using the image icons).
I wanted to keep the background from the mainpage (somehow fix it there) and just make the content 'slide on it'. I used this jquery - javascript method to make the slides.
Used these old jquery function for the sliding:
/* jQuery.ScrollTo
/* jQuery.LocalScroll
/* Fire Horizontal Scroll */
(full code is on the linked page)
The 9 'slides' are put in a wrap. The first one is the mainpage.
<body>
<div id="wrap">
<div id="one"><p>ONE</p></div>
<div id="two"><p>TWO</p> « HOME </div>
<div id="three"><p>THREE</p> « HOME </div>
<div id="four"><p>FOUR</p> « HOME </div>
<div id="five"><p>FIVE</p> « HOME </div>
<div id="six"><p>SIX</p> « HOME </div>
<div id="seven"><p>SEVEN</p> « HOME </div>
<div id="eight"><p>EIGHT</p> « HOME </div>
<div id="nine"><p>NINE</p> « HOME </div>
</div>
Here is the interesting part of the css
#wrap {
min-height: 100%;
width: 900%;
overflow: hidden;
}
#one, #two, #three, #four, #five, #six, #seven, #eight, #nine {
width: 11.1%;
float: left;
text-align: center;
}
* html {background:url(images/mainfull.jpg)}
* html #full {height:100%;}
Thanks for help
[SOLVED] All you have to do is change the background position to fixed instead of absolute.
.background-image {
background: url(images/mainfull.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
opacity: 0;
-webkit-animation-name: fade-in;
-webkit-animation-duration: 1s;
-webkit-animation-timing-function: ease-in;
-webkit-animation-iteration-count: 1;
-webkit-animation-delay: 3s;
-moz-animation-name: fade-in;
-moz-animation-duration: 1s;
-moz-animation-timing-function: ease-in;
-moz-animation-iteration-count: 1;
-moz-animation-delay: 3s;
-webkit-animation-fill-mode: forwards;
-moz-animation-fill-mode: forwards;
-animation-fill-mode: forwards;
background-image: url('images/mainfull.jpg');
background-position: center center fixed;
background-repeat: no-repeat;
}

CSS Animations Work in IE10 and Firefox, NOT in Webkit Browsers

this is my first time posting. I've searched and trouble shooted for the past two hours, but haven't been able to solve my problem. I suspect it's something stupid and simple, but I just can't find the error.
This is an excerpt from my testing page http://www.enviroprofit.com/sandbox.php. The rss feed blocks in the lower-right of the screen are supposed to scroll through the headline within the block. This action works properly in IE10 and Firefox.
I've added the -webkit- properties to the CSS, but they don't seem to work.
<style type="text/css">
#keyframes tickup {
from {transform: translateY(0px); }
to {transform: translateY(-1000px); }
}
#-webkit-keyframes tickup {
from { -webkit-transform: -webkit-translateY(0px); }
to { -webkit-transform: -webkit-translateY(1000px); }
}
div.ticker {
animation-name: tickup; -webkit-animation-name: tickup;
animation-duration: 120s; -webkit-animation-duration: 120s;
animation-direction: normal; -webkit-animation-direction: normal;
animation-iteration-count: 50; -webkit-animation-iteration-count: 50;
}
</style>
<div class="blog_block" style="width: 160px; height: 18px; overflow: hidden; ">
<a href="'.$feed_link.'" target="_blank">
<div style="position:absolute; width:100%; height:100%; overflow: hidden; top:0; left: 0; z-index: 10; background-image: url(\'empty.gif\'); " ></div>
</a>
<img src="'.$feed_icon.'" width="15" style="float:left; " />
<div class="ticker" style="animation-delay:'.$animation_start_time.'s; position:relative; width:120px; height:100%; padding-left: 10px; float:left; text-align: center; font-size: 12px; " >
Don't worry if the tags don't match up. The HTML is just an excerpt from php script. Thanks much.
animations are supported in -webkit browsers:
http://caniuse.com/#feat=css-animation
also you missing the properties animation-duration, animation-delay and animation-fill-mode for -webkit browsers
or you could try using the shorthand animation property
animation: <single-animation-name> || <time> || <single-animation-timing-function> || <time> || <single-animation-iteration-count> || <single-animation-direction> || <single-animation-fill-mode> || <single-animation-play-state>;
https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_animations
http://www.w3.org/TR/css3-animations/

Border-radius inside border bug in Opera

I have a problem with displaying a block with top/bottom border and border-radius. Don't know why an inside radius appears within a border.. Please, take look at the screenshot & code below..
http://img703.imageshack.us/img703/3074/scrren1.jpg
<section id="block">
<div class="block-header"><h1>Block</h1></div>
</section>
#block {width:1000px; height:329px; position:relative; border-radius:4px 4px 4px 4px; -webkit-border-radius:4px 4px 4px 4px;}
#block .block-header { position:absolute; right:0px; top: 0; border-top:10px solid #81a32b; width:500px; border-radius:0px 4px 0px 0px; -webkit-border-radius:0px 4px 0px 0px; }
Do u know any solution to this problem?
jsfiddle
In Opera the height is directly related to the rounding you are trying to achieve
Css
border-top:10px solid #81a32b;
border-radius:0px 10px 0px 0px;
Fiddle -> http://jsfiddle.net/325nH/2/
you have declared:
border-top:10px solid #81a32b;
border-radius:0px 4px 0px 0px;
so you are 6px short that are filled by Opera with white space