I'm trying to setup a page background that scales with resolution but still looks nice.. heres what Im using..
The site is http://www.gd-gaming.com/wordpress, If you inspect it with firebug, it just doesnt load the image... but if I add that path straight into the css, it works.
Additionally, I use this same code on www.gd-gaming.com for that background and it works perfectly. Help needed!!
<div id="background"> <img class="background" src="images/bgmain.jpg" /> </div>
#background {
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
z-index: -1;
}
img.background {
width: 100%;
}
fieldset, img {
border: 0 none;
}
You need to mak sure that images/bgmain.jpg really exists. I could not find it on your server. Instead, I replaced it with
<img class="background" src="/images/GDG/skyrimpapa.jpg">
on your /wordpress page (the dame image used on your home page) and it worked fine. Looks like either your image does not exist or you do not have permissions for that image set properly.
Related
I'm currently trying something out which i saw on another website.
Imagine many pictures at the same position at the bottom of the website. Now when you scroll up - it will scroll every picture one bye one up - when done you will get eventually to the footer.
I already tried position: sticky etc. but it did not worked as I wanted.
Can someone help me? I would be so happy!
.poster-middle {
width: 100%;
height: 100%;
top: 0;
position:-webkit-sticky;
position:sticky;
}
.poster-middle-img {
margin-top: 500px;
}
.poster-left {
width: 100%;
height: 100%;
top: 0;
position:-webkit-sticky;
position:sticky;
}
.poster-left-img {
margin-top: -700px;
}
.poster-right {
width: 100%;
height: 100%;
top: 0;
position:-webkit-sticky;
position:sticky;
}
.poster-right-img {
margin-top: -700px;
}
<div class="poster-middle"><div class="poster-middle-img"><img src="img/1.jpg"></div></div>
<div class="poster-left"><div class="poster-left-img"><img src="img/2.jpg"></div></div>
<div class="poster-right"><div class="poster-right-img"><img src="img/3.jpg"></div></div>
right now everything is scrolling up together
You can achive this with pure css.
The trick is to use the sticky attribute of the position property and define the bottom property. This way all images are sticking to the bottom of the page. If the value of the bottom property is less than the image height, the top of all the images are visible all the time. The images below the first one are outside of view (technically) but will be visible because of the sticky attribute. Margin-bottom defines the margin between the images.
When the user starts scrolling, one image after the other is scolling into the view and is released from the position at the bottom and will scroll freely to the top.
position: -webkit-sticky;
position: sticky;
bottom: -200px;
margin-bottom: 300px;
The rest is normal positioning.
I created a little fiddle to show a full example. You can build your solution from there very easily.
I said CSS only, but used javascript in the fiddle. The code is only to give all elements a z-index. You can do this when generating the page or with nth-child in the css. But I didn't want to do that. Call it laziness ;)
You can use jquery to do this
var src = ['url_image1.jpg', 'url_imafe2.jpg'];. // Array of source of images
var i = 0;
$(document).ready(function() {
$(window).bind('mousewheel',function() {
$('#imgs').hide().delay(1000).fadeIn();
if (i==1){
$('#imgs').attr('src', src[i]);
i=0;
}
else {
$('#imgs').attr('src', src[i]);
i=1;
}
});
});
<style>
div{height:500px}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<img id="imgs" style="display: none;margin-left: 100px;margin-top: -150px; position: relative" src="https://i.ytimg.com/vi/vl8IxeB0ss4/maxresdefault.jpg">
</div>
Is there a way to insert default page border to all the pages in the pdf?
There was any option found in mpdf. Any one help me ?
Create an image the same size as the paper stock you're using (A4, letter ect). Then set the image as a background on #page:
#page {
background: url(<?= __DIR__ ?>/background.png) no-repeat 0 0;
background-image-resize: 3;
}
Adjust the margins in #page so the text is displayed in-between your border.
Note: there's a bug in PDF.js that'll cause a blurry image to be displayed when using this method. It's fine when viewed in Adobe Reader though. If that's a problem, you can set an absolute-positioned Header or Footer and it'll do the same thing:
<style>
#page {
header: html_Header;
}
#background {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
</style>
<htmlpageheader name="Header">
<div id="background">
<img src="<?= __DIR__ ?>/background.png" />
</div>
</htmlpageheader>
The image caption and content is held in place by the image. When window is resized or image is loading the page content jumps up and is then jumps back down again.
Is it possible to prevent the content from moving in this way?
<div class="profile">
<img src="http://lorempixel.com/g/720/720/nature" alt="" />
</div>
See https://codepen.io/atoms/pen/bRdLVe
Built on Chris Ferdinandi's Kraken CSS framework.
This seems to do the trick:
.profile {
position: relative;
width: 100%;
padding-bottom: 100%;
float: left;
height: 0;
}
.profile img {
width: 100%;
height: 100%;
position: absolute;
left: 0;
}
and the result:
https://codepen.io/atoms/pen/jwbOYe
Now when you reload the page the text stays in place even when the image has not yet loaded. And you can resize the browser window to reflow the contents with the same result.
Not sure if the CSS is entirely correct but it seems to work.
Firstly, you can add a class to your caption, like following:
<p class="image-caption"><small>Image caption</small></p>
And then add a "hidden" class in CSS:
.hidden {
display: none;
}
Then use jQuery to implement this feature:
$(document).ready( function() {
$(".image-caption").addClass("hidden");
$(".profile img").on('load', function() {
$(".image-caption").removeClass("hidden");
})
});
Note: you need to include jQuery in your HTML code
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
This depends on if you are going to have consistent image sizes or not. If your images will always be the same size in that spot, you can set a CSS height of the image size on the image (or even your profile div) and that will create the space on the page before the image loads, preventing the jump.
.profile img { height:250px }
If your images will vary in size and you need to avoid distortion, a JS approach like also mentioned here might be a better approach.
I'm trying to set "pointer-events: none" to a semi transparent PNG, in order to be able to navigate the iframe (it's a Google Map) placed beneath that PNG. I tried giving "pointer-events: auto" to the iframe, and also "pointer-events: none" to the parent div, yet none of it allows to click through.
For info, the iframe is absolutely positioned, whereas the png and parent div are both relative.
The HTML is dead simple:
<div class="wrapper">
<iframe class="map" src="https://www.google.com/maps/d/embed?mid=zZ48oPOpCSZo.khyS2koft-Ss"></iframe>
<img src="http://thehermitcrab.org/wp-content/uploads/manual-uploads/the-story/hey-there-bottom-1366.png"/>
</div>
and here's the css:
.wrapper {
position: relative;
}
.wrapper img {
pointer-events: none;
display: block;
position: relative;
}
.map {
pointer-events: auto;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
}
and here's the website:
www.thehermitcrab.org
(scroll down a tiny bit and you'll see the map)
Thank you so much in advance!
The iframe has an z-index of -1, which seems to cause it to ignore mouse events despite the pointer-events setting. Change it to at least 0 and let the image have a z-index that is bigger.
I am currently trying to modify my Royal Slider plugin on Wordpress (http://dimsemenov.com/plugins/royal-slider/)
I am aiming to center the text on all the captions as well as make the caption width 100%
This is the code that is working:
<div class="rsContent">
{{image_tag}}
<div class="rsCaption">
<h3>{{title}}</h3>
<p>{{description}}</p>
</div>
{{thumbnail}}
{{html}}
{{animated_blocks}}
{{#link_url}}
<a class="rsLink" href="{{link_url}}">{{title}}</a>
{{/link_url}}
</div>
This is the part I really don't know about:
#rsCaption {
position: absolute;
text-align: center;
I am unsure of placement as well.
Any guidance / links would be great. I am a total newbie trying figure this stuff out slowly.
Firstly you have class="rsCaption" and your css says #rsCaption which is for ids. So your CSS should be something like this:
.rsContent {
position: relative;
/* rest of the code that already exists */
}
.rsContent .rsCaption {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
margin: 0;
}
This is just a wild guess, depends on what you have at the moment. If I would see it somewhere in action that would be something else.